Trình xử lý sự kiện cho trình đơn thả xuống Twitter Bootstrap?

Tôi muốn sử dụng nút thả xuống 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 -->

Khi người dùng thay đổi giá trị của nút thành 'Một hành động khác', thay vì chỉ điều hướng đến #, tôi thực sự muốn xử lý hành động theo cách tùy chỉnh.

Nhưng tôi không thể thấy bất kỳ trình xử lý sự kiện nào trong plugin thả xuống để thực hiện việc này.

Có thực sự có thể sử dụng các nút thả xuống của Bootstrap để xử lý các hành động của người dùng không? Tôi bắt đầu tự hỏi liệu chúng có chỉ nhằm mục đích điều hướng hay không - thật khó hiểu khi ví dụ đưa ra danh sách các hành động.

Twitter bootstrap có nghĩa là cung cấp một chức năng cơ bản và chỉ cung cấp các plugin javascript cơ bản để thực hiện điều gì đó trên màn hình . Bất kỳ nội dung hoặc chức năng bổ sung nào, bạn sẽ phải tự thực hiện.

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

và sau đó với jQuery

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

Thử đi:

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

Trong Bootstrap 3 'dropdown.js' cung cấp cho chúng ta các sự kiện khác nhau được kích hoạt.

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

Vân vân

Đây là một ví dụ hoạt động về cách bạn có thể triển khai các chức năng tùy chỉnh cho các neo của mình.

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

Bạn có thể đính kèm một id vào mỏ neo của mình:

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

Và sau đó sử dụng trình nghe sự kiện nhấp chuột của jQuery để lắng nghe hành động nhấp chuột và kích hoạt chức năng của bạn:

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

Tôi đã nhìn vào cái này. Khi điền các neo thả xuống, tôi đã cung cấp cho chúng một thuộc tính lớp và dữ liệu, vì vậy khi cần thực hiện một hành động, bạn có thể thực hiện:

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

và sau đó trong jQuery làm một cái gì đó như:

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

Vì vậy, nếu bạn đã tạo động các mục danh sách trong danh sách thả xuống và cần sử dụng dữ liệu không chỉ là giá trị văn bản của mục, bạn có thể sử dụng các thuộc tính dữ liệu khi tạo listitem thả xuống và sau đó chỉ cần cung cấp cho mỗi mục với lớp là sự kiện, thay vì đề cập đến id của từng mục và tạo sự kiện nhấp chuột.

Bất kỳ ai ở đây đang tìm kiếm tích hợp Knockout JS.

Cho HTML sau (nút thả xuống Standard 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>

Sử dụng JS sau:

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

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

Đối với những người muốn tạo các tùy chọn thả xuống dựa trên mảng có thể quan sát được, mã sẽ giống như sau:

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

Lưu ý rằng mục mảng có thể quan sát được hoàn toàn được chuyển vào trình xử lý hàm nhấp để sử dụng trong mã mô hình chế độ xem.

Không cần phải thay đổi nhóm nút của bạn, bạn có thể làm như sau. Dưới đây, tôi giả định thả xuống bạn buttoncó idcủa 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>

Bây giờ, nếu bạn đặt .btn-groupchính mục này có giá idtrị của fldCategory, thì đó thực sự là jQuery hiệu quả hơn và chạy nhanh hơn một chút:

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