私のWordPressのサイトで、Jquery UIの選択メニューを統合しようとしています。ワードプレスのJquery UI
私はそれを行うことができません、ウィジェット領域では、私は選択ボックスを作成し、その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">
$(function(){
$('select#cat').selectmenu({style:'dropdown'});
});
</script>
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
CSS：
/* Selectmenu ----------------------------------*/ .ui-selectmenu { display: block; position:relative; height:2em; text-decoration: none; overflow:hidden;} .ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; } .ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; visibility: hidden; overflow: auto; } .ui-selectmenu-open { visibility: visible; } .ui-selectmenu-menu-popup { margin-top: -1px; } .ui-selectmenu-menu-dropdown { } .ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; } .ui-selectmenu-menu li a,.ui-selectmenu-status {line-height: 1.4em; display:block; padding:.3em 1em; outline:none; text-decoration:none; } .ui-selectmenu-menu li.ui-selectmenu-hasIcon a, .ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; } .ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; } .ui-selectmenu-status { line-height: 1.4em; } .ui-selectmenu-open li.ui-selectmenu-item-focus a { } .ui-selectmenu-open li.ui-selectmenu-item-selected { } .ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; } .ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; } .ui-selectmenu-menu li .ui-selectmenu-item-content { } .ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; } /*for optgroups*/ .ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; } .ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding:.6em .5em 0; font-weight: bold; } .ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
HTML：
<select id="cat"> <option>1</option> </option>
そして、あなたはここで見つけることができます： - http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.htmlこれは長すぎます。
私は "ドロップダウン"スタイルを使用しており、デフォルトのUIテーマを使用しています。
誰もがこれで私を助けることができますか？
あなたはJSとCSSはすでにここ http://webstutorial.com/