我正在尝试整合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>
最合适的回答,由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核心的插件处于活动状态,但禁用它似乎没有任何帮助)。
查看我的上述代码是否适用于您,如果适用,请根据需要进行调整:)