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, dize	yanlış	Kalıcı bir arka plan öğesi içerir. "static"Arka plan tıklandığında modun kapanmasını istemiyorsanız arka planı olarak ayarlayın .
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. Bir öğeye data-controls-modal, kalıcı bir öğe kimliğine karşılık gelen bir nitelik verin ve tıklandığında, modunuzu 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 = "static" > 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 ({
  klavye : 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, mod 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

bootstrap-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, önyükleme üst çubuğuna scrollspy (otomatik güncelleme gezinme) etkileşimini eklemek içindir.

İndirmek

bootstrap-scrollspy.js'yi kullanma

$ ( '#topbar' ). kaydırmaCasus ()

İş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, düğme durumunu yönetmek için ek işlevler sunar.

İndirmek

bootstrap-buttons.js'yi kullanma

$ ( '.tabs' ). düğme ()

yöntemler

$().button('geçiş')

İtme durumunu değiştirir. Btn'ye etkinleştirildiği görünümü verir.

Uyarı Özelliği kullanarak bir düğmenin otomatik geçişini etkinleştirebilirsiniz data-toggle.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('yükleniyor')

Düğme durumunu yükleme olarak ayarlar - düğmeyi devre dışı bırakır ve metni yükleme metniyle değiştirir. Yükleme metni, data özniteliği kullanılarak button öğesinde tanımlanmalıdır data-loading-text.

<button class = "btn" data-loading-text = "malzeme yükleniyor..." > ... </button>   

$().button('sıfırla')

Düğme durumunu sıfırlar - metni orijinal metne değiştirir.

$().düğme(dize)

Düğme durumunu sıfırlar - metni herhangi bir veri tanımlı metin durumuna değiştirir.

<button class = "btn" data-complete-text = "bitti!" > ... </düğme>   
<script>
  $('.btn').button('tamamlandı')
</script>

Demo

Demo Yükleniyor Demoyu Aç/Kapat

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

İndirmek

bootstrap-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> 
</div>
 
<script>
  $ ( işlev () {  
    $ ( '.tabs' ). sekmeler ()
  })
</script>

Olaylar

Etkinlik	Tanım
değiştirmek	Bu olay, sekme değişikliğinde tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi hedeflemek için event.targetve kullanın .event.relatedTarget

$ ( '#.sekmeler' ). bağlama ( 'değiştir' , işlev ( e ) {   
  e . hedef // aktif sekme
  e . ilgiliTarget // önceki sekme
})

Demo

• Ev
• Profil
• Mesajlar
• Ayarlar
• Yıkılmak
  • @yağ
  • @mdo

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 nitelik veya yöntem
tetiklemek	sicim	'uçur'	ipucu nasıl tetiklenir - fareyle üzerine gelin | odak | Manuel
şablon	sicim	[varsayılan işaretleme]	Twipsy oluşturmak için kullanılan html şablonu.

Uyarı Bireysel twipsy örneği seçenekleri, alternatif olarak veri öznitelikleri kullanılarak belirtilebilir.

<a href = "#" data-placement = "aşağıda" rel = 'twipsy' başlık = 'Bazı başlık metni' > metin </a>    

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. Bootstrap-twipsy.js eklentisini genişletir , bu yüzden projenize popover'ları eklerken o dosyayı da aldığınızdan emin olun!

Uyarı Bootstrap-twipsy.js dosyasını bootstrap-popover.js'den önce eklemelisiniz.

İndirmek

bootstrap-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 nitelik veya yöntem
içerik	dize, işlev	'veri içeriği'	içerik metnini almak için bir dize veya yöntem. hiçbiri sağlanmazsa, içerik bir veri içeriği özniteliğinden kaynaklanacaktır.
tetiklemek	sicim	'uçur'	ipucu nasıl tetiklenir - fareyle üzerine gelin | odak | Manuel
şablon	sicim	[varsayılan işaretleme]	Popover oluşturmak için kullanılan html şablonu.

Uyarı Bireysel popover örneği seçenekleri, alternatif olarak veri öznitelikleri kullanılarak belirtilebilir.

<a data-placement = "aşağıda" href = "#" class = "btn tehlike" rel = "popover" > metin </a>    

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 özellik eklemeniz yeterlidir.

Seçenekler

İsim	tip	varsayılan	tanım
seçici	sicim	'.kapat'	Bir uyarıyı kapatmak için hangi seçicinin hedefleneceği.

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