Programy obsługi zdarzeń dla list rozwijanych Twitter Bootstrap?

Chciałbym użyć przycisku rozwijanego 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 -->

Gdy użytkownik zmienia wartość przycisku na „Inna akcja”, zamiast po prostu przechodzić do #, tak naprawdę chciałbym obsłużyć tę akcję w niestandardowy sposób.

Ale nie widzę żadnych programów obsługi zdarzeń we wtyczce rozwijanej, aby to zrobić.

Czy rzeczywiście można używać przycisków rozwijanych Bootstrap do obsługi działań użytkownika? Zaczynam się zastanawiać, czy są przeznaczone tylko do nawigacji - to mylące, że przykład podaje listę działań.

Bootstrap Twittera ma na celu zapewnienie podstawowej funkcjonalności i zapewnia tylko podstawowe wtyczki javascript, które robią coś na ekranie . Wszelkie dodatkowe treści lub funkcje będziesz musiał zrobić sam.

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

a potem z jQuery

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

Spróbuj tego:

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

W Bootstrap 3 „dropdown.js” dostarcza nam różnych wyzwalanych zdarzeń.

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

itp

Oto działający przykład, w jaki sposób można zaimplementować niestandardowe funkcje dla swoich kotwic.

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

Możesz dołączyć identyfikator do swojej kotwicy:

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

Następnie użyj detektora zdarzeń kliknięcia jQuery, aby nasłuchiwać akcji kliknięcia i uruchomić funkcję:

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

Patrzyłem na to. Podczas wypełniania rozwijanych kotwic dałem im atrybuty klasy i danych, więc gdy trzeba wykonać akcję, możesz wykonać:

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

a potem w jQuery robiąc coś takiego:

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

Jeśli więc masz dynamicznie generowane elementy listy w swoim menu i potrzebujesz danych, które nie są tylko wartością tekstową elementu, możesz użyć atrybutów danych podczas tworzenia elementu listy rozwijanej, a następnie nadać każdemu elementowi z klasą zdarzenie, zamiast odwoływać się do identyfikatorów każdego elementu i generować zdarzenie kliknięcia.

Każdy, kto szuka integracji Knockout JS.

Biorąc pod uwagę następujący kod HTML (przycisk rozwijany 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>

Użyj następującego JS:

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

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

Dla tych, którzy chcą wygenerować opcje rozwijane w oparciu o tablicę obserwowalną typu knockout, kod wyglądałby mniej więcej tak:

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

Należy zauważyć, że obserwowalny element tablicy jest niejawnie przekazywany do programu obsługi funkcji kliknięcia w celu użycia w kodzie modelu widoku.

Bez konieczności zmiany grupy przycisków w ogóle możesz wykonać następujące czynności. Poniżej zakładam, że Twoje menu buttonma wartość idof 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>

Teraz, jeśli ustawisz sam .btn-groupten element na idof fldCategory, to w rzeczywistości jest to bardziej wydajne jQuery i działa trochę szybciej:

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