wordpress 管理员中的 Jquery UI 对话框

Question

我正在尝试在我的 Wordpress 主题管理页面中使用 jQuery UI 对话框脚本。一切都直接来自 UI 演示，但我最终得到了一个对话框，其中对话框没有弹出任何内容，而是埋在底角，就在结束 body 标记之前。

UI 对话框脚本与 wp_enqueue_script 正确排队，因为它显示在源代码中，jquery（来自 google API）和 UI 核心也是如此。

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 - 必须使用 wp-dialog 的 dialogClass
2. 使用适当的依赖项 (jquery-ui-dialog) 将上述文件排入 init 队列
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

我设法使用以下代码显示对话框（但未应用样式！）：

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
});

Answer 3

我不知道它是否有任何区别（因为我目前不在正确的地方进行任何测试），但也许可以完全按照 jQuery UI 网站上的代码尝试：

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

祝你好运！ ^.^