Önyükleme için Javascript

12 özel jQuery eklentisi ile Bootstrap bileşenlerini hayata geçirin.

modlar

Basitleştirilmiş, ancak esnek, geleneksel javascript modal eklentisini yalnızca gerekli minimum işlevsellik ve akıllı varsayılanlarla üstlenir.

açılır menüler

Bu basit eklenti ile Bootstrap'taki hemen hemen her şeye açılır menüler ekleyin. Bootstrap, gezinme çubuğunda, sekmelerde ve haplarda tam açılır menü desteği sunar.

kaydırma casusu

Kaydırma konumuna göre mevcut etkin bağlantıyı göstermek için gezinme çubuğunuzdaki bağlantıları otomatik olarak güncellemek için scrollspy'ı kullanın.

Değiştirilebilir sekmeler

Sekmeleri ve hapları yerel içeriğin sekmeli bölmeleri arasında geçiş yapmalarına izin vererek daha kullanışlı hale getirmek için bu eklentiyi kullanın.

Araç ipuçları

jQuery Tipsy eklentisinin yeni bir yorumu olan Araç İpuçları, görüntülere dayanmaz; animasyonlar için CSS3 ve yerel başlık depolaması için veri öznitelikleri kullanır.

Popover'lar *

İkincil bilgileri barındırmak için herhangi bir öğeye iPad'deki gibi küçük içerik katmanları ekleyin.

* Araç İpuçlarının dahil edilmesini gerektirir

Uyarı mesajları

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

Düğmeler

Düğmelerle daha fazlasını yapın. Araç çubukları gibi daha fazla bileşen için düğme durumlarını kontrol edin veya düğme grupları oluşturun.

Yıkılmak

Akordeonlar ve navigasyon gibi katlanabilir bileşenler için temel stiller ve esnek destek alın.

atlıkarınca

Etkileşimli bir içerik slayt gösterisi sağlamak istediğiniz herhangi bir içeriğin bir atlıkarınca oluşturun.

daktilo

Herhangi bir form metin girişi ile hızlı bir şekilde zarif daktilolar oluşturmak için basit, kolayca genişletilen bir eklenti.

geçişler *

Basit geçiş efektleri için, modları kaydırmak veya uyarıları azaltmak için bootstrap-transition.js dosyasını bir kez ekleyin.

* Eklentilerde animasyon için gerekli

Önüne bak! Tüm javascript eklentileri, jQuery'nin en son sürümünü gerektirir.

Modallar hakkında

Basitleştirilmiş, ancak esnek, geleneksel javascript modal eklentisini yalnızca gerekli minimum işlevsellik ve akıllı varsayılanlarla üstlenir.

Dosyayı indir

statik örnek

Aşağıda statik olarak oluşturulmuş bir modal bulunmaktadır.

Canlı demo

Aşağıdaki düğmeyi tıklayarak javascript aracılığıyla bir kip arasında geçiş yapın. Aşağı kayar ve sayfanın üst kısmından kaybolur.

Demo modunu başlat

Önyükleme modunu kullanma

Modalı javascript ile arayın:

  1. $ ( '#myModal' ). mod ( seçenekler )

Seçenekler

İsim tip varsayılan tanım
zemin boole doğru Kalıcı bir arka plan öğesi içerir. Alternatif olarak, statictıklamada modu kapatmayan bir arka plan belirtin.
tuş takımı boole doğru Çıkış tuşuna basıldığında modu kapatır
göstermek boole doğru Başlatıldığında kipi gösterir.

İşaretleme

Tek bir javascript satırı yazmanıza gerek kalmadan sayfanızdaki modları kolayca etkinleştirebilirsiniz. Yalnızca bir veya kalıcı öğe kimliğine karşılık gelen data-toggle="modal"bir denetleyici öğesinde ayarlayın ve tıklandığında, modunuzu başlatır.data-target="#foo"href="#foo"

