Создать меню кнопок jQueryUI 1.8 - PullRequest
Новая
       37

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

13 голосов
/ 15 апреля 2010

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

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

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

Ответы [ 3 ]

2 голосов
/ 17 мая 2010

Вы также можете указать ему создать меню, используя встроенные кнопки событий: 

//...
<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>
2 голосов
/ 15 апреля 2010

Вам нужно было бы опустить список под кнопкой, аналогично демонстрации, приведенной здесь для автозаполнения: http://jqueryui.com/demos/autocomplete/.

По сути, вы бы заменили код в демонстрационной кнопке , который отображает предупреждение "может отображаться меню с выбранным действием", кодом, который делает именно это. Этот код может запустить один из множества плагинов jQuery Menu, , как этот. 

<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();
});
1 голос
/ 13 июля 2012

Стоит отметить, что я решил использовать Раскрывающиеся кнопки Bootstrap .

...