Теперь, когда jQueryUI 1.8 отсутствует, я просматривал обновления и наткнулся на новый виджет кнопки и, в частности, одну из демонстраций с SplitButton с выпадающим списком. Эта демонстрация, похоже, предполагает, что виджет Button можно использовать для создания выпадающего меню здесь.
В связи с обсуждением мне было интересно, каким образом можно создать раскрывающееся меню с помощью этого нового виджета Button.
Приветствия.
Возможно, стоит отметить, что я решил использовать раскрывающийся список кнопки Bootstrap.
Вам нужно будет отбросить список под кнопкой, аналогично демонстрационной версии, предоставленной здесь для автозаполнения: http://jqueryui.com/demos/autocomplete/.
По сути, вы заменили бы код в демонстрационной кнопке, которая отображает предупреждение "может отображать меню с выбранным действием" с кодом это делает именно это. Этот код может отключить одно из многих плагинов меню jQuery, как этот.
<div class="demo">
<div>
<button id="rerun">Run last action</button>
<button id="select">Select an action</button>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#rerun").button().click(function() {
alert("Running the last action");
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
// Code to display menu goes here. <<<<<<<<<<<<
})
.parent()
.buttonset();
});
Вы также можете сообщить об этом, чтобы создать меню с помощью встроенных событий кнопки:
//...
<script type="text/javascript">
$(document).ready(function(){
$("#yourButtonsID").click(function(){
$("#yourDropDown").show();
});
});
</script>
</head>
<body>
<button id="leftButtonSection">Do Something</button>
<button id="yourButtonsID">Open Menu</button>
<div id="yourDropDown">
<ul>
<li>Option One</li>
<li>Option Two</li>
</ul>
</div>
</body>