Twitter Bootstrap açılır listeleri için olay işleyicileri?

Bir Twitter Önyükleme açılır düğmesi kullanmak istiyorum :

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

Kullanıcı, düğmenin değerini "Başka bir işlem" olarak değiştirdiğinde, basitçe gezinmek yerine, #aslında eylemi özel bir şekilde ele almak isterim.

Ancak bunu yapmak için açılır eklentide herhangi bir olay işleyicisi göremiyorum .

Kullanıcı eylemlerini işlemek için Bootstrap açılır düğmelerini kullanmak gerçekten mümkün mü? Sadece gezinme amaçlı olup olmadıklarını merak etmeye başladım - örneğin bir eylemler listesi vermesi kafa karıştırıcı.

Twitter önyüklemesi temel bir işlevsellik sağlamak içindir ve yalnızca ekranda bir şey yapan temel javascript eklentilerini sağlar . Herhangi bir ek içerik veya işlev, kendiniz yapmanız gerekir.

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

ve sonra jQuery ile

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

Bunu dene:

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

Bootstrap 3'te 'dropdown.js' bize tetiklenen çeşitli olayları sağlar.

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

vb

Çapalarınız için özel işlevleri nasıl uygulayabileceğinizin çalışan bir örneği.

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

Bağlantınıza bir kimlik ekleyebilirsiniz:

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

Ve sonra tıklama eylemini dinlemek ve işlevinizi ateşlemek için jQuery'nin tıklama olay dinleyicisini kullanın:

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

Ben buna bakıyordum. Açılır bağlantıları doldururken onlara bir sınıf ve veri öznitelikleri verdim, böylece bir işlem yapmanız gerektiğinde şunları yapabilirsiniz:

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

ve sonra jQuery'de şöyle bir şey yapıyor:

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

Dolayısıyla, açılır listenizde dinamik olarak oluşturulmuş liste öğeleri varsa ve yalnızca öğenin metin değeri olmayan verileri kullanmanız gerekiyorsa, açılır liste öğesini oluştururken veri özniteliklerini kullanabilir ve ardından sınıfa sahip her öğeye her öğenin kimliğine atıfta bulunmak ve bir tıklama etkinliği oluşturmak yerine olay.

Burada Knockout JS entegrasyonu arayan herkes.

Aşağıdaki HTML (Standard Bootstrap açılır düğmesi) verildiğinde:

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

Aşağıdaki JS'yi kullanın:

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

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

Nakavt gözlemlenebilir diziye dayalı açılır seçenekler oluşturmak isteyenler için, kod şunun gibi görünecektir:

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

Gözlenebilir dizi öğesinin, görünüm modeli kodunda kullanılmak üzere tıklama işlevi işleyicisine örtük olarak iletildiğine dikkat edin.

Düğme grubunuzu hiç değiştirmenize gerek kalmadan aşağıdakileri yapabilirsiniz. Aşağıda, bu açılan varsayalım buttonbir sahiptir idait 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>

Belirlediğiniz Şimdi, eğer .btn-groupbu öğesinin kendi sahip olmak idarasında fldCategoryaslında daha verimli jQuery var ve biraz daha hızlı çalışır,:

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