JavaScript

Şimdi 13 özel jQuery eklentisi ile Bootstrap bileşenlerini hayata geçirin.

Bireysel veya derlenmiş

Eklentiler tek tek dahil edilebilir (bazıları gerekli bağımlılıklara sahip olsa da) veya hepsi bir kerede dahil edilebilir. Hem bootstrap.js hem de bootstrap.min.js , tüm eklentileri tek bir dosyada içerir.

Veri öznitelikleri

Tüm Bootstrap eklentilerini, tek bir JavaScript satırı yazmadan yalnızca biçimlendirme API'si aracılığıyla kullanabilirsiniz. Bu, Bootstrap'in birinci sınıf API'sidir ve bir eklenti kullanırken ilk düşünceniz olmalıdır.

Bununla birlikte, bazı durumlarda bu işlevin kapatılması istenebilir. Bu nedenle, "data-api" ile isim alan gövde üzerindeki tüm olayların bağlantısını kaldırarak veri özniteliği API'sini devre dışı bırakma yeteneği de sağlıyoruz. Bu şuna benziyor:

  1. $ ( 'vücut' ). kapalı ( '.data-api' )

Alternatif olarak, belirli bir eklentiyi hedeflemek için, eklentinin adını aşağıdaki gibi data-api ad alanıyla birlikte ad alanı olarak eklemeniz yeterlidir:

  1. $ ( 'vücut' ). kapalı ( '.alert.data-api' )

Programatik API

Ayrıca, tüm Bootstrap eklentilerini yalnızca JavaScript API aracılığıyla kullanabilmeniz gerektiğine inanıyoruz. Tüm genel API'ler tek, zincirlenebilir yöntemlerdir ve üzerinde işlem yapılan koleksiyonu döndürür.

  1. $ ( ".btn.tehlike" ). düğmesi ( "geçiş" ). addClass ( "şişman" )

Tüm yöntemler, isteğe bağlı bir seçenekler nesnesini, belirli bir yöntemi hedefleyen bir dizeyi veya hiçbir şeyi (varsayılan davranışa sahip bir eklenti başlatan) kabul etmelidir:

  1. $ ( "#myModal" ). modal () // varsayılanlarla başlatıldı
  2. $ ( "#myModal" ). modal ({ klavye : yanlış }) // klavye olmadan başlatıldı
  3. $ ( "#myModal" ). modal ( 'show' ) // show'u hemen başlatır ve çağırır

Her eklenti aynı zamanda ham yapıcısını bir "Yapıcı" özelliği üzerinde gösterir: $.fn.popover.Constructor. Belirli bir eklenti örneği almak istiyorsanız, onu doğrudan bir öğeden alın: $('[rel=popover]').data('popover').

Çatışma yok

Bazen Bootstrap eklentilerini diğer UI çerçeveleriyle birlikte kullanmak gerekir. Bu durumlarda, zaman zaman ad alanı çakışmaları meydana gelebilir. Böyle bir durumda, .noConflictdeğerini geri almak istediğiniz eklentiyi arayabilirsiniz.

  1. var bootstrapButton = $ . fn . düğme . noConflict () // $.fn.button'u önceden atanan değere döndür
  2. $ . fn . bootstrapBtn = bootstrapButton // $().bootstrapBtn'ye önyükleme işlevini verin

Olaylar

Bootstrap, çoğu eklentinin benzersiz eylemleri için özel olaylar sağlar. Genellikle bunlar mastar ve geçmiş ortaç biçiminde gelir - burada mastar (örn. show) bir olayın başlangıcında tetiklenir ve geçmiş ortaç biçimi (örn. shown) bir eylemin tamamlanmasında tetiklenir.

Tüm mastar olayları, önlemeVarsayılan işlevselliği sağlar. Bu, bir eylemin yürütülmesini başlamadan önce durdurma yeteneği sağlar.

  1. $ ( '#myModal' ). on ( 'göster' , işlev ( e ) {
  2. if (! veri ) e döndürür . önlemeDefault () // kipin gösterilmesini durdurur
  3. })

Geçişler hakkında

Basit geçiş efektleri için, bootstrap-transition.js dosyasını diğer JS dosyalarının yanına ekleyin. Derlenmiş (veya küçültülmüş) bootstrap.js kullanıyorsanız , bunu eklemenize gerek yoktur; zaten oradadır.

Kullanım durumları

Geçiş eklentisine birkaç örnek:

  • Modallarda kayma veya solma
  • Soluk sekmeler
  • Sönen uyarılar
  • Sürgülü atlıkarınca bölmeleri

Örnekler

Modal'lar, gerekli minimum işlevsellik ve akıllı varsayılanlarla basitleştirilmiş ancak esnek iletişim istemleridir.

statik örnek

Altbilgide üstbilgi, gövde ve eylemler kümesiyle oluşturulmuş bir modal.

  1. <div class = "modal solmayı gizle" >
  2. <div sınıfı = "modal-başlık" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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" > Kapat </a>
  11. <a href = "#" class = "btn btn-birincil" > Değişiklikleri kaydet </a>
  12. </div>
  13. </div>