Ayrıca, kalıcı örneğinize seçenekler eklemek için bunları kontrol öğesinde veya kalıcı biçimlendirmenin kendisinde ek veri öznitelikleri olarak eklemeniz yeterlidir.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal'ı Başlat </a>
  1. <div class = "modal gizleme" id = "myModal" >
  2. <div sınıfı = "modal-başlık" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Kalıcı başlık </h3>
  5. </div>
  6. <div sınıfı = "modal gövde" >
  7. <p> Güzel bir vücut… </p>
  8. </div>
  9. <div sınıfı = "modal-altbilgi" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Kapat </a>
  11. <a href = "#" class = "btn btn-birincil" > Değişiklikleri kaydet </a>
  12. </div>
  13. </div>
Önüne bak! Modalınızın içeri ve dışarı animasyon yapmasını istiyorsanız .fade, öğeye bir sınıf ekleyin .modal(bunu çalışırken görmek için demoya bakın) ve bootstrap-transition.js'yi ekleyin.

yöntemler

.modal(seçenekler)

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

  1. $ ( '#myModal' ). mod ({
  2. klavye : yanlış
  3. })

.modal('geçiş')

Bir modu manuel olarak değiştirir.

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

.modal('göster')

Bir modeli manuel olarak açar.

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

.modal('gizle')

Bir modu el ile gizler.

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

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).
  1. $ ( '#myModal' ). açık ( 'gizli' , işlev () {
  2. // bir şey yap…
  3. })

ScrollSpy eklentisi, kaydırma konumuna göre gezinme hedeflerini otomatik olarak güncellemek içindir.

Dosyayı indir

Scrollspy ile örnek gezinme çubuğu

Aşağıdaki alanı kaydırın ve navigasyon güncellemesini izleyin. Açılır alt öğeler de vurgulanacaktır. Dene!

@yağ

Reklam taytları keytar, brunch id sanat partisi dolor Labore. Pitchfork yr enim lo-fi qui satılmadan önce. Tumblr tarladan masaya bisiklet hakları ne olursa olsun. Anim keffiyeh carles hırka. Velit seitan mcsweeney'in fotoğraf kabini 3 wolf moon irure. Cosby kazak lomo jean şort, williamsburg hoodie minim qui muhtemelen duymamışsınızdır ve hırka güven fonu culpa biodizel wes anderson estetik. Nihil dövmeli accusamus, inandırıcı ironi biyodizel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa bıyıklı kaykay, fugiat velit dirgen sakalını adipisisiyor. Freegan sakal aliqua cupidatat mcsweeney's vero. Cupidatat dört loko nisi, bir helvetica nulla carles. Dövmeli cosby kazak yemek kamyonu, mcsweeney'nin serbest olmayan vinili. Lo-fi wes anderson +1 terzilik. Carles estetik olmayan egzersizleri soylulaştırıyor. Brooklyn adipisising zanaat bira yardımcısı keytar çöl.

bir

Occaecat commodo aliqua delectus. Fap zanaat bira çöl kaykay ea. Lomo bisiklet hakları adipisicing banh mi, velit ea sunt next level locavore tek kökenli kahve magna veniam. Yüksek yaşam kimliği vinil, yankı parkı consequat quis aliquip banh mi dirgen. Vero VHS tahmini yağlama. Consectetur nisi Kendin Yap mini postacı çantası. Cred ex in, sürdürülebilir delectus consectetur fanny pack iphone.

iki

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa postacı çantası marfa ne olursa olsun delectus gıda kamyonu. Sapiente synth kimliği varsayıldı. Locavore sed helvetica klişe ironisi, muhtemelen duymadığınız gök gürültüsü, kapüşonlu glütensiz lo-fi fap aliquip'i takip ediyor. Tükenmeden önce Labore elit placeat, terry richardson proident brunch nesciunt quis cosby kazak pariatur keffiyeh ut helvetica artisan. Hırka zanaat bira seitan hazır velit. VHS chambray Laboris tempor veniam. Anim mollit minim commodo ullamco gök gürültüsü kedileri.


bootstrap-scrollspy.js'yi kullanma

Javascript aracılığıyla scrollspy'ı arayın:

  1. $ ( '#navbar' ). kaydırma casusu ()

İşaretleme

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-spy="scroll"için, gözetlemek istediğiniz öğeye eklemeniz yeterlidir (çoğunlukla bu gövde olur).

  1. <body data-spy = "kaydır" > ... </body>
