Обробники подій для випадаючих меню 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 для обробки дій користувача? Я починаю гадати, чи вони призначені лише для навігації - заплутано те, що приклад дає перелік дій.

Початковий завантажувач Twitter призначений для надання базової функціональності та забезпечує лише основні плагіни javascript, які роблять щось на екрані . Будь-який додатковий вміст або функціонал вам доведеться зробити самостійно.

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

Ви можете прикріпити ідентифікатор до вашого прив’язки:

<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має 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самого цього елемента значення idof 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>