Jquery UI not working

时间:2011-07-10 作者:Niraj Chauhan

我正在尝试整合Jquery UI select menu (“下拉”风格),在我的wordpress网站上。

但我无法做到这一点,在widget区域中,我创建了一个选择框,并给它相应的css和jquery ID,但它并没有被jquery加载。

这是我的代码,我正在使用它来实现:-

头部:-

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />
    <link rel="Stylesheet" href="<?php echo get_template_directory_uri(); ?>/ui.selectmenu.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ui.selectmenu.js"></script>
    <style type="text/css">
        /*demo styles*/
        select,.ui-select-menu { float: left; margin-right: 10px; font-size: 62.5%;}
        select, .ui-selectmenu { width: 200px; font-size: 62.5%; margin:10px;}
        #cat{font-size: 62.5%;}

    </style>
    <script type="text/javascript">
        JQuery(function(){
            JQuery(\'select#cat\').selectmenu({style:\'dropdown\'}); 
        });
    </script>
    <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
选择菜单以常规css显示,但jquery不起作用,

我不擅长Jquery,所以任何人都可以帮我,我使用的是2011主题,你可以查看我网站上的selet菜单http://webstutorial.com/

已编辑:

<script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery(\'select#cat\').selectmenu({style:\'dropdown\'});
}); </script>

2 个回复
最合适的回答,由SO网友:t31os 整理而成

这在本地测试中对我有效。。

add_action(\'wp_enqueue_scripts\',\'enq_menu_scripts_and_styles\');

function enq_menu_scripts_and_styles() {
    // UI Core, loads jQuery as a dependancy
    wp_enqueue_script( 
       \'uicore\', 
       \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js\', 
        array(\'jquery\') 
    );

    // UI Theme CSS
    wp_enqueue_style( \'uicss\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css\' );

    // Selectmenu JS
    wp_enqueue_script( \'uisel\', \'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.js\' );

    // Selectmenu CSS
    wp_enqueue_style( \'uicss2\', \'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.css\' );

}

add_action(\'wp_head\',\'select_menu_test_code\');

// Simple test code 
function select_menu_test_code() {
    // Simple no-conflict function
    ?>
    <script type="text/javascript">
    jQuery(function($){
        // You can use $ here
        $(\'select#cat\').selectmenu();
    });
    </script>
    <?php
}
当我尝试使用WordPress的ui核心时,这对我来说是行不通的,不过jQuery似乎还可以。我在测试代码中使用了相同版本的UI,所以WordPress中包含的那个版本对我不起作用,这很奇怪(我确实有一个使用UI核心的插件处于活动状态,但禁用它似乎没有任何帮助)。

查看我的上述代码是否适用于您,如果适用,请根据需要进行调整:)

SO网友:Javier Villanueva

尝试使用jQuery 而不是JQuery

结束

相关推荐

如何在WordPress上正确包含jQuery-UI效果

我一直试图在我的wordpress主题中包含jquery ui效果(更具体地说是抖动效果)。到目前为止,我只能包含jQuery脚本,但我真的不知道在哪里放置ui脚本以及如何将它们排队。这是我的密码。这显然行不通: <?php wp_enqueue_script(\"jquery\"); ?> <?php wp_enqueue_script(\"jquery-ui-core\"); ?> <?php wp_head(); ?> <lin