Диалоговое окно JQuery UI в wordpress admin

Question

Я пытаюсь использовать скрипт диалога jQuery UI на моей странице администрирования темы Wordpress. Все прямо из демонстрации UI, и все же я получаю диалоговое окно, которое выглядит так: http://flic.kr/p/8gAPt6 - обратите внимание, что диалог не выставляется ни о чем и вместо этого похоронен в нижнем углу, перед закрывающим тегом тела.

Скрипт диалога пользовательского интерфейса помещается в очередь правильно w/wp_enqueue_script как его показывает в исходном коде, как и jquery (из google API) и ядро ​​пользовательского интерфейса.

jQuery(document).ready(function($) { 
    $("#dialog").dialog(); 
}); //end onload stuff 

Тогда у меня есть это в моей странице вариантов:

<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> 

Answer 1

Вы должны быть все готовы идти. WP уже имеет диалог и стили для него.

Вот шаги, чтобы использовать его:

1. Написать JQuery для создания диалогового окна - вы должны использовать dialogClass из wp-dialog
2. Ставить выше файл на init с использованием правильных зависимостей (jquery-ui-dialog)
3. Ставить правильные WP стили (wp-jquery-ui-dialog)

Например:

// custom.js 
jQuery(function($) { 
    var $info = $("#modal-content"); 
    $info.dialog({     
     'dialogClass' : 'wp-dialog',   
     'modal'   : true, 
     'autoOpen'  : false, 
     'closeOnEscape' : true,  
     'buttons'  : { 
      "Close": function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#open-modal").click(function(event) { 
     event.preventDefault(); 
     $info.dialog('open'); 
    }); 
});  

В вашем PHP

add_action('admin_enqueue_scripts', 'queue_my_admin_scripts'); 

function queue_my_admin_scripts() { 
    wp_enqueue_script ( 'my-spiffy-miodal' ,  // handle 
         URL_TO_THE_JS_FILE ,  // source 
         array('jquery-ui-dialog')); // dependencies 
    // A style available in WP    
    wp_enqueue_style ( 'wp-jquery-ui-dialog'); 
} 

Answer 2

Я не знаю, если это делает никакой разницы (потому что я не нахожусь в нужном месте, чтобы делать какие-либо испытания на данный момент), но, возможно, попробовать код в точности так, как это есть на сайте JQuery UI:

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

удачи!^^

Answer 3

Я сведущий, чтобы показать диалоговое окно, используя следующий код. (Но стиль не был применен!):

add_action('init', 'myplugin_load'); 

function myplugin_load(){ 
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('jquery-ui-core'); 
    wp_enqueue_script('jquery-ui-dialog'); 
} 

При вызове он используется:

$("#dialog-view").dialog({ 
    height: 240, 
    modal: true 
});