Создайте меню кнопок jQueryUI 1.8

Теперь, когда jQueryUI 1.8 отсутствует, я просматривал обновления и наткнулся на новый виджет кнопки и, в частности, одну из демонстраций с SplitButton с выпадающим списком. Эта демонстрация, похоже, предполагает, что виджет Button можно использовать для создания выпадающего меню здесь.

В связи с обсуждением мне было интересно, каким образом можно создать раскрывающееся меню с помощью этого нового виджета Button.

Приветствия.

Ответы

Ответ 2

Вам нужно будет отбросить список под кнопкой, аналогично демонстрационной версии, предоставленной здесь для автозаполнения: 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();
});

Ответ 3

Вы также можете сообщить об этом, чтобы создать меню с помощью встроенных событий кнопки:

//...
<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>