web-dev-qa-db-fra.com

Gestionnaires d'événements pour Twitter Bootstrap dropdowns?

Je voudrais utiliser un 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 -->

Lorsque l'utilisateur modifie la valeur du bouton en "Autre action", au lieu de naviguer simplement vers # _, J'aimerais en fait gérer l'action de manière personnalisée.

Mais je ne vois aucun gestionnaire d'événement dans le plugin déroulant pour le faire.

Est-il possible d'utiliser des boutons déroulants Bootstrap) pour gérer les actions des utilisateurs? Je commence à me demander si elles sont uniquement destinées à la navigation - il est déroutant que l'exemple donne une liste d'actions.

javascripttwitter-bootstrap
83
Richard

Twitter bootstrap est destiné à donner une fonctionnalité de base, et ne fournit que des plugins javascript de base qui font quelque chose à l'écran Tout contenu ou fonctionnalité supplémentaire, 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 -->

puis avec jQuery

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

Essaye ça:

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

Dans Bootstrap 3 'dropdown.js' nous fournit les différents événements déclenchés.

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

etc

13
Stevanicus

Voici un exemple concret de la manière dont vous pourriez implémenter des fonctions personnalisées pour vos ancres.

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

Vous pouvez attacher un identifiant à votre ancre:

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

Et utilisez ensuite l'écouteur d'événements de clic de jQuery pour écouter l'action de clic et déclencher votre fonction:

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

J'ai regardé ça. En remplissant les ancres déroulantes, je leur ai donné une classe et des attributs de données. Ainsi, lorsque vous avez besoin de faire une action, vous pouvez le faire:

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

puis dans le jQuery faire quelque chose comme:

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

Ainsi, si vous avez généré des éléments de liste générés de manière dynamique dans votre liste déroulante et que vous devez utiliser des données autres que la valeur textuelle de l’article, vous pouvez utiliser les attributs de données lors de la création de la liste déroulante, puis attribuer à chaque élément la classe. événement, plutôt que de faire référence aux identifiants de chaque élément et de générer un événement de clic.

4
Andrew Berry

Tous ceux qui recherchent une intégration Knockout JS.

Étant donné le code HTML suivant (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>

Utilisez le JS suivant:

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

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

Pour ceux qui cherchent à générer des options de liste déroulante basées sur un tableau observable knockout, le code ressemblerait à quelque chose comme:

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

Notez que l'élément de tableau observable est implicitement passé dans le gestionnaire de fonctions de clic pour être utilisé dans le code du modèle de vue.

3
pim

Sans avoir à changer votre groupe de boutons, vous pouvez procéder comme suit. Ci-dessous, je suppose que votre menu déroulant button a 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>

Maintenant, si vous définissez le .btn-group _ de cet élément lui-même pour avoir le id de fldCategory, jQuery est en fait plus efficace et fonctionne un peu plus vite:

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