Modal eklentimiz, geleneksel modal js eklentisinin süper ince bir versiyonudur ve yalnızca burada twitter'da ihtiyaç duyduğumuz çıplak işlevselliği dahil etmeye özel özen gösterir.

İndirmek

Önyükleme modunu kullanma

$ ( '#modal' ). mod ( seçenekler )

Seçenekler

İsim	tip	varsayılan	tanım
zemin	boole	yanlış	Kalıcı bir arka plan öğesi içerir
tuş takımı	boole	yanlış	Çıkış tuşuna basıldığında modu kapatır
göstermek	boole	yanlış	Sınıf başlatmada modu açar

İşaretleme

Tek bir javascript satırı yazmanıza gerek kalmadan sayfanızdaki modları kolayca etkinleştirebilirsiniz. data-controls-modalBir öğeye , kalıcı öğe kimliğine karşılık gelen bir öznitelik verin ve tıklandığında, modelinizi başlatacaktır. Modal seçenekler eklemek için bunları da veri öznitelikleri olarak eklemeniz yeterlidir.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Modal'ı Başlat </a>    

Dikkat Kipinizin içeri ve dışarı animasyon yapmasını istiyorsanız , elementinize bir .fadesınıf eklemeniz .modalyeterlidir (bunu çalışırken görmek için demoya bakın).

yöntemler

.modal(seçenekler)

İçeriğinizi modal olarak etkinleştirir. İsteğe bağlı seçenekleri kabul eder object.

$ ( '#modal' ). mod ({
  closeOnEscape : doğru 
})

.modal('geçiş')

Bir modu manuel olarak değiştirir.

$ ( '#modal' ). modal ( 'geçiş' )

.modal('göster')

Bir modeli manuel olarak açar.

$ ( '#modal' ). modal ( 'göster' )

.modal('gizle')

Bir modu el ile gizler.

$ ( '#modal' ). modal ( 'gizle' )

.modal(doğru)

Bir öğeler kalıcı sınıf örneği döndürür.

$ ( '#modal' ). modal ( doğru )

Uyarı Alternatif olarak, bu ile alınabilir $().data('modal').

Olaylar

Bootstrap'in modal sınıfı, modal işlevselliğe bağlanmak için birkaç olayı ortaya çıkarır.

Etkinlik	Tanım
göstermek	Bu olay, showörnek yöntemi çağrıldığında hemen tetiklenir.
gösterilen	Bu olay, modal kullanıcıya görünür hale getirildiğinde tetiklenir (css geçişlerinin tamamlanmasını bekler).
saklamak	hideBu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
gizlenmiş	Bu olay, kip kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir (css geçişlerinin tamamlanmasını bekler).

$ ( '#modal' ). bağlama ( 'gizli' , işlev () {   
  // bir şey yap ...
})

Demo

Modal'ı Başlat

Bu eklenti, önyükleme üst çubuğuna veya sekmeli gezinmelere açılır menü etkileşimi eklemek içindir.

İndirmek

boostrap-dropdown.js'yi kullanma

$ ( '#topbar' ). açılır menü ()

İşaretleme

Herhangi bir gezinme öğesine hızlı bir şekilde açılır menü işlevi eklemek için data-dropdownözniteliği kullanın. Geçerli herhangi bir önyükleme açılır menüsü otomatik olarak etkinleştirilecektir.

<ul class = "sekmeler" > 
  <li class = "etkin" ><a href = "#" > Ana Sayfa </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Açılır menü </a>  
    <ul class = "açılır menü" > 
      <li><a href = "#" > İkincil bağlantı </a></li> 
      <li><a href = "#" > Burada başka bir şey var </a></li> 
      <li sınıf = "bölücü" ></li> 
      <li><a href = "#" > Başka bir bağlantı </a></li> 
    </ul>
  </li>
</ul>

