Les gestionnaires d'événements pour Twitter Bootstrap listes déroulantes?

Question

Je voudrais utiliser un Twitter Bootstrap bouton de la liste déroulante:

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

Lorsque l'utilisateur modifie la valeur de la touche pour une Autre action", au lieu de simplement en naviguant à l' #, j'aimerais vraiment gérer l'action de manière personnalisée.

Mais je ne peux pas voir les gestionnaires d'événements dans la liste déroulante plugin pour faire cela.

Est-il réellement possible d'utiliser Bootstrap déroulant boutons pour gérer les actions de l'utilisateur? Je commence à me demander si ils sont uniquement destinés à la navigation, il est source de confusion que l'exemple donne une liste d'actions.

Answer 1

Twitter bootstrap est destiné à donner une ligne de base de la fonctionnalité, et ne fournit que le code javascript de base plugins qui font quelque chose sur l'écran. Un contenu supplémentaire ou de la fonctionnalité, vous devrez le faire vous-même.

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

et puis avec jQuery

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

Answer 2

Essayez ceci:

$('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 3

Voici un exemple de comment vous pouvez mettre en œuvre des fonctions personnalisées pour vos ancres.

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

Vous pouvez joindre un id à votre point d'ancrage:

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

Et puis l'utilisation de jQuery cliquez sur écouteur d'événement pour écouter la sur action et vous le feu de la fonction:

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