Canlı demo

Aşağıdaki düğmeyi tıklayarak bir modeli JavaScript aracılığıyla değiştirin. Aşağı kayar ve sayfanın üst kısmından kaybolur.

  1. <!-- Modu tetikleme düğmesi -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo modunu başlat </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal solmayı gizle" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div sınıfı = "modal-başlık" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Kalıcı başlık </h3>
  9. </div>
  10. <div sınıfı = "modal gövde" >
  11. <p> Güzel bir vücut… </p>
  12. </div>
  13. <div sınıfı = "modal-altbilgi" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Kapat </button>
  15. <button class = "btn btn-birincil" > Değişiklikleri kaydet </button>
  16. </div>
  17. </div>

kullanım

Veri öznitelikleri aracılığıyla

JavaScript yazmadan bir modeli etkinleştirin. Geçiş yapmak için belirli bir modu hedeflemek için veya data-toggle="modal"ile birlikte bir düğme gibi bir denetleyici öğesinde ayarlayın .data-target="#foo"href="#foo"

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Modu başlat </button>

JavaScript aracılığıyla

myModalTek bir JavaScript satırı ile kimliği olan bir model çağırın :

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-backdrop="".

İ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.
uzak yol yanlış

Uzak bir url sağlanırsa, içerik jQuery'nin yöntemiyle yüklenecek loadve .modal-body. Veri api'sini kullanıyorsanız, alternatif hrefolarak uzak kaynağı belirtmek için etiketi kullanabilirsiniz. Bunun bir örneği aşağıda gösterilmiştir:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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

Gezinme çubuğundaki örnek

ScrollSpy eklentisi, kaydırma konumuna göre gezinme hedeflerini otomatik olarak güncellemek içindir. Gezinme çubuğunun altındaki alanı kaydırın ve aktif sınıf değişimini izleyin. Açılır alt öğeler de vurgulanacaktır.

@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 duymadınız 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.


kullanım

Veri öznitelikleri aracılığıyla

Üst çubuk navigasyonunuza kolayca scrollspy davranışı eklemek data-spy="scroll"için, gözetlemek istediğiniz öğeye ekleyin (genellikle bu gövde olur) ve data-target=".navbar"hangi navigasyonun kullanılacağını seçin. .navBir bileşenle scrollspy kullanmak isteyeceksiniz .

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

JavaScript aracılığıyla

JavaScript ile scrollspy'ı arayın:

  1. $ ( '#navbar' ). kaydırma casusu ()
Ö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

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-offset="".

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

Örnek sekmeler

Açılır menüler aracılığıyla bile yerel içerik bölmeleri arasında geçiş yapmak için hızlı, dinamik sekme işlevi ekleyin.

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.


kullanım

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

Bir öğeyi basitçe belirterek data-toggle="tab"veya üzerinde JavaScript yazmadan bir sekmeyi veya hap navigasyonunu etkinleştirebilirsiniz . Sekmeye ve sınıfları data-toggle="pill"eklemek , Bootstrap sekme stilini uygular.navnav-tabsul

  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 nav-tabs" 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. })

Örnekler

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 öznitelikleri kullanan güncellenmiş bir sürümdür.

Performans nedenleriyle, araç ipucu ve açılır veri apileri etkinleştirilmiştir, yani bunları kendiniz başlatmanız gerekir .

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.

dört yön

Giriş gruplarındaki araç ipuçları

Önyükleme giriş gruplarıyla araç ipuçlarını ve açılır pencereleri kullanırken, containeristenmeyen yan etkilerden kaçınmak için (aşağıda belgelenmiştir) seçeneğini ayarlamanız gerekir.


kullanım

Araç ipucunu JavaScript aracılığıyla tetikleyin:

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".

İsim tip varsayılan tanım
animasyon boole doğru araç ipucuna bir css soluk geçişi uygula
html boole yanlış Araç ipucuna html ekleyin. Yanlışsa, dom'a textiçerik eklemek için jquery'nin yöntemi kullanılacaktır. XSS saldırılarından endişe ediyorsanız metin kullanın.
atama dize | işlev '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 'vurgulu odak' ipucu nasıl tetiklenir - tıklayın | üzerine gelin | odak | Manuel. Tetikleyici çoklu, boşlukla ayrılmış, tetikleyici türlerini geçtiğinizi unutmayın.
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 }

konteyner dize | yanlış yanlış

Araç ipucunu belirli bir öğeye eklercontainer: 'body'

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

İşaretleme

  1. <a href = "#" data-toggle = "tooltip" title = "ilk araç ipucu" > fareyle üzerime gelin </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ş' )

.tooltip('yok et')

Bir öğenin ipucunu gizler ve yok eder.

  1. $ ( '#eleman' ). araç ipucu ( 'yok et' )

Örnekler

İkincil bilgileri barındırmak için herhangi bir öğeye iPad'deki gibi küçük içerik katmanları ekleyin. Popover'ı tetiklemek için düğmenin üzerine gelin. Araç ipucunun dahil edilmesini gerektirir .

statik popover

