創建一個jQueryUI 1.8按鈕菜單

現在jQueryUI 1.8已經不存在了，我瀏覽了更新並且遇到了新的Button widget，特別是其中一個演示SplitButton with a dropdown。這個演示似乎暗示Button按鈕可以用來在這裏創建一個下拉菜單。創建一個jQueryUI 1.8按鈕菜單

作爲討論的問題，我想知道使用這個新的Button小部件創建下拉菜單的方式。

乾杯。

來源

2010-04-14 Brian M. Hunt

可能值得注意的是，我決定使用Bootstrap button dropdowns。

來源

2012-07-13 18:29:48

我偶然發現了這篇文章。我感謝你發佈這個鏈接！哇！！！ Bootstrap岩石！ – skel625 2012-07-22 05:25:27

上面的鏈接顯示舊版本的Bootstrap。更新的URL是http://getbootstrap.com/。 – wolfstevent 2014-04-13 16:39:07

您將不得不在按鈕下方放置一個列表，其方式與此處提供的用於自動完成的演示類似：http://jqueryui.com/demos/autocomplete/。

本質上，您將替換button demo中顯示警報的代碼「可以顯示帶有選定操作的菜單」，代碼就是這樣。此代碼可以關火很多jQuery的菜單插件，在那裏的一個，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(); 
});

來源

2010-04-14 21:09:20

你也可以告訴它使用內置的按鈕事件來創建菜單：

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

來源

2010-05-17 06:56:26 Trafalmadorian

創建一個jQueryUI 1.8按鈕菜單

回答

相關問題