Maintenant que jQueryUI 1.8 est sorti, j'ai parcouru les mises à jour et suis tombé sur le nouveau Button widget, et en particulier l'une des démos avec le SplitButton with a dropdown. Cette démo semble suggérer que le widget Button pourrait être utilisé pour créer un menu déroulant ici. En guise de discussion, je me demandais comment créer un menu déroulant avec ce nouveau widget Button.Créer un jQueryUI 1.8 Menu du bouton
Cheers.
Il est peut-être Il vaut la peine de noter que j'ai décidé d'utiliser Bootstrap button dropdowns.
Vous devez supprimer une liste sous le bouton, comme dans le cas de la démo fournie ici pour la saisie semi-automatique: http://jqueryui.com/demos/autocomplete/. Fondamentalement, vous remplacer le code dans le button demo qui affiche l'alerte "pourrait afficher un menu avec une action sélectionnée" avec du code qui fait exactement cela. Ce code peut déclencher l'un des nombreux plugins de menu jQuery là-bas, like this one.
<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();
});
Vous pouvez aussi lui dire pour créer le menu en utilisant les événements de bouton intégré:
//...
<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>
Je suis tombé sur ce post. Et je vous remercie d'avoir posté ce lien! Sensationnel!!! Bootstrap rochers! – skel625
Le lien ci-dessus montre une ancienne version de Bootstrap. L'URL mise à jour est http://getbootstrap.com/. – wolfstevent