JQuery UI选项卡在插件页面中不起作用

时间:2017-05-16 作者:Istiaque Ahmed

我试图通过函数在插件页面中显示jquery ui选项卡billing_settings_page. 由于jQuery和jQuery UI是自动加载的,所以我认为不需要包含它们。但有点google告诉我也要包括jQuery UI选项卡。我的代码如下。我甚至没有在浏览器中找到ay控制台错误。但是,代码不显示任何jQuery UI选项卡。

<?php

             add_action(\'admin_enqueue_scripts\',\'nibiz_billing_init\');

             function nibiz_billing_init() {
                wp_enqueue_script( \'jquery-ui-tabs\' );
                wp_enqueue_script( \'nibiz\', plugins_url( \'/js/customer.js\', __FILE__ ));
            }


            add_action(\'admin_menu\', \'billing_settings_menu\');

            function billing_settings_menu() {

                    add_menu_page( \'Billing Settings\', \'Billing Link\',
                    \'manage_options\',  __FILE__, \'billing_settings_page\',
                    screen_icon(\'edit\'));

                    add_submenu_page( __FILE__, \'About My Plugin\', 
                        \'About\', \'manage_options\',\'nibiz_about\', 
                        \'billing_settings_page_about\' )    ;


                    }



            function billing_settings_page() {
                ?>

                <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">First</a></li>
                    <li><a href="#tabs-2">Second</a></li>
                    <li><a href="#tabs-3">Third</a></li>
                </ul>
                <div id="tabs-1">Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua. Ut enim 
        ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquip ex ea commodo consequat.</div>
                <div id="tabs-2">Phasellus mattis tincidunt 
        nibh. Cras orci urna, blandit id, pretium vel, aliquet 
        ornare, felis. Maecenas scelerisque sem non nisl. 
        Fusce sed lorem in enim dictum bibendum.</div>
                <div id="tabs-3">Nam dui erat, auctor a, 
        dignissim quis, sollicitudin eu, felis. Pellentesque 
        nisi urna, interdum eget, sagittis et, consequat 
        vestibulum, lacus. Mauris porttitor ullamcorper 
        augue.</div>
            </div>



                <?php
                }
            ?>
Thecustom.js 文件具有以下代码:

//jquery-ui-tabs
jQuery(document).ready(function($) {
jQuery(\'#tabs\').tabs();
});
我该怎么做才能让这个标签生效?

1 个回复
SO网友:CodeMascot

首先,通过访问Chrome开发者工具,检查所有JS文件是否正确加载。还要检查是否有其他脚本导致任何错误。您可以通过Chrome开发工具来检查这一点。

Some Improvements:

添加jquery-ui-tabs 作为的依赖项nibiz 脚本,我建议重写custom.js JavaScript 密码因此,您的整个代码如下所示-

add_action(\'admin_enqueue_scripts\',\'nibiz_billing_init\');

function nibiz_billing_init() {
    // Don\'t need to wp_enqueue_script( \'jquery-ui-tabs\' ) since you\'re in the admin panel.
    // wp_enqueue_script( \'jquery-ui-tabs\' );
    // Add \'jquery-ui-tabs\' as dependency.
    wp_enqueue_script( \'nibiz\', plugins_url( \'/js/customer.js\', __FILE__ ), array(\'jquery-ui-tabs\'));
}


add_action(\'admin_menu\', \'billing_settings_menu\');

function billing_settings_menu() {

    add_menu_page( \'Billing Settings\', \'Billing Link\',
                   \'manage_options\',  __FILE__, \'billing_settings_page\',
                   screen_icon(\'edit\'));

    add_submenu_page( __FILE__, \'About My Plugin\',
                      \'About\', \'manage_options\',\'nibiz_about\',
                      \'billing_settings_page_about\' );
}

function billing_settings_page() {
    ?>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">First</a></li>
            <li><a href="#tabs-2">Second</a></li>
            <li><a href="#tabs-3">Third</a></li>
        </ul>
        <div id="tabs-1">Lorem ipsum dolor sit amet,
            consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2">Phasellus mattis tincidunt
            nibh. Cras orci urna, blandit id, pretium vel, aliquet
            ornare, felis. Maecenas scelerisque sem non nisl.
            Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3">Nam dui erat, auctor a,
            dignissim quis, sollicitudin eu, felis. Pellentesque
            nisi urna, interdum eget, sagittis et, consequat
            vestibulum, lacus. Mauris porttitor ullamcorper
            augue.</div>
    </div>



    <?php
}
?>
以及custom.js 代码将为-

//jquery-ui-tabs
(function($) {
    // After the document is ready
    $(function(){
        $(\'#tabs\').tabs();
    });
})(jQuery);
希望这有帮助。

结束