Önüne bak! Gezinme çubuğu bağlantılarının çö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>.

yöntemler

.scrollspy('yenile')

DOM'a öğe ekleme veya çıkarma ile birlikte scrollspy kullanırken, yenileme yöntemini şu şekilde çağırmanız gerekir:

  1. $ ( '[data-spy="scroll"]' ). her ( işlev () {
  2. var $spy = $ ( this ). scrollspy ( 'yenile' )
  3. });

Seçenekler

İsim tip varsayılan tanım
telafi etmek sayı 10 Kaydırma konumu hesaplanırken üstten kaydırılacak pikseller.

Olaylar

Etkinlik Tanım
etkinleştirmek Bu olay, scrollspy tarafından yeni bir öğe etkinleştirildiğinde tetiklenir.

Bu eklenti, yerel içerik arasında geçiş yapmak için hızlı, dinamik sekme ve hap işlevi ekler.

Dosyayı indir

Örnek sekmeler

Açılır menüler aracılığıyla bile gizli bölmeler arasında geçiş yapmak için aşağıdaki sekmeleri tıklayın.

Ham denim, muhtemelen o jean şort Austin'i duymamışsınızdır. Nesciunt tofu stumptown aliqua, retro synth master temizliği. Bıyık klişe tempor, williamsburg carles vegan helvetica. Reprehenderit kasap retro keffiyeh dreamcatcher synth. Cosby kazak ab banh mi, irure terry richardson eski kalamar. Aliquip placeat salvia cillum iphone. Seitan aliquip quis hırka amerikan giyim, kasap voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


bootstrap-tab.js'yi kullanma

Javascript aracılığıyla sekmeli sekmeleri etkinleştirin (her sekmenin ayrı ayrı etkinleştirilmesi gerekir):

  1. $ ( '#myTab a' ). tıklayın ( işlev ( e ) {
  2. e . önlemeVarsayılan ();
  3. $ ( bu ). sekme ( 'göster' );
  4. })

Tek tek sekmeleri birkaç şekilde etkinleştirebilirsiniz:

  1. $ ( '#myTab a[href="#profile"]' ). sekme ( 'göster' ); // Ada göre sekme seçin
  2. $ ( '#myTab a:ilk' ). sekme ( 'göster' ); // İlk sekmeyi seç
  3. $ ( '#myTab a:son' ). sekme ( 'göster' ); // Son sekmeyi seç
  4. $ ( '#myTab li:eq(2) a' ). sekme ( 'göster' ); // Üçüncü sekmeyi seç (0 indeksli)

İşaretleme

Herhangi bir javascript yazmadan bir öğeyi data-toggle="tab"veya data-toggle="pill"bir öğeyi belirterek bir sekmeyi veya hap navigasyonunu etkinleştirebilirsiniz. navSekmeye ve nav-tabssınıfları eklemek ul, önyükleme sekmesi stilini uygular.

  1. <ul class = "nav gezinme sekmeleri" >
  2. <li><a href = "#home" data-toggle = "tab" > Ana Sayfa </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Mesajlar </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Ayarlar </a></li>
  6. </ul>

yöntemler

$().sekme

Bir sekme öğesini ve içerik kapsayıcısını etkinleştirir. Sekme, DOM'da bir kapsayıcı düğümünü hedefleyen data-targetveya bir kapsayıcı düğümüne sahip olmalıdır.href

  1. <ul class = "nav gezinme sekmeleri" id = "myTab" >
  2. <li class = "etkin" ><a href = "#home" > Ana Sayfa </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Mesajlar </a></li>
  5. <li><a href = "#settings" > Ayarlar </a></li>
  6. </ul>
  7.  
  8. <div class = "sekme içeriği" >
  9. <div class = "sekme bölmesi etkin" id = "ev" > ... </div>
  10. <div class = "sekme bölmesi" id = "profil" > ... </div>
  11. <div class = "sekme bölmesi" id = "mesajlar" > ... </div>
  12. <div class = "sekme bölmesi" id = "ayarlar" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( işlev () {
  17. $ ( '#myTab a:son' ). sekme ( 'göster' );
  18. })
  19. </script>

