2010-04-14 17 views
13

बनाएं अब जब कि jQueryUI 1.8 बाहर है, मैं अद्यतन के माध्यम से ब्राउज़िंग गया था और नए Button widget भर में आया, और SplitButton with a dropdown साथ क़ौम की विशेष रूप से एक में। यह डेमो यह सुझाव देता है कि बटन विजेट का उपयोग यहां एक ड्रॉपडाउन मेनू बनाने के लिए किया जा सकता है।एक jQueryUI 1.8 बटन मेनू

चर्चा के मामले में, मैं सोच रहा था कि इस नए बटन विजेट के साथ ड्रॉपडाउन मेनू बनाने के तरीके क्या हैं।

चीयर्स।

उत्तर

1

यह हो सकता है ध्यान देने योग्य है कि मैंने Bootstrap button dropdowns का उपयोग करने का निर्णय लिया है।

+1

मैंने इस पोस्ट पर ठोकर खाई। और मैं इस लिंक को पोस्ट करने के लिए धन्यवाद! वाह!!! बूटस्ट्रैप चट्टानों! – skel625

+1

उपरोक्त लिंक बूटस्ट्रैप का पुराना संस्करण दिखा रहा है। अद्यतन यूआरएल http://getbootstrap.com/ है। – wolfstevent

2

आपको स्वत: पूर्ण: 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(); 
}); 
2

तुम भी का उपयोग कर निर्मित बटन घटनाओं मेनू बनाने के लिए इसका बता सकते हैं:

//... 
<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> 
संबंधित मुद्दे