Dikkat Arayüzünüzde birden fazla açılır menü varsa, data-dropdownniteliği .tabsveya gibi daha önemli bir kapsayıcı öğesine eklemeyi düşünün .topbar.

yöntemler

$().dropdown()

Belirli bir üst çubuk veya sekmeli gezinme için menüleri etkinleştirmek için programlı bir API.

Demo

Bu eklenti, ön yükleme üst çubuğuna kaydırma casusu (otomatik güncelleme gezinme) etkileşimini eklemek içindir.

İndirmek

boostrap-scrollspy.js'yi kullanma

$ ( '#topbar' ). açılır menü ()

İşaretleme

Navigasyonunuza kolayca scrollspy davranışı eklemek için, data-scrollspyözniteliği .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

yöntemler

$().scrollspy()

Kullanıcıların kaydırma konumuna göre gezinme düğmelerini otomatik olarak etkinleştirir.

$ ( 'gövde > .topbar' ). kaydırmaCasus ()

Dikkat Topbar bağlantı etiketlerinin çözümlenebilir kimlik hedefleri olmalıdır. Örneğin, a <a href="#home">home</a>dom gibi bir şeye karşılık gelmelidir <div id="home"></div>.

.scrollspy('yenile')

Scrollspy, performans için gezinme düğmelerini ve bölüm koordinatlarını önbelleğe alır. Bu önbelleği güncellemeniz gerekiyorsa (muhtemelen dinamik içeriğiniz varsa), bu yenileme yöntemini çağırmanız yeterlidir. Scrollspy'ınızı tanımlamak için data niteliğini kullandıysanız, gövdede yenilemeyi çağırmanız yeterlidir.

$ ( 'vücut' ). scrollspy ( 'yenile' )

Demo

Bu sayfadaki üst çubuk navigasyonuna göz atın.

Bu eklenti hızlı, dinamik sekme ve hap işlevi ekler.

İndirmek

boostrap-tabs.js'yi kullanma

$ ( '.tabs' ). sekmeler ()

İşaretleme

Herhangi bir javascript yazmadan, onlara bir data-tabsveya data-pillsniteliği vererek bir sekme veya hap navigasyonunu etkinleştirebilirsiniz.

 <ul class = "sekmeler" veri sekmeleri = "sekmeler" > ... </ul>   

yöntemler

$().tabs veya $().pills

Belirli bir kapsayıcı için sekme ve hap işlevini etkinleştirir. Sekme bağlantıları, belgedeki kimliklere başvurmalıdır.

<ul class = "sekmeler" > 
  <li class = "etkin" ><a href = "#home" > Ana Sayfa </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesajlar </a></li> 
  <li><a href = "#settings" > Ayarlar </a></li> 
</ul>
 
<div class = "hap içeriği" > 
  <div class = "etkin" id = "ev" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "mesajlar" > ... </div> 
  <div id = "ayarlar" > ... </div> 
</ul>
 
<script>
  $ ( işlev () {  
    $ ( '.tabs' ). sekmeler ()
  })
</script>

Demo

• Ev
• Profil
• Mesajlar
• Ayarlar

Jason Frame tarafından yazılmış mükemmel jQuery.tipsy eklentisine dayanarak; twipsy, resimlere dayanmayan, animasyonlar için css3 ve başlık depolama için veri öznitelikleri kullanan güncellenmiş bir sürümdür!

İndirmek

bootstrap-twipsy.js'yi kullanma

$ ( '#örnek' ). twipsy ( seçenekler )

Seçenekler