Dört seçenek mevcuttur: üst, sağ, alt ve sola hizalı.

Popover üst

Lobortis'teki Sed Posuere Consectetur est. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

sağ popover

Lobortis'teki Sed Posuere Consectetur est. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover alt

Lobortis'teki Sed Posuere Consectetur est. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

sol popover

Lobortis'teki Sed Posuere Consectetur est. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

dataJavaScript'ten ve bir öznitelik içindeki içerikten popover'lar olarak gösterilen hiçbir işaretleme oluşturulmaz .

Canlı demo

dört yön


kullanım

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

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-animation="".

İsim tip varsayılan tanım
animasyon boole doğru araç ipucuna bir css soluk geçişi uygula
html boole yanlış Popover'a html ekleyin. Yanlışsa, dom'a textiçerik eklemek için jquery'nin yöntemi kullanılacaktır. XSS saldırılarından endişe ediyorsanız metin kullanın.
atama dize | işlev '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 'Tıklayın' popover nasıl tetiklenir - tıklayın | ü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 }

konteyner dize | yanlış yanlış

Popover'ı belirli bir öğeye eklercontainer: 'body'

Ö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ş' )

.popover('yok et')

Bir öğenin popover'ını gizler ve yok eder.

  1. $ ( '#eleman' ). popover ( 'yok etmek' )

Örnek uyarılar

Bu eklenti ile tüm uyarı mesajlarına kapatma işlevi ekleyin.

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


kullanım

JavaScript aracılığıyla bir uyarının kapatılmasını etkinleştir:

  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. $ ( '#uyartım' ). bağlama ( 'kapalı' , işlev () {
  2. // bir şey yap…
  3. })

Örnek kullanımlar

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.

durum bilgisi

data-loading-text="Loading..."Bir düğmede yükleme durumu kullanmak için ekleyin .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Yükleniyor..." > Yükleme durumu </button>

Tek geçiş

data-toggle="button"Tek bir düğme üzerinde geçişi etkinleştirmek için ekleyin .

  1. <button type = "button" class = "btn btn-birincil" data-toggle = "button" > Tek Geçiş </button>

onay kutusu

data-toggle="buttons-checkbox"btn-group'ta geçiş yapan onay kutusu stili için ekleyin .

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-birincil" > Sol </button>
  3. <button type = "button" class = "btn btn-birincil" > Orta </button>
  4. <button type = "button" class = "btn btn-birincil" > Sağ </button>
  5. </div>

Radyo

data-toggle="buttons-radio"btn-group'ta radyo stili geçişi için ekleyin .

  1. <div class = "btn-group" data-toggle = "düğmeler-radyo" >
  2. <button type = "button" class = "btn btn-birincil" > Sol </button>
  3. <button type = "button" class = "btn btn-birincil" > Orta </button>
  4. <button type = "button" class = "btn btn-birincil" > Sağ </button>
  5. </div>

kullanım

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.

Seçenekler

Hiçbiri

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 type = "button" class = "btn" data-toggle = "button" > </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.

  1. <button type = "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 type = "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.

* 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.
  1. <div class = "akordeon" id = "akordeon2" >
  2. <div class = "akordeon grubu" >
  3. <div class = "akordeon başlığı" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Katlanabilir Grup Öğesi #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akordeon gövdesi çökmesi" >
  9. <div class = "akordeon-iç" >
  10. Animasyon klişesi...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akordeon grubu" >
  15. <div class = "akordeon başlığı" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Katlanabilir Grup Öğesi #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akordeon gövdesi çökmesi" >
  21. <div class = "akordeon-iç" >
  22. Animasyon klişesi...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Eklentiyi akordeon işareti olmadan da kullanabilirsiniz. Başka bir öğenin genişletilmesi ve daraltılması arasında geçiş yapan bir düğme yapın.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. basit katlanabilir
  3. </button>
  4.  
  5. <div id = "demo" class = "daralt" > </div>

kullanım

Veri öznitelikleri aracılığıyla

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.

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.

JavaScript aracılığıyla

Şunlarla manuel olarak etkinleştirin:

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

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-parent="".

İ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

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. })

Example

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

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

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.


Usage

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

Name type default description
source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
items number 8 The max number of items to display in the dropdown.
minLength number 1 The minimum character length needed before triggering autocomplete suggestions
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Methods

.typeahead(options)

Initializes an input with a typeahead.

Example

The subnavigation on the left is a live demo of the affix plugin.


Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

  1. <div data-spy="affix" data-offset-top="200">...</div>
Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

Via JavaScript

Call the affix plugin via JavaScript:

  1. $('#navbar').affix()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name type default description
offset number | function | object 10 Kaydırma konumu hesaplanırken ekrandan kaydırılacak pikseller. Tek bir sayı verilirse, ofset hem üst hem de sol yönde uygulanacaktır. Tek bir yönü veya birden çok benzersiz ofseti dinlemek için bir nesne sağlamanız yeterlidir offset: { x: 10 }. Dinamik olarak bir ofset sağlamanız gerektiğinde bir işlev kullanın (bazı duyarlı tasarımlar için kullanışlıdır).