SORU
15 Kasım 2011, Salı


Twitter bootstrap tabs ve javascript olayları

Bir proje - özellikle sekme fonksiyonları (http://twitter.github.com/bootstrap/javascript.html#tabs) için twitter bootstrap kullanıyorum

Şimdi bu tablist ve tab bastığımda tek tek her sekmenin içeriğini değiştirir. Ancak, bu içerik sayfasını (tüm sekmeleri içeriği için html kodu var zaten, sen sadece sekmeleri basarak görünürlüğünü değiştirmek) önceden yüklenmiş.

Ancak sadece belirli bir sekme bir tam sayfa yüklendiğinde verileri yerine en son verileri alacak kadar basılı iken yük içeriği dinamik olarak yapmak istiyorum.

Bu bir WordPress kullanmak için kullanmayı planlıyorum. Ancak, nasıl bir sekme basıldığında belirli bir jquery fonksiyonu denir bunu ben yapabilir miyim?

Bir sekme tıklandığında bir uyarı göstermeye çalıştım (eğer bu işe yararsa, DV işlevi de olacak), ancak bu bile işe yaramıyor:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() {
    $('.tabs').bind('click', function (e) {
        e.target(window.alert("hello"))
    });
});
</script>

Ve benim html:

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

Bu işi yapmak için nasıl bir fikriniz var mı?

twitter bootstrap tabs çalışma için bkz: (http://twitter.github.com/bootstrap/javascript.html#tabs) ve js kullanır dosyası: http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

CEVAP
5 EYLÜL 2012, ÇARŞAMBA


Twitter Bootstrap sürümü ile 2 documented way to subscribe to tab change events

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Twitter Bootstrap tab olayları ile ilgili son belgeleri http://getbootstrap.com/javascript/#tabs bulunabilir

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • EEVblog2

    EEVblog2

    2 HAZİRAN 2014
  • Helder Barreto

    Helder Barre

    22 Mayıs 2006
  • iMasterful

    iMasterful

    11 EYLÜL 2009