ตัวจัดการเหตุการณ์สำหรับรายการแบบเลื่อนลงของ Twitter Bootstrap?

ฉันต้องการใช้ปุ่มแบบเลื่อนลง Twitter Bootstrap :

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

เมื่อผู้ใช้เปลี่ยนค่าของปุ่มเป็น "การกระทำอื่น" แทนที่จะเพียงแค่นำทางไปยัง#ฉันต้องการจัดการการกระทำด้วยวิธีที่กำหนดเอง

แต่ฉันไม่เห็นตัวจัดการเหตุการณ์ใด ๆในปลั๊กอินแบบเลื่อนลงเพื่อทำสิ่งนี้

เป็นไปได้หรือไม่ที่จะใช้ปุ่มแบบเลื่อนลง Bootstrap เพื่อจัดการการกระทำของผู้ใช้ ฉันเริ่มสงสัยว่ามันมีไว้สำหรับการนำทางเท่านั้น - มันสับสนที่ตัวอย่างให้รายการการกระทำ

ทวิตเตอร์บูตจะหมายถึงการให้การทำงานพื้นฐานและให้เพียงปลั๊กอินจาวาสคริปต์พื้นฐานที่ทำอะไรบางอย่างบนหน้าจอ เนื้อหาหรือฟังก์ชันเพิ่มเติมใด ๆ คุณจะต้องทำเอง

<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();
});

ลองสิ่งนี้:

$('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;
});

ใน Bootstrap 3 'dropdown.js' ให้เรามีเหตุการณ์ต่างๆที่เกิดขึ้น

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

ฯลฯ

นี่คือตัวอย่างการทำงานของวิธีที่คุณสามารถใช้ฟังก์ชันที่กำหนดเองสำหรับจุดยึดของคุณ

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

คุณสามารถแนบ ID กับจุดยึดของคุณ:

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

จากนั้นใช้ตัวฟังเหตุการณ์คลิกของ jQuery เพื่อฟังการดำเนินการคลิกและเริ่มการทำงานของคุณ:

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

ฉันได้ดูสิ่งนี้ ในการเติมจุดยึดแบบเลื่อนลงฉันได้ให้คลาสและแอตทริบิวต์ข้อมูลแก่พวกเขาดังนั้นเมื่อจำเป็นต้องดำเนินการคุณสามารถทำได้:

<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"));
});

ดังนั้นหากคุณมีรายการที่สร้างขึ้นแบบไดนามิกในรายการแบบเลื่อนลงของคุณและจำเป็นต้องใช้ข้อมูลที่ไม่ใช่แค่ค่าข้อความของรายการคุณสามารถใช้แอตทริบิวต์ข้อมูลเมื่อสร้างรายการแบบหล่นลงจากนั้นให้แต่ละรายการกับชั้นเรียน เหตุการณ์แทนที่จะอ้างถึงรหัสของแต่ละรายการและสร้างเหตุการณ์การคลิก

ทุกคนที่นี่กำลังมองหาการรวม Knockout JS

ระบุ HTML ต่อไปนี้ (ปุ่มแบบเลื่อนลง Bootstrap มาตรฐาน):

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

โปรดทราบว่ารายการอาร์เรย์ที่สังเกตได้จะถูกส่งโดยปริยายไปยังตัวจัดการฟังก์ชันการคลิกเพื่อใช้ในโค้ดโมเดลมุมมอง

โดยไม่ต้องเปลี่ยนกลุ่มปุ่มของคุณเลยคุณสามารถทำสิ่งต่อไปนี้ได้ ด้านล่างนี้ผมถือว่าเลื่อนลงของคุณbuttonมีของidfldCategory

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