Penangan acara untuk dropdown Twitter Bootstrap?

Saya ingin menggunakan tombol tarik-turun Bootstrap Twitter :

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

Saat pengguna mengubah nilai tombol menjadi 'Tindakan lain', daripada sekadar menavigasi ke #, saya sebenarnya ingin menangani tindakan tersebut dengan cara khusus.

Tapi saya tidak bisa melihat penangan acara di plugin dropdown untuk melakukan ini.

Apakah mungkin menggunakan tombol dropdown Bootstrap untuk menangani tindakan pengguna? Saya mulai bertanya-tanya apakah mereka hanya ditujukan untuk navigasi - membingungkan bahwa contoh memberikan daftar tindakan.

Bootstrap Twitter dimaksudkan untuk memberikan fungsionalitas dasar, dan hanya menyediakan plugin javascript dasar yang melakukan sesuatu di layar . Konten atau fungsi tambahan apa pun, Anda harus melakukannya sendiri.

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

dan kemudian dengan jQuery

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

Coba ini:

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

Dalam Bootstrap 3 'dropdown.js' memberi kita berbagai peristiwa yang dipicu.

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

dll

Berikut adalah contoh kerja bagaimana Anda dapat mengimplementasikan fungsi kustom untuk jangkar Anda.

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

Anda dapat melampirkan id ke jangkar Anda:

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

Dan kemudian gunakan pendengar peristiwa klik jQuery untuk mendengarkan aksi klik dan aktifkan fungsi Anda:

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

Saya telah melihat ini. Saat mengisi jangkar drop-down, saya telah memberi mereka atribut kelas dan data, jadi ketika perlu melakukan tindakan, Anda dapat melakukan:

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

dan kemudian di jQuery melakukan sesuatu seperti:

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

Jadi, jika Anda telah membuat item daftar secara dinamis di tarik-turun dan perlu menggunakan data yang bukan hanya nilai teks dari item tersebut, Anda dapat menggunakan atribut data saat membuat item daftar tarik-turun dan kemudian hanya memberikan setiap item dengan kelas acara, daripada merujuk ke id setiap item dan menghasilkan peristiwa klik.

Siapapun di sini yang mencari integrasi Knockout JS.

Diberikan HTML berikut (tombol dropdown Bootstrap Standar):

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

Gunakan JS berikut:

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

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

Bagi mereka yang ingin menghasilkan opsi dropdown berdasarkan knockout observable array, kodenya akan terlihat seperti:

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

Perhatikan, item larik yang dapat diamati secara implisit diteruskan ke pengendali fungsi klik untuk digunakan dalam kode model tampilan.

Tanpa harus mengubah grup tombol Anda sama sekali, Anda dapat melakukan hal berikut. Di bawah ini, saya menganggap dropdown Anda buttonmemiliki iddari 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>

Sekarang, jika Anda menyetel .btn-groupitem ini sendiri menjadi iddari fldCategory, itu sebenarnya lebih efisien jQuery dan berjalan sedikit lebih cepat:

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