Pomocou dialógového okna jQuery UI v aplikácii Wordpress - wordpress, jquery-ui

Viem, že najmenej 1 ďalší príspevok o SO sa zaoberá touto otázkou, ale odpoveď nebola nikdy presne stanovená.

V dokumente head.php pracujem v téme motívu WP. Pridal som to do hlavy:

<link type="text/css" href="http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />


<?php
wp_enqueue_style("template-style",get_bloginfo("stylesheet_url"),"",version_cache(),"screen");
wp_enqueue_script("jquery-template",get_bloginfo("template_directory")."/js/jquery.template.js",array("jquery"),version_cache(), true);
wp_enqueue_style("jquery-style", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css");
wp_enqueue_script("jq-ui", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js ");
wp_enqueue_script("jq-ui-min", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" );
?>

a pridal som to do tela:

<script>
jQuery(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon.</p>
</div>

ale žiadne kocky. Moje div zobrazuje ako štandardné div.

Akékoľvek nápady? Viem, že top stylesheet by mal byť volaný s enqueue, ale to by nemalo zastaviť to z práce.

odpovede:

7 pre odpoveď č. 1

WordPress jQuery sa volá v režime bez konfliktov:

jQuery(document).ready(function($) {
$("#dialog" ).dialog();
});

Do jQuery sa načíta aj používateľské rozhranie jQuery. Získavate 2 chyby jazyka JavaScript:

Uncaught ReferenceError: jQuery nie je definované

103Uncaught TypeError: Vlastnosť "$" objektu [object DOMWindow] nie je funkcia

Prvá chyba je z jQuery UI načítania pred jQuery a druhá je preto, že $ nie je rozpoznaná v režime bez konfliktov.

Odstráňte ktorýkoľvek z inline <script src= tagy a volanie do custom.css v hlavičke php a pridajte túto funkciu do vášho tematického súboru functions.php na načítanie skriptov. WordPress ich dá v správnom poradí.

add_action( "init", "frontporch_enqueue_scripts" );
function frontporch_enqueue_scripts() {
if (!is_admin() ) {
wp_enqueue_script( "jquery" );
wp_register_script( "google-jquery-ui", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js", array( "jquery" ) );
wp_register_script( "jquery-template", get_bloginfo("template_directory")."/js/jquery.template.js",array("jquery"),version_cache(), true);
wp_register_style( "jquery-style", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css", true);
wp_register_style( "template-style", "http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css", true);
wp_enqueue_style( "jquery-style" );
wp_enqueue_style( " jquery-template" );
wp_enqueue_script( "google-jquery-ui" );
wp_enqueue_script( "jquery-template" );
}
}

---

1 pre odpoveď č. 2

Budem stavať vlastný plugin navložte údaje o vlastných tabuľkách MySQL. Už takmer týždeň som sa snažil urobiť potvrdzovací dialóg pre udalosť odstránenia položky na tabuľke Wordpress. Keď som skoro stratil všetky vlasy hľadaním odpovede, zdalo sa to príliš dobré a jednoduché byť pravdivé. Ale pracoval. Dodržiava kód.

UPRAVIŤ: ukáže, že wp štandardný jquery nebolfunguje správne a spoločnosť Google, ktorá je hostiteľom jQuery zahrnutá v inej triede, robil správne volania pre JS. Keď som odstránil nižšie uvedený zoznam zrušenia registrácie / registrácie, VŠETKY ostatné dialógové volania prestali fungovať. Neviem, prečo sa to stalo, alebo verzia jQuery zahrnutá v tejto konkrétnej distribúcii WP, ale keď som sa vrátil k starým registráciám, pomocou skriptov hosťovaných spoločnosťou Google, ako je vidieť nižšie, všetko sa vrátilo k normálnosti.

V systéme PHP (najskôr zaregistrujte a zavolajte skript):

add_action("admin_init", "init_scripts_2");

function init_scripts_2(){
///deregister the WP included jQuery and style for the dialog and add the libs from Google
wp_deregister_script("jquery-ui");
wp_register_script("jquery-ui", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js");
wp_deregister_style("jquery-ui-pepper-grinder");
wp_register_style("jquery-ui-pepper-grinder", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css");
wp_enqueue_script("jquery-ui"); ///call the recently added jquery
wp_enqueue_style("jquery-ui-pepper-grinder"); ///call the recently added style
wp_deregister_script("prevent_delete"); ///needed the deregister. why? don"t know, but worked
///register again, localize and enqueue your script
wp_register_script("prevent_delete",  WP_PLUGIN_URL . "/custom_plugin/js/prevent_delete.js", array("jquery-ui"));
wp_localize_script("prevent_delete", "ajaxdelete", array("ajaxurl" => admin_url("admin-ajax.php")));
wp_enqueue_script("prevent_delete");
}

Ďalej, ak otvoríte dialógové okno na udalosti kliknutia, ako je ja, uistite sa, že používate ALWAYS triedu namiesto id na identifikáciu tlačidla alebo odkazu neskôr na jQuery.

<a class="delete" href="?page=your_plugin&action=delete">Delete</a>

Musíme tiež použiť značku, ktorá obsahuje text dialógu. Potreboval som nastaviť štýl na skrytie div.

<div id="dialog_id" style="display: none;">
Are you sure about this?
</div>

Nakoniec, jQuery.

/*jslint browser: true*/
/*global $, jQuery, alert*/
jQuery(document).ready(function ($) {
"use strict";

///on class click
$(".delete").click(function (e) {
e.preventDefault(); ///first, prevent the action
var targetUrl = $(this).attr("href"); ///the original delete call

///construct the dialog
$("#dialog_id").dialog({
autoOpen: false,
title: "Confirmation",
modal: true,
buttons: {
"OK" : function () {
///if the user confirms, proceed with the original action
window.location.href = targetUrl;
},
"Cancel" : function () {
///otherwise, just close the dialog; the delete event was already interrupted
$(this).dialog("close");
}
}
});

///open the dialog window
$("#dialog_id").dialog("open");
});
});

UPRAVIŤ: Volanie pre štandardný dialógový štýl wpv štýle "pepper-grinder" sa dialógové okno objavilo správne v strede okna.Viem, že hľadanie dialógu nie je veľmi jednoduché pre oko, ale potrebujem potvrdzovací dialóg a to fungovalo dobre pre mňa.

---

0 pre odpoveď č. 3

Dialóg div je vytvorený AFTER keď sa pokúšate o to, aby ste sa na ňu pokúšali, namiesto toho by ste mali používať:

$(document).ready(function() {
$( "#dialog" ).dialog();
});

---