Я пытаюсь интегрировать меню выбора Jquery UI на моем WordPress сайте.
Но я не могу этого сделать, в области виджетов я создал поле выбора и присвоил ему соответствующий идентификатор этого CSSи jquery, но он не загружается с помощью 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>
И JS вы можете найти здесь: - http://jquery -ui.googlecode.com / svn / branch / labs / selectmenu / index.html в исходном представлении, так как он слишком длинный.
Я использую стиль "dropdown" и использую пользовательский интерфейс по умолчаниюtheme.
Кто-нибудь может мне помочь в этом?
Вы можете проверить живой сайт, где JS и CSS уже включены сюда http://webstutorial.com/