Ich möchte eine Twitter Bootstrap Dropdown-Schaltfläche verwenden :
<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 -->
Wenn der Benutzer den Wert der Schaltfläche in "Eine andere Aktion" ändert, anstatt einfach zu navigieren #
, möchte ich die Aktion auf benutzerdefinierte Weise behandeln.
Aber ich kann keine Event-Handler im Dropdown-Plugin dafür sehen.
Ist es tatsächlich möglich, Bootstrap-Dropdown-Schaltflächen zu verwenden, um Benutzeraktionen auszuführen? Ich frage mich, ob sie nur für die Navigation gedacht sind - es ist verwirrend, dass das Beispiel eine Liste von Aktionen enthält.
javascript
twitter-bootstrap
Richard
quelle
quelle
Antworten:
Twitter Bootstrap soll eine Basisfunktionalität bieten und bietet nur grundlegende Javascript-Plugins, die etwas auf dem Bildschirm tun . Alle zusätzlichen Inhalte oder Funktionen müssen Sie selbst vornehmen.
und dann mit jQuery
quelle
Versuche dies:
quelle
In Bootstrap 3 liefert uns 'dropdown.js' die verschiedenen Ereignisse, die ausgelöst werden.
etc
quelle
Hier ist ein funktionierendes Beispiel dafür, wie Sie benutzerdefinierte Funktionen für Ihre Anker implementieren können.
http://jsfiddle.net/CH2NZ/43/
Sie können Ihrem Anker eine ID hinzufügen:
Verwenden Sie dann den Klickereignis-Listener von jQuery, um auf die Klickaktion zu warten und Ihre Funktion auszulösen:
quelle
Ich habe mir das angeschaut. Beim Auffüllen der Dropdown-Anker habe ich ihnen eine Klasse und Datenattribute zugewiesen. Wenn Sie also eine Aktion ausführen müssen, können Sie Folgendes tun:
und dann in der jQuery so etwas wie:
Wenn Sie also dynamisch Listenelemente in Ihrer Dropdown-Liste generiert haben und die Daten verwenden müssen, die nicht nur der Textwert des Elements sind, können Sie die Datenattribute beim Erstellen des Dropdown-Listenelements verwenden und dann jedem Element mit der Klasse die geben Ereignis, anstatt auf die IDs jedes Elements zu verweisen und ein Klickereignis zu generieren.
quelle
Jeder hier, der nach Knockout JS-Integration sucht.
Bei folgendem HTML (Standard Bootstrap Dropdown Button):
Verwenden Sie das folgende JS:
Für diejenigen, die Dropdown-Optionen basierend auf einem beobachtbaren Knockout-Array generieren möchten, würde der Code ungefähr so aussehen:
quelle
Ohne Ihre Schaltflächengruppe ändern zu müssen, können Sie Folgendes tun. Unten gehe ich davon aus, dass Ihr Dropdown
button
einid
von hatfldCategory
.Wenn Sie das
.btn-group
von diesem Element selbst so einstellen , dass es dasid
vonfldCategory
hat, ist das tatsächlich effizienter und läuft etwas schneller:quelle