Je souhaite utiliser un bouton déroulant 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 change la valeur du bouton en "Une autre action", au lieu de simplement naviguer vers #
, j'aimerais en fait gérer l'action de manière personnalisée.
Mais je ne vois aucun gestionnaire d'événements dans le plugin déroulant pour faire cela.
Est-il réellement possible d'utiliser les boutons déroulants Bootstrap pour gérer les actions de l'utilisateur? Je commence à me demander s'ils sont uniquement destinés à la navigation - il est déroutant que l'exemple donne une liste d'actions.
javascript
twitter-bootstrap
Richard
la source
la source
Réponses:
Le bootstrap de Twitter 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(); });
la source
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; });
la source
Dans Bootstrap 3, «dropdown.js» nous fournit les différents événements déclenchés.
etc
la source
Voici un exemple fonctionnel de la façon dont vous pouvez implémenter des fonctions personnalisées pour vos ancres.
http://jsfiddle.net/CH2NZ/43/
Vous pouvez joindre un identifiant à votre ancre:
<li><a id="alertMe" href="#">Action</a></li>
Et puis utilisez l'écouteur d'événement click 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 });
la source
J'ai regardé ceci. En remplissant les ancres déroulantes, je leur ai donné une classe et des attributs de données, donc lorsque vous avez besoin de faire une action, vous pouvez faire:
<li><a class="dropDownListItem" data-name="Fred Smith" href="#">Fred</a></li>
puis dans le jQuery en faisant quelque chose comme:
$('.dropDownListItem').click(function(e) { var name = e.currentTarget; console.log(name.getAttribute("data-name")); });
Donc, si vous avez des éléments de liste générés dynamiquement dans votre liste déroulante et que vous devez utiliser des données qui ne sont pas seulement la valeur textuelle de l'élément, vous pouvez utiliser les attributs de données lors de la création de l'élément de liste déroulante, puis attribuer simplement à chaque élément avec la classe le é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.
la source
Tous ceux qui recherchent l'intégration de Knockout JS.
Compte tenu du code HTML suivant (bouton déroulant 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 -->
la source
Sans avoir à modifier du tout votre groupe de boutons, vous pouvez effectuer les opérations suivantes. Ci - dessous, je suppose que votre menu déroulant
button
a unid
defldCategory
.<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 leid
offldCategory
, c'est en fait jQuery plus efficace et s'exécute 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>
la source