Olaylar

Etkinlik Tanım
göstermek Bu olay, sekme gösterisinde, ancak yeni sekme gösterilmeden önce tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi (varsa) hedeflemek için event.targetve düğmelerini kullanın .event.relatedTarget
gösterilen Bu olay, bir sekme gösterildikten sonra sekme gösterisinde tetiklenir. Sırasıyla etkin sekmeyi ve önceki etkin sekmeyi (varsa) hedeflemek için event.targetve düğmelerini kullanın .event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'gösterilen' , işlev ( e ) {
  2. e . hedef // aktif sekme
  3. e . ilgiliTarget // önceki sekme
  4. })

Araç İpuçları Hakkında

Jason Frame tarafından yazılmış mükemmel jQuery.tipsy eklentisinden esinlenilmiştir; Araç ipuçları, resimlere dayanmayan, animasyonlar için css3'ü ve yerel başlık depolaması için veri özniteliklerini kullanan güncellenmiş bir sürümdür.

Dosyayı indir

Araç İpuçlarının Örnek Kullanımı

Araç ipuçlarını görmek için aşağıdaki bağlantıların üzerine gelin:

Dar pantolon sonraki seviye keffiyeh , muhtemelen onları duymadınız. Fotoğraf kabini sakallı ham kot tipo vegan postacı çantası stumptown. Tarladan sofraya seitan, mcsweeney'nin fixie sürdürülebilir kinoa 8-bit amerikan giyiminde havlu richardson vinil chambray var . Sakal stumptown, hırka banh mi lomo thundercats. Tofu biyodizel williamsburg marfa, dört loko mcsweeney'nin temizleyici vegan chambray. Gerçekten ironik bir zanaatkar ne olursa olsun keytar , Scenester çiftlikten masaya banky Austin twitter ele freegan cred raw denim tek kökenli kahve virali.


bootstrap-tooltip.js'yi kullanma

Araç ipucunu javascript ile tetikleyin:

  1. $ ( '#örnek' ). araç ipucu ( seçenekler )

Seçenekler

İsim tip varsayılan tanım
animasyon boole doğru araç ipucuna bir css soluk geçişi uygula
atama dize|fonksiyon 'tepe' ipucu nasıl konumlandırılır - üst | alt | sol | Sağ
seçici sicim yanlış Bir seçici sağlanırsa, araç ipucu nesneleri belirtilen hedeflere devredilecektir.
Başlık dize | işlev '' "title" etiketi yoksa varsayılan başlık değeri
tetiklemek sicim 'uçur' ipucu nasıl tetiklenir - fareyle üzerine gelin | odak | Manuel
gecikme sayı | nesne 0

araç ipucunu gösterme ve gizleme gecikmesi (ms) - manuel tetik türü için geçerli değildir

Bir numara verilirse, her iki gizleme/gösterme için gecikme uygulanır.

Nesne yapısı:delay: { show: 500, hide: 100 }

Önüne bak! Bireysel araç ipuçları için seçenekler, alternatif olarak veri öznitelikleri kullanılarak belirlenebilir.

İşaretleme

Performans nedenleriyle, Araç İpucu ve Popover veri apileri etkinleştirilir. Bunları kullanmak isterseniz bir seçici seçeneği belirtmeniz yeterlidir.

  1. <a href = "#" rel = "tooltip" title = "ilk ipucu" > imleci üzerime getirin </a>

yöntemler

$().tooltip(seçenekler)

Bir öğe koleksiyonuna bir araç ipucu işleyicisi ekler.

.tooltip('göster')

Bir öğenin ipucunu ortaya çıkarır.

  1. $ ( '#eleman' ). araç ipucu ( 'göster' )

.tooltip('gizle')

Bir öğenin ipucunu gizler.

  1. $ ( '#eleman' ). araç ipucu ( 'gizle' )

.tooltip('geçiş')

Bir öğenin ipucunu değiştirir.

  1. $ ( '#eleman' ). araç ipucu ( 'geçiş' )