İsim	tip	varsayılan	tanım
canlandırmak	boole	doğru	araç ipucuna bir css soluk geçişi uygula
gecikme	sayı	0	araç ipucunu göstermeden önce gecikme (ms)
gecikme	sayı	0	ipucunu gizlemeden önce gecikme (ms)
geri çekilmek	sicim	''	ipucu başlığı olmadığında kullanılacak metin
atama	sicim	'üstünde'	ipucu nasıl konumlandırılır - yukarıda | aşağıda | sol | Sağ
html	boole	yanlış	araç ipucu içinde html içeriğine izin verir
canlı	boole	yanlış	bireysel olay işleyicileri yerine olay yetkilendirmesini kullanın
telafi etmek	sayı	0	araç ipucunun hedef elemandan piksel uzaklığı
Başlık	dize | işlev	'Başlık'	başlık metnini almak için öznitelik veya yöntem
tetiklemek	sicim	'uçur'	ipucu nasıl tetiklenir - fareyle üzerine gelin | odak | Manuel

yöntemler

$().twipsy(seçenekler)

Bir öğe koleksiyonuna bir twipsy işleyicisi ekler.

.twipsy('göster')

Bir öğeleri twipsy ortaya çıkarır.

$ ( '#eleman' ). twipsy ( 'göster' )

.twipsy('gizle')

Bir öğeleri twipsy gizler.

$ ( '#eleman' ). twipsy ( 'gizlemek' )

.twipsy(doğru)

Bir öğe twipsy sınıfı örneği döndürür.

$ ( '#eleman' ). ikiyüzlü ( doğru )

Uyarı Alternatif olarak, bu ile alınabilir $().data('twipsy').

Demo

Popover eklentisi, uygulamanıza popover eklemek için basit bir arayüz sağlar. Boostrap-twipsy.js eklentisini genişletir , bu yüzden projenize popover'ları eklerken o dosyayı da aldığınızdan emin olun!

İndirmek

boostrap-popover.js'yi kullanma

$ ( '#örnek' ). popover ( seçenekler )

Seçenekler

İsim	tip	varsayılan	tanım
canlandırmak	boole	doğru	araç ipucuna bir css soluk geçişi uygula
gecikme	sayı	0	araç ipucunu göstermeden önce gecikme (ms)
gecikme	sayı	0	ipucunu gizlemeden önce gecikme (ms)
geri çekilmek	sicim	''	ipucu başlığı olmadığında kullanılacak metin
atama	sicim	'Sağ'	ipucu nasıl konumlandırılır - yukarıda | aşağıda | sol | Sağ
html	boole	yanlış	araç ipucu içinde html içeriğine izin verir
canlı	boole	yanlış	bireysel olay işleyicileri yerine olay yetkilendirmesini kullanın
telafi etmek	sayı	0	araç ipucunun hedef elemandan piksel uzaklığı
Başlık	dize | işlev	'Başlık'	başlık metnini almak için öznitelik veya yöntem
içerik	dize | işlev	'veri içeriği'	içerik metnini almak için nitelik veya yöntem
tetiklemek	sicim	'uçur'	ipucu nasıl tetiklenir - fareyle üzerine gelin | odak | Manuel

yöntemler

$().popover(seçenekler)

Bir öğe koleksiyonu için açılır pencereleri başlatır.

.popover('göster')

Bir öğe popover'ı ortaya çıkarır.

$ ( '#eleman' ). popover ( 'göster' )

.popover('gizle')

Bir öğe açılır penceresini gizler.

$ ( '#eleman' ). popover ( 'gizle' )

Demo

popover için fareyle üzerine gelin

Uyarı eklentisi, uyarılara yakın işlevsellik eklemek için süper küçük bir sınıftır.

İndirmek

bootstrap-alerts.js'yi kullanma

$ ( ".alert-message" ). uyarı ()

İşaretleme

data-alertOtomatik olarak kapatma işlevselliği sağlamak için uyarı mesajlarınıza bir öznitelik eklemeniz yeterlidir.

yöntemler

$().uyarı()

Yakın işlevsellik ile tüm uyarıları sarar. Uyarılarınızın kapatıldığında canlandırılması için, .fadeand .insınıfının kendilerine uygulanmış olduğundan emin olun.

.alert('kapat')

Bir uyarıyı kapatır.

$ ( ".alert-message" ). uyarı ( 'kapat' )

Demo