Gestori di eventi per i menu a discesa Bootstrap di Twitter?

Vorrei utilizzare un pulsante a discesa Bootstrap di Twitter :

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

Quando l'utente modifica il valore del pulsante in "Un'altra azione", invece di spostarsi semplicemente verso #, in realtà mi piacerebbe gestire l'azione in modo personalizzato.

Ma non riesco a vedere alcun gestore di eventi nel plug-in a discesa per eseguire questa operazione.

È effettivamente possibile utilizzare i pulsanti a discesa Bootstrap per gestire le azioni dell'utente? Comincio a chiedermi se sono destinati solo alla navigazione: è confuso che l'esempio fornisca un elenco di azioni.

Il bootstrap di Twitter ha lo scopo di fornire una funzionalità di base e fornisce solo plugin javascript di base che fanno qualcosa sullo schermo . Qualsiasi contenuto o funzionalità aggiuntivi, dovrai farlo da solo.

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

e poi con jQuery

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

Prova questo:

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

In Bootstrap 3 'dropdown.js' ci fornisce i vari eventi che vengono attivati.

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

eccetera

Ecco un esempio funzionante di come potresti implementare funzioni personalizzate per le tue ancore.

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

Puoi allegare un ID alla tua ancora:

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

Quindi utilizza il listener di eventi di clic di jQuery per ascoltare l'azione del clic e attivare la funzione:

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

Ho guardato questo. Nel popolare gli ancoraggi a discesa, ho assegnato loro una classe e attributi di dati, quindi quando è necessario eseguire un'azione puoi fare:

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

e poi in jQuery facendo qualcosa come:

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

Quindi, se hai elementi di elenco generati dinamicamente nel menu a discesa e devi utilizzare i dati che non sono solo il valore di testo dell'elemento, puoi utilizzare gli attributi dei dati durante la creazione dell'elemento dell'elenco a discesa e quindi dare a ciascun elemento con la classe il evento, piuttosto che fare riferimento agli ID di ogni elemento e generare un evento clic.

Chiunque qui cerchi l'integrazione di Knockout JS.

Dato il seguente HTML (pulsante a discesa Bootstrap standard):

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

Usa il seguente JS:

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

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

Per coloro che cercano di generare opzioni a discesa basate su array osservabili knockout, il codice sarebbe simile a:

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

Si noti che l'elemento della matrice osservabile viene passato implicitamente al gestore della funzione clic per essere utilizzato nel codice del modello di visualizzazione.

Senza dover cambiare affatto il tuo gruppo di pulsanti, puoi fare quanto segue. Di seguito, presumo che il tuo menu a discesa buttonabbia un iddi 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>

Ora, se imposti il .btn-groupdi questo elemento stesso per avere il idof fldCategory, in realtà è jQuery più efficiente e viene eseguito un po 'più velocemente:

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