opciones - menu desplegable javascript

Controladores de eventos para listas desplegables de Twitter Bootstrap?

Question

Me gustaría usar un botón desplegable de 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 -->

Cuando el usuario cambia el valor del botón a "Otra acción", en lugar de simplemente navegar a # , realmente me gustaría manejar la acción de forma personalizada.

Pero no puedo ver ningún controlador de eventos en el complemento desplegable para hacer esto.

¿Es realmente posible usar los botones desplegables de 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

Aquí hay un ejemplo práctico de cómo podría implementar funciones personalizadas para sus anclajes.

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

Puede adjuntar una identificación a su ancla:

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

Y luego use el detector de eventos click de jQuery para escuchar la acción de clic y activar su función:

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

Answer 2

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

Dado el siguiente HTML (botón de lista desplegable de Bootstrap estándar):

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

Use la siguiente JS:

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

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

Para aquellos que buscan generar opciones desplegables basadas en matriz observable knockout, el código sería algo así 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 usar en el código de modelo de vista.

Answer 3

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

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

etc

Answer 4

He estado mirando esto. Al rellenar los anclajes desplegables, les he dado una clase y atributos de datos, así que cuando necesites hacer una acción puedes:

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

y luego en jQuery haciendo algo como:

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

Por lo tanto, si ha generado dinámicamente elementos de lista 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 a cada elemento con la clase evento, en lugar de referirse a los id de cada elemento y generar un evento de clic.

Answer 5

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

Sin tener que cambiar su grupo de botones, puede hacer lo siguiente. A continuación, supongo que su button desplegable 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 configura el .btn-group de este elemento para que tenga el id de fldCategory , en realidad es jQuery más eficiente y se ejecuta 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>

Answer 7

Twitter bootstrap está destinado a proporcionar una funcionalidad de línea de base, y proporciona solo los complementos básicos de JavaScript 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();
});