Event-Handler für Twitter Bootstrap-Dropdowns?

86

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.

Richard
quelle
1
Würde eine Funktion, die beim Klicken auf das Ankertag ausgelöst wird, nicht funktionieren?
Cameron Chapman
Erstens sind dies keine Knöpfe, sondern Anker. Sie können sich die Ereignishandler ansehen, indem Sie die Datei bootstrap.js überprüfen. Soweit ich weiß, werden alle diese Aktionen mit jQuery verarbeitet, sodass es keine große Sache sein sollte, diese Funktionalität zu bearbeiten oder zu überschreiben.
Mas-Designs

Antworten:

78

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.

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

und dann mit jQuery

jQuery("#action-1").click(function(e){
//do something
e.preventDefault();
});
Thomas Jones
quelle
1
Versuchte jedoch, dass kein Ereignis ausgelöst wurde. Ich kann das Ereignis des Klickens auf eine Schaltfläche jedoch erfassen. Was könnte sonst noch im Weg sein?
Schraubenschlüssel
1
@ RonnieKilsbo nicht sicher. Diese Lösung funktioniert wie angegeben und ich habe sie unzählige Male verwendet. Möglicherweise setzen Sie die ID Ihres Ankers nicht richtig oder Sie binden, bevor die Elemente vorhanden sind. In diesem Fall empfehle ich dringend, jQuery's on zu verwenden.
Thomas Jones
1
Du hast recht, mein Schlechtes. Ich hatte Elemente in das DOM eingefügt, nachdem ich die Clickables mit jQuery gebunden hatte, was eine schlechte Sache ist. :) Arbeiten, bestätigt.
Schraubenschlüssel
18

Versuche dies:

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

In Bootstrap 3 liefert uns 'dropdown.js' die verschiedenen Ereignisse, die ausgelöst werden.

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

etc

Stevanicus
quelle
Das stimmt, aber Sie arbeiten immer noch nicht im Bootstrap-Framework, um Ereignishandler anzuhängen. Das machst du alleine. Bei Bootstrap ging es immer darum, Dinge auf dem Bildschirm zu erledigen und keine benutzerdefinierten Funktionen bereitzustellen. Es wird davon ausgegangen, dass der Entwickler in der Lage sein wird, seine eigenen Dropdown-Ereignisse zu verknüpfen.
Thomas Jones
8

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:

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

Verwenden Sie dann den Klickereignis-Listener von jQuery, um auf die Klickaktion zu warten und Ihre Funktion auszulösen:

$('#alertMe').click(function(e) {
    alert('alerted');
    e.preventDefault();// prevent the default anchor functionality
});
Cameron Chapman
quelle
Das obige Beispiel scheint auf jsfiddle nicht mehr zu existieren.
Ätherisch
Ich habe ein neues Beispiel mit einem gültigen Link hinzugefügt. Danke @ethereal.
Cameron Chapman
4

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:

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

und dann in der jQuery so etwas wie:

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

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.

Andrew Berry
quelle
3

Jeder hier, der nach Knockout JS-Integration sucht.

Bei folgendem HTML (Standard Bootstrap Dropdown Button):

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

Verwenden Sie das folgende JS:

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

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

Für diejenigen, die Dropdown-Optionen basierend auf einem beobachtbaren Knockout-Array generieren möchten, würde der Code ungefähr so ​​aussehen:

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

Beachten Sie, dass das beobachtbare Array-Element implizit zur Verwendung im Ansichtsmodellcode an den Klickfunktionshandler übergeben wird.

Zuhälter
quelle
3

Ohne Ihre Schaltflächengruppe ändern zu müssen, können Sie Folgendes tun. Unten gehe ich davon aus, dass Ihr Dropdown buttonein idvon hat 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>

Wenn Sie das .btn-groupvon diesem Element selbst so einstellen , dass es das idvon fldCategoryhat, ist das tatsächlich effizienter und läuft etwas schneller:

<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>
Volomike
quelle
Ha! Danke, das ist schlau! :) Ich habe dein 2. Beispiel verwendet.
Drzounds
das hätte die Antwort sein sollen!
Jake