在Wordpress中使用jQuery UI对话框

Posted 2021-03-31

我知道至少还有另外一篇关于SO的帖子处理这个问题，但答案从未完全确定。

我正在head.php文档中的WP子主题中工作。我已将此添加到头部：

<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' );   
?>

我在体内添加了这个：

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

但没有骰子。我的div显示为标准div。

有什么想法吗？我知道应该使用enqueue调用顶级样式表，但这不应该阻止它工作。

答案

WordPress jQuery is called in no-conflict mode:

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

jQuery UI也在jQuery之前加载。您收到2个javascript错误：

未捕获的ReferenceError：未定义jQuery

103 Uncaught TypeError：对象[object DOMWindow]的属性'$'不是函数

第一个错误来自jQuery之前的jQuery UI加载，第二个错误是因为在无冲突模式下无法识别$。

删除任何内联<script src=标记和标题php中对custom.css的调用，并将此函数添加到您的子主题functions.php文件以加载脚本。 WordPress将为您准备合适的订单。

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

另一答案

我正在WP管理员上构建一个自定义插件，以在自定义mysql表上插入数据。在将近一周的时间里，我试图在Wordpress表上为删除项事件做一个确认对话框。在我几乎失去了所有寻找答案的头发之后，这似乎太好了，很简单。但工作。遵循代码。

编辑：事实证明，wp标准jquery无法正常工作，并且包含在另一个类中的Google托管的jQuery正在为JS做出正确的调用。当我删除下面添加的注销/注册时，所有其他对话框调用都停止工作。我不知道为什么会发生这种情况，或者这个特定WP发行版中包含的jQuery版本，但是当我回到原来的注册时，使用如下所示的Google托管脚本，一切都恢复正常。

在PHP上（首先，注册并调用脚本）：

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

接下来，如果你在像我这样的click事件上打开对话框，请确保在jQuery上总是使用class而不是id来识别按钮或链接。

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

我们还需要使用包含对话框文本的标记。我需要设置样式来隐藏div。

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

最后，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");
    });
});

编辑：标准的wp对话框样式的调用毕竟不起作用。 “胡椒研磨机”样式使对话框在窗口中央正确显示。我知道对话框的外观并不是很容易，但我需要确认对话框，这对我来说效果很好。

另一答案

当您尝试对其进行操作时，会创建对话框div。相反，你应该使用：

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