Popover'lar hakkında

İkincil bilgileri barındırmak için herhangi bir öğeye iPad'deki gibi küçük içerik katmanları ekleyin.

* Araç ipucunun dahil edilmesini gerektirir

Dosyayı indir

Örnek vurgulu popover

Popover'ı tetiklemek için düğmenin üzerine gelin.


bootstrap-popover.js'yi kullanma

Javascript aracılığıyla açılır pencereleri etkinleştirin:

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

Seçenekler

İsim tip varsayılan tanım
animasyon boole doğru araç ipucuna bir css soluk geçişi uygula
atama dize|fonksiyon 'Sağ' popover nasıl konumlandırılır - üst | alt | sol | Sağ
seçici sicim yanlış bir seçici sağlanmışsa, araç ipucu nesneleri belirtilen hedeflere devredilecektir
tetiklemek sicim 'uçur' ipucu nasıl tetiklenir - fareyle üzerine gelin | odak | Manuel
Başlık dize | işlev '' "başlık" özelliği yoksa varsayılan başlık değeri
içerik dize | işlev '' "data-content" özelliği yoksa varsayılan içerik değeri
gecikme sayı | nesne 0

popover'ı gösterme ve gizleme gecikmesi (ms) - manuel tetikleme türü için geçerli değildir

Bir numara verilirse, her iki gizleme/gösterme için gecikme uygulanır.

Nesne yapısı:delay: { show: 500, hide: 100 }

Önüne bak! Bireysel popover'lar için seçenekler alternatif olarak veri öznitelikleri kullanılarak belirlenebilir.

İşaretleme

Performans nedenleriyle, Araç İpucu ve Popover veri apileri etkinleştirilir. Bunları kullanmak isterseniz bir seçici seçeneği belirtmeniz yeterlidir.

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.

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

.popover('gizle')

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

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

.popover('geçiş')

Bir öğe açılır penceresini değiştirir.

  1. $ ( '#eleman' ). popover ( 'geçiş' )

uyarılar hakkında

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

İndirmek

Örnek uyarılar

Uyarı eklentisi normal uyarı mesajları üzerinde çalışır ve mesajları engeller.

Kutsal guakamole! En iyisi kendini kontrol et, pek iyi görünmüyorsun.

Çabuk! Bir hata aldın!

Bunu ve bunu değiştirip tekrar deneyin. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis conectetur purus sit amet fermentum.

Bu eylemi gerçekleştir ya da bunu yap


bootstrap-alert.js'yi kullanma

Javascript aracılığıyla bir uyarının kapatılmasını etkinleştirin:

  1. $ ( ".uyarı" ). uyarı ()

İşaretleme

data-dismiss="alert"Otomatik olarak bir uyarı kapatma işlevi vermek için kapat düğmenize ekleyin .

  1. <a class = "kapat" data-dismiss = "alert" href = "#" > × </a>

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.

  1. $ ( ".uyarı" ). uyarı ( 'kapat' )

Olaylar

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

Etkinlik Tanım
kapat Bu olay, closeörnek yöntemi çağrıldığında hemen tetiklenir.
kapalı Bu olay, uyarı kapatıldığında tetiklenir (css geçişlerinin tamamlanmasını bekler).
  1. $ ( '#uyarim' ). bağlama ( 'kapalı' , işlev () {
  2. // bir şey yap…
  3. })

Hakkında

Düğmelerle daha fazlasını yapın. Araç çubukları gibi daha fazla bileşen için düğme durumlarını kontrol edin veya düğme grupları oluşturun.

Dosyayı indir

Örnek kullanımlar

Durumlar ve geçişler için düğmeler eklentisini kullanın.

durum bilgisi
Tek geçiş
onay kutusu
Radyo

bootstrap-button.js'yi kullanma

Javascript aracılığıyla düğmeleri etkinleştirin:

  1. $ ( '.nav-tabs' ). düğme ()

İşaretleme

Veri öznitelikleri, düğme eklentisinin ayrılmaz bir parçasıdır. Çeşitli işaretleme türleri için aşağıdaki örnek kodu inceleyin.

  1. <!-- Tek bir düğmede geçişi etkinleştirmek için data-toggle="button" ekleyin -->
  2. <button class = "btn" data-toggle = "button" > Tek Geçiş </button>
  3.  
  4. <!-- btn-group'ta onay kutusu stili arasında geçiş yapmak için data-toggle="buttons-checkbox" ekleyin -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Sol </button>
  7. <button class = "btn" > Orta </button>
  8. <button class = "btn" > Sağ </button>
  9. </div>
  10.  
  11. <!-- btn-group'ta radyo stili geçişi için data-toggle="buttons-radio" ekleyin -->
  12. <div class = "btn-group" data-toggle = "düğmeler-radyo" >
  13. <button class = "btn" > Sol </button>
  14. <button class = "btn" > Orta </button>
  15. <button class = "btn" > Sağ </button>
  16. </div>

yöntemler

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

İtme durumunu değiştirir. Düğmeye etkinleştirilmiş görünümü verir.

Önüne bak! data-toggleÖzniteliği kullanarak bir düğmenin otomatik geçişini etkinleştirebilirsiniz .
  1. <button class = "btn" data-toggle = "button" > </button>

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

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

  1. <button class = "btn" data-loading-text = "malzeme yükleniyor..." > ... </button>
Önüne bak! Firefox, sayfa yüklemeleri boyunca devre dışı durumunu sürdürür . Bunun için bir geçici çözüm kullanmaktır autocomplete="off".

$().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.

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

Hakkında

Akordeonlar ve navigasyon gibi katlanabilir bileşenler için temel stiller ve esnek destek alın.

Dosyayı indir

* Geçişler eklentisinin dahil edilmesini gerektirir.

Örnek akordeon

Daraltma eklentisini kullanarak basit bir akordeon stili widget'ı oluşturduk:

Animasyon pariatur klişe kınama, enim eiusmod yüksek yaşam accusamus terry richardson reklam kalamar. 3 wolf moon officia aute, cupidatat olmayan kaykay dolor brunch. Gıda kamyonu quinoa nesciunt Laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua üzerine bir kuş koyun kalamar tek kökenli kahve nulla varsaynda shoreditch et. Nihil anim keffiyeh helvetica, zanaat bira işçisi wes anderson cred nesciunt sapiente ea proident. Reklam vegan kasap yardımcısı lomo hariç. Tozluklar zanaat bira tarladan masaya, ham denim estetik synth nesciunt, muhtemelen onları duymadınız accusamus Labore sürdürülebilir VHS.
Animasyon pariatur klişe kınama, enim eiusmod yüksek yaşam accusamus terry richardson reklam kalamar. 3 wolf moon officia aute, cupidatat olmayan kaykay dolor brunch. Gıda kamyonu quinoa nesciunt Laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua üzerine bir kuş koyun kalamar tek kökenli kahve nulla varsaynda shoreditch et. Nihil anim keffiyeh helvetica, zanaat bira işçisi wes anderson cred nesciunt sapiente ea proident. Reklam vegan kasap yardımcısı lomo hariç. Tozluklar zanaat bira tarladan masaya, ham denim estetik synth nesciunt, muhtemelen onları duymadınız accusamus Labore sürdürülebilir VHS.
Animasyon pariatur klişe kınama, enim eiusmod yüksek yaşam accusamus terry richardson reklam kalamar. 3 wolf moon officia aute, cupidatat olmayan kaykay dolor brunch. Gıda kamyonu quinoa nesciunt Laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua üzerine bir kuş koyun kalamar tek kökenli kahve nulla varsaynda shoreditch et. Nihil anim keffiyeh helvetica, zanaat bira işçisi wes anderson cred nesciunt sapiente ea proident. Reklam vegan kasap yardımcısı lomo hariç. Tozluklar zanaat bira tarladan masaya, ham denim estetik synth nesciunt, muhtemelen onları duymadınız accusamus Labore sürdürülebilir VHS.

bootstrap-collapse.js'yi kullanma

Javascript ile etkinleştirin:

  1. $ ( ".daralt" ). çöküş ()

Seçenekler

İsim tip varsayılan tanım
ebeveyn seçici yanlış Seçici ise, bu daraltılabilir öğe gösterildiğinde belirtilen üst öğenin altındaki tüm daraltılabilir öğeler kapatılacaktır. (geleneksel akordeon davranışına benzer)
geçiş boole doğru Çağrı sırasında daraltılabilir öğeyi değiştirir

İşaretleme

Katlanabilir bir öğenin kontrolünü otomatik olarak atamak için bir öğeye data-toggle="collapse"ve bir öğeye eklemeniz yeterlidir. Öznitelik, daraltmanın uygulanacağı bir css seçiciyi kabul eder data-target. Sınıfı daraltılabilir öğeye data-targeteklediğinizden emin olun . collapseVarsayılan olarak açılmasını istiyorsanız, ek sınıfı ekleyin in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. basit katlanabilir
  3. </button>
  4.  
  5. <div id = "demo" class = "daralt" > </div>
Önüne bak! Daraltılabilir bir kontrole akordeon benzeri grup yönetimi eklemek için data niteliğini ekleyin data-parent="#selector". Bunu çalışırken görmek için demoya bakın.

yöntemler

.collapse(seçenekler)

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

  1. $ ( '#benimCollapsible' ). daralt ({
  2. geçiş : yanlış
  3. })

.collapse('geçiş')

Daraltılabilir bir öğeyi gösterilen veya gizli olarak değiştirir.

.collapse('göster')

Katlanabilir bir öğe gösterir.

.collapse('gizle')

Bir daraltılabilir öğeyi gizler.

Olaylar

Bootstrap'in daraltma sınıfı, daraltma işlevine 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, bir daraltma öğesi kullanıcıya görünür hale getirildiğinde tetiklenir (css geçişlerinin tamamlanmasını bekler).
saklamak hideBu olay, yöntem çağrıldığında hemen tetiklenir .
gizlenmiş Bu olay, bir daraltma öğesi kullanıcıdan gizlendiğinde tetiklenir (css geçişlerinin tamamlanmasını bekler).
  1. $ ( '#benimCollapsible' ). açık ( 'gizli' , işlev () {
  2. // bir şey yap…
  3. })

Hakkında

Herhangi bir form metin girişi ile hızlı bir şekilde zarif daktilolar oluşturmak için basit, kolayca genişletilen bir eklenti.

Dosyayı indir

Örnek

Daktilo sonuçlarını göstermek için aşağıdaki alana yazmaya başlayın.


bootstrap-typeahead.js'yi kullanma

Yazı tipini javascript ile arayın:

  1. $ ( '.typeahead' ). daktilo ()

Seçenekler

İsim tip varsayılan tanım
kaynak dizi [ ] Sorgulanacak veri kaynağı.
öğeler sayı 8 Açılır menüde görüntülenecek maksimum öğe sayısı.
eşleştirici işlev büyük/küçük harfe duyarsız Bir sorgunun bir öğeyle eşleşip eşleşmediğini belirlemek için kullanılan yöntem. itemSorgunun test edileceği tek bir bağımsız değişkeni kabul eder . Geçerli sorguya ile erişin this.query. trueSorgu bir eşleşme ise bir boole döndürün .
sıralayıcı işlev tam eşleşme, büyük/
küçük harfe duyarlı, büyük/küçük harfe
duyarsız
Otomatik tamamlama sonuçlarını sıralamak için kullanılan yöntem. Tek bir bağımsız değişkeni kabul eder itemsve typeahead örneğinin kapsamına sahiptir. Geçerli sorguyu ile referans alın this.query.
vurgulayıcı işlev tüm varsayılan eşleşmeleri vurgular Otomatik tamamlama sonuçlarını vurgulamak için kullanılan yöntem. Tek bir bağımsız değişkeni kabul eder itemve typeahead örneğinin kapsamına sahiptir. html döndürmeli.

İşaretleme

Daktilo işlevine sahip bir öğeyi kaydetmek için veri öznitelikleri ekleyin.

  1. <input type = "text" data-provide = "typeahead" >

yöntemler

.typeahead(seçenekler)

Yazılı bir girişi başlatır.