ट्विटर बूटस्ट्रैप ड्रॉपडाउन के लिए इवेंट हैंडलर?

Question

मैं ट्विटर बूटस्ट्रैप ड्रॉपडाउन बटन का उपयोग करना चाहूंगा :

    <div class="btn-group">
      <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
      </ul>
    </div><!-- /btn-group -->

जब उपयोगकर्ता बटन के मूल्य को 'एक और कार्रवाई' में बदलता है, तो केवल नेविगेट करने के बजाय #, मैं वास्तव में एक कस्टम तरीके से कार्रवाई को संभालना चाहूंगा।

लेकिन मैं ऐसा करने के लिए ड्रॉपडाउन प्लगइन में किसी भी घटना संचालकों को नहीं देख सकता ।

क्या वास्तव में उपयोगकर्ता कार्यों को संभालने के लिए बूटस्ट्रैप ड्रॉपडाउन बटन का उपयोग करना संभव है? मुझे आश्चर्य है कि अगर वे केवल नेविगेशन के लिए इरादा कर रहे हैं - यह भ्रामक है कि उदाहरण कार्यों की एक सूची देता है।

Comments

एंकर टैग कार्य के चालू होने पर एक फ़ंक्शन नहीं होगा?

— कैमरन चैपमैन

इनमें से कोई भी बटन ऐसा नहीं है जो एंकर हैं। आप bootstrap.js फ़ाइल का निरीक्षण करके ईवेंट हैंडलर्स पर एक नज़र डाल सकते हैं। लेकिन जहां तक ​​मुझे पता है कि इन सभी कार्यों को jQuery के साथ संसाधित किया जाता है, इसलिए इसे इस कार्यक्षमता को संपादित या ओवरराइड करना एक बड़ा सौदा नहीं होना चाहिए।

— मास-डिजाइन्स

Answer 1

ट्विटर बूटस्ट्रैप एक बेसलाइन कार्यक्षमता देने के लिए है, और केवल बुनियादी जावास्क्रिप्ट प्लगइन्स प्रदान करता है जो स्क्रीन पर कुछ करते हैं । कोई भी अतिरिक्त सामग्री या कार्यक्षमता, आपको स्वयं करनी होगी।

<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#" id="action-1">Action</a></li>
    <li><a href="#" id="action-2">Another action</a></li>
    <li><a href="#" id="action-3">Something else here</a></li>
  </ul>
</div><!-- /btn-group -->

और फिर jQuery के साथ

jQuery("#action-1").click(function(e){
//do something
e.preventDefault();
});

Comments

हालांकि, कोशिश की गई कि कोई घटना न घटे। मैं एक बटन पर क्लिक करने की घटना को पकड़ सकता हूं। रास्ते में और क्या हो सकता है?

— रिंच

@RonnieKilsbo यकीन नहीं होता। यह समाधान बताए अनुसार काम करता है, और मैंने इसे अनगिनत बार इस्तेमाल किया है। हो सकता है कि आप अपनी एंकर की आईडी को सही तरीके से सेट नहीं कर रहे हों, या आप तत्वों के अस्तित्व में आने से पहले बाध्यकारी हो सकते हैं - मैं इस मामले में jQuery के प्रयोग की अत्यधिक अनुशंसा करता हूं ।

— थॉमस

आप सही हैं, मेरा बुरा। डोम में मैंने jQuery के साथ क्लिकबाइल्स बाँधने के बाद डोम में तत्व डाले थे, जो एक बुरी बात है। :) काम कर रहा है, पुष्टि की।

— रिंच

Answer 2

इसे इस्तेमाल करे:

$('div.btn-group ul.dropdown-menu li a').click(function (e) {
    var $div = $(this).parent().parent().parent(); 
    var $btn = $div.find('button');
    $btn.html($(this).text() + ' <span class="caret"></span>');
    $div.removeClass('open');
    e.preventDefault();
    return false;
});

Answer 3

बूटस्ट्रैप 3 में 'dropdown.js' हमें विभिन्न घटनाओं के साथ प्रदान करता है जो ट्रिगर होती हैं।

click.bs.dropdown
show.bs.dropdown
shown.bs.dropdown

आदि

Comments

यह सच है, लेकिन आप अभी भी इवेंट हैंडलर संलग्न करने के लिए बूटस्ट्रैप ढांचे के भीतर काम नहीं करते हैं। आप अपने दम पर ऐसा करते हैं। बूटस्ट्रैप हमेशा स्क्रीन पर चीजें करने के बारे में रहा है, कस्टम कार्यक्षमता प्रदान नहीं करता है। यह माना जाता है कि देव अपने स्वयं के ड्रॉपडाउन घटनाओं को हुक करने में सक्षम होंगे।

— थॉमस जोन्स

Answer 4

यहाँ एक उदाहरण है कि आप अपने एंकरों के लिए कस्टम कार्यों को कैसे लागू कर सकते हैं।

http://jsfiddle.net/CH2NZ/43/

आप अपने एंकर को एक आईडी संलग्न कर सकते हैं:

<li><a id="alertMe" href="#">Action</a></li>

और फिर jQuery के क्लिक ईवेंट श्रोता का उपयोग करें क्लिक एक्शन और फायर फंक्शन के लिए सुनने के लिए:

$('#alertMe').click(function(e) {
    alert('alerted');
    e.preventDefault();// prevent the default anchor functionality
});

Comments

उपरोक्त उदाहरण अब jsfiddle पर मौजूद नहीं है।

— ईथर E

मैंने एक वैध लिंक के साथ एक नया उदाहरण जोड़ा। धन्यवाद @ सूची।

— कैमरन चैपमैन

Answer 5

मैं इसे देख रहा हूं। ड्रॉप डाउन एंकर को आबाद करने पर, मैंने उन्हें एक वर्ग और डेटा विशेषताएँ दी हैं, इसलिए जब आपको कोई कार्य करने की आवश्यकता हो तो आप कर सकते हैं:

<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li>

और फिर jQuery में कुछ ऐसा कर रहे हैं:

$('.dropDownListItem').click(function(e) {
    var name = e.currentTarget;
    console.log(name.getAttribute("data-name"));
});

इसलिए यदि आपके पास ड्रॉपडाउन में गतिशील रूप से सूची आइटम हैं और डेटा का उपयोग करने की आवश्यकता है जो आइटम का केवल पाठ मान नहीं है, तो आप ड्रॉपडाउन सूची बनाते समय डेटा विशेषताओं का उपयोग कर सकते हैं और फिर कक्षा के साथ प्रत्येक आइटम दे सकते हैं ईवेंट, प्रत्येक आइटम की आईडी का संदर्भ देने और एक क्लिक ईवेंट जनरेट करने के बजाय।

Answer 6

यहाँ कोई भी नॉकआउट जेएस एकीकरण की तलाश में है।

निम्नलिखित HTML (मानक बूटस्ट्रैप ड्रॉपडाउन बटन) को देखते हुए:

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select an item               
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 1</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 2</a>
        </li>
        <li>
            <a href="javascript:;" data-bind="click: clickTest">Click 3</a>
        </li>
    </ul>
</div>

निम्नलिखित JS का उपयोग करें:

var viewModel = function(){
    var self = this;

    self.clickTest = function(){
        alert("I've been clicked!");
    }  
};

नॉकआउट ऑब्जर्वेबल ऐरे के आधार पर ड्रॉपडाउन विकल्प उत्पन्न करने की चाह रखने वालों के लिए, कोड कुछ इस तरह दिखाई देगा:

var viewModel = function(){
    var self = this;

    self.dropdownOptions = ko.observableArray([
        { id: 1, label: "Click 1" },
        { id: 2, label: "Click 2" },
        { id: 3, label: "Click 3" }
    ])

    self.clickTest = function(item){
        alert("Item with id:" + item.id + " was clicked!");
    }  
};

<!-- REST OF DD CODE -->
<ul class="dropdown-menu" role="menu">
    <!-- ko foreach: { data: dropdownOptions, as: 'option' } -->
    <li>
        <a href="javascript:;" data-bind="click: $parent.clickTest, text: option.clickTest"></a>
    </li>
    <!-- /ko -->
</ul>
<!-- REST OF DD CODE -->

ध्यान दें, कि दृश्यमान मॉडल कोड में उपयोग के लिए अवलोकन फ़ंक्शन आइटम को स्पष्ट रूप से क्लिक फ़ंक्शन हैंडलर में पारित किया गया है।

Answer 7

अपने बटन समूह को बिल्कुल भी बदलने के बिना, आप निम्न कार्य कर सकते हैं। नीचे, मुझे लगता है कि आपके ड्रॉपडाउन buttonका एक idहै fldCategory।

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory').parent().find('UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

अब, अगर आप सेट .btn-groupइस मद में ही की है करने के लिए idकी fldCategoryहै कि वास्तव में और अधिक कुशल jQuery और एक छोटे से तेज़ चलता है,:

<script type="text/javascript">

$(document).ready(function(){

  $('#fldCategory UL LI A').click(function (e) {
    var sVal = e.currentTarget.text;
    $('#fldCategory BUTTON').html(sVal + ' <span class="caret"></span>');
    console.log(sVal);
  });

});

</script>

Comments

हा! धन्यवाद है कि चालाक है! :) मैंने आपका दूसरा उदाहरण इस्तेमाल किया।

— drzounds 5

इसका उत्तर होना चाहिए था!

— जेक