Controladores de eventos para listas desplegables de Twitter Bootstrap?

Question

me gustaría utilizar un Twitter Bootstrap dropdown button:

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

Cuando el usuario cambia el valor del botón de 'Otra acción', en lugar de simplemente navegando a #, estaría en realidad como para manejar la acción de una forma personalizada.

Pero no puedo ver ningún controlador de eventos in the dropdown plugin para hacer esto.

¿Es realmente posible utilizar los botones desplegables Bootstrap para manejar las acciones del usuario? Estoy empezando a preguntarme si solo están destinados a la navegación; es confuso que el ejemplo proporcione una lista de acciones.

Answer 1

Twitter de arranque está destinado a dar una funcionalidad básica, y proporciona sólo plugins javascript básicas que hacen algo en la pantalla. Cualquier contenido o funcionalidad adicional, tendrá que hacer usted mismo.

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

y luego con jQuery

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

Answer 2

Aquí es un ejemplo práctico de cómo se puede implementar funciones personalizadas para sus anclajes.

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

Puede adjuntar un id a su ancla:

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

y luego usar detector de eventos click de jQuery para escuchar la acción de clic y disparar a funcionar:

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

Answer 3

Pruebe esto:

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

Answer 4

Cualquiera que esté buscando la integración de Knockout JS.

Dado el siguiente código HTML (botón desplegable estándar 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> 

Usar la siguiente JS:

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

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

Para aquellos que buscan generar opciones desplegables basado en nocaut gama observable, el código sería mira algo como:

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

Tenga en cuenta que el elemento de matriz observable se pasa implícitamente al controlador de función de clic para utilizarlo en el código de modelo de vista.

Answer 5

En Bootstrap 3 'dropdown.js' nos proporciona los diversos eventos que se desencadenan.

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

etc

Answer 6

He estado buscando en este. En poblar el menú desplegable anclas, les he dado una clase y atributos de datos, por lo que cuando se necesita hacer una acción que puede hacer:

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

y luego en el jQuery hacer algo como:

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

Si ha generado elementos de lista generados dinámicamente en su menú desplegable y necesita utilizar los datos que no son solo el valor de texto del elemento, puede usar los atributos de datos al crear el elemento de lista desplegable y luego simplemente dar cada elemento con la clase el evento, en lugar de hacer referencia a los id de cada elemento y generar un evento de clic.

Answer 7

Sin tener que cambiar el grupo de botones, puede hacer lo siguiente. A continuación, supongo que su lista desplegable button tiene un id de 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> 

Ahora, si se establece la .btn-group de este artículo en sí mismo para tener la id de fldCategory, que en realidad es más eficiente jQuery y corre un poco más rápido:

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