JavaScript

Bootstrap komponentlarini jonlantiring — endi 13 ta maxsus jQuery plaginlari bilan.

Individual yoki tuzilgan

Plaginlar alohida-alohida (ba'zilarida zarur bo'lgan bog'liqliklarga ega bo'lsa ham) yoki bir vaqtning o'zida kiritilishi mumkin. Bootstrap.js ham , bootstrap.min.js ham bitta fayldagi barcha plaginlarni o'z ichiga oladi.

Ma'lumotlar atributlari

Siz barcha Bootstrap plaginlaridan JavaScript-ning bir qatorini yozmasdan faqat belgilash API orqali foydalanishingiz mumkin. Bu Bootstrap’ning birinchi sinf API’si bo‘lib, plaginni ishlatishda birinchi navbatda e’tiborga olish kerak.

Aytgancha, ba'zi hollarda ushbu funksiyani o'chirib qo'yish maqsadga muvofiq bo'lishi mumkin. Shuning uchun biz `'data-api'` bilan tana nomlari oralig'idagi barcha hodisalarni bekor qilish orqali API ma'lumotlar atributini o'chirish imkoniyatini ham taqdim etamiz. Bu shunday ko'rinadi:

  1. $ ( 'tana' ). o'chirilgan ( '.data-api' )

Shu bilan bir qatorda, ma'lum bir plaginni maqsad qilish uchun plagin nomini quyidagi kabi data-api nom maydoni bilan birga nom maydoni sifatida kiriting:

  1. $ ( 'tana' ). o'chirilgan ( '.alert.data-api' )

Dasturli API

Shuningdek, biz barcha Bootstrap plaginlarini faqat JavaScript API orqali ishlatishingiz kerakligiga ishonamiz. Barcha ommaviy API’lar yagona, zanjirband bo‘ladigan usullar bo‘lib, ular bajarilgan to‘plamni qaytaradi.

  1. $ ( ".btn.danger" ). tugmasi ( "o'tish" ). addClass ( "yog '" )

Barcha usullar ixtiyoriy variantlar ob'ektini, ma'lum bir usulga mo'ljallangan qatorni yoki hech narsani (standart xatti-harakat bilan plaginni ishga tushiradigan) qabul qilishi kerak:

  1. $ ( "#myModal" ). modal () // sukut bo'yicha ishga tushirildi
  2. $ ( "#myModal" ). modal ({ klaviatura : false }) // klaviaturasiz ishga tushirildi
  3. $ ( "#myModal" ). modal ( 'show' ) // ko'rsatishni darhol ishga tushiradi va chaqiradi

Har bir plagin o'zining xom konstruktorini "Konstruktor" xususiyatida ham ko'rsatadi: $.fn.popover.Constructor. Agar siz ma'lum bir plagin namunasini olishni istasangiz, uni to'g'ridan-to'g'ri elementdan oling: $('[rel=popover]').data('popover').

Mojaro yo'q

Ba'zan boshqa UI ramkalari bilan Bootstrap plaginlaridan foydalanish kerak bo'ladi. Bunday sharoitda, vaqti-vaqti bilan nomlar maydoni to'qnashuvi sodir bo'lishi mumkin. Agar bu ro'y bersa, siz .noConflictqiymatini qaytarishni xohlagan plaginga qo'ng'iroq qilishingiz mumkin.

  1. var bootstrapButton = $ . fn . tugmasi . noConflict () // $.fn.tugmasini oldindan tayinlangan qiymatga qaytaring
  2. $ . fn . bootstrapBtn = bootstrapButton // $().bootstrapBtn yuklash funksiyasini bering.

Voqealar

Bootstrap ko'pgina plaginlarning noyob harakatlari uchun maxsus tadbirlarni taqdim etadi. Odatda, bular infinitiv va o‘tgan zamon shaklida bo‘ladi - bunda infinitiv (masalan show, ) hodisa boshida ishga tushadi va uning o‘tgan zamon shakli (masalan shown, ) ish-harakat tugagach tetiklanadi.

Barcha infinitive hodisalar preventDefault funksiyasini ta'minlaydi. Bu harakat boshlanishidan oldin uning bajarilishini to'xtatish imkoniyatini beradi.

  1. $ ( '#myModal' ). on ( 'ko'rsatish' , funktsiya ( e ) {
  2. bo'lsa (! ma'lumotlar ) qaytib e . preventDefault () // modal ko'rsatilishini to'xtatadi
  3. })

O'tishlar haqida

Oddiy o'tish effektlari uchun boshqa JS fayllari qatoriga bootstrap-transition.js ni bir marta qo'shing. Agar siz kompilyatsiya qilingan (yoki kichiklashtirilgan) bootstrap.js dan foydalanayotgan bo'lsangiz, buni kiritishning hojati yo'q - u allaqachon mavjud.

Foydalanish holatlari

O'tish plaginiga bir nechta misollar:

  • Modallarda siljish yoki pasayish
  • Yo'qolgan yorliqlar
  • Yo'qolgan ogohlantirishlar
  • Sürgülü karusel panellari

Misollar

Modallar soddalashtirilgan, ammo moslashuvchan, minimal talab qilinadigan funksionallik va aqlli standart sozlamalar bilan muloqot oynasi takliflari.

Statik misol

Sarlavhasi, tanasi va pastki kolontitradagi amallar to'plami bilan ko'rsatilgan modal.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "tugma" klassi = "yopish" data-dississ = "modal" aria-hidden = "to'g'ri" > × </button>
  4. <h3> Modal sarlavha </h3>
  5. </div>
  6. <div class = "modal-tana" >
  7. <p> Bitta nozik tana... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Yopish </a>
  11. <a href = "#" class = "btn btn-primary" > O‘zgarishlarni saqlash </a>
  12. </div>
  13. </div>

Jonli demo

Quyidagi tugmani bosish orqali modalni JavaScript orqali almashtiring. U pastga siljiydi va sahifaning yuqori qismidan o'chib ketadi.

  1. <!-- Modalni ishga tushirish tugmasi -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo modalni ishga tushirish </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "yopish" data-dississ = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal sarlavha </h3>
  9. </div>
  10. <div class = "modal-tana" >
  11. <p> Bitta nozik tana... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dississ = "modal" aria-hidden = "true" > Yopish </button>
  15. <button class = "btn btn-primary" > O‘zgarishlarni saqlash </button>
  16. </div>
  17. </div>

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript yozmasdan modalni faollashtiring. data-toggle="modal"Tugma kabi boshqaruv elementiga data-target="#foo"yoki href="#foo"oʻzgartirish uchun maʼlum modalni nishonga olish uchun oʻrnating .

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Modalni ishga tushirish </button>

JavaScript orqali

myModalBir qator JavaScript bilan identifikatorli modalni chaqiring :

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

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-backdrop="".

Ism turi standart tavsifi
fon mantiqiy rost Modal fon elementini o'z ichiga oladi. Shu bilan bir qatorda, staticbosilganda modalni yopmaydigan fon uchun belgilang.
klaviatura mantiqiy rost Escape tugmasi bosilganda modalni yopadi
ko'rsatish mantiqiy rost Initsializatsiya qilinganda modalni ko'rsatadi.
masofaviy yo'l yolg'on

loadAgar masofaviy url taqdim etilsa, kontent jQuery usuli orqali yuklanadi va .modal-body. Agar siz ma'lumotlar api-dan foydalanayotgan bo'lsangiz href, masofaviy manbani belgilash uchun muqobil tegdan foydalanishingiz mumkin. Bunga misol quyida ko'rsatilgan:

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

Usullari

.modal(variantlar)

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

  1. $ ( '#myModal' ). modal ({
  2. klaviatura : noto'g'ri
  3. })

.modal('toggle')

Modalni qo'lda almashtiradi.

  1. $ ( '#myModal' ). modal ( "o'tish" )

.modal('shou')

Modalni qo'lda ochadi.

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

.modal('yashirish')

Modalni qo'lda yashiradi.

  1. $ ( '#myModal' ). modal ( "yashirish" )

Voqealar

Bootstrap-ning modal klassi modal funksionallikka ulanish uchun bir nechta hodisalarni ochib beradi.

Tadbir Tavsif
ko'rsatish Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan Ushbu hodisa modal foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
yashirish Ushbu hodisa hidemisol usuli chaqirilganda darhol o'chiriladi.
yashirin Ushbu hodisa modal foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi).
  1. $ ( '#myModal' ). on ( 'yashirin' , funktsiya () {
  2. // biror narsa qilmoq…
  3. })

Navbardagi misol

ScrollSpy plagini o'tish joyiga qarab navbat maqsadlarini avtomatik ravishda yangilash uchun mo'ljallangan. Navbar ostidagi maydonni aylantiring va faol sinf o'zgarishini kuzating. Ochiladigan pastki elementlar ham ta'kidlanadi.

@yog'

Reklama leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ular qui sotilgan oldin. Tumblr fermer xo'jaligidan stolga velosiped huquqlari. Anim keffiyeh carles kardigan. Velit seitan mcsweeney foto stend 3 bo'ri oy irure. Cosby sviter lomo jinsi shortilar, Uilyamsburg hoodie minim qui siz ular haqida eshitmagan bo'lsangiz kerak va kardigan ishonch fondi culpa biodiesel Wes Anderson estetik. Nihil tattooed accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mo'ylovli skeytbord, adipisicing fugiat velit pitchfork soqol. Freegan soqollari mcsweeney's ko'rinishida. Cupidatat to'rt loko nisi, ea helvetica nulla carles. Tatuirovka qilingan kosbi kozok oziq-ovqat yuk mashinasi, Mcsweeney's quis non freegan vinyl. Lo-fi Wes Anderson +1 sartorial. Karlesning estetik bo'lmagan mashqlari g'ayrioddiy. Bruklin adipisicing hunarmand pivo vitse keytar deserunt.

bitta

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skeytbord ea. Lomo velosiped huquqlari adipisicing banh mi, velit ea sunt the next level is locavore in one-child coffee in magna Veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipiscing. DIY minimal messenjer sumkasidan foydalanish. Cred ex in, iphone uchun barqaror delectus consectetur fanny pack.

ikki

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 messenger bag marfa whatever delectus food truck. Sintetik identifikatorni aniqlang. Locavore sed helvetica cliche irony, momaqaldiroqlar, ehtimol siz ular haqida eshitmagan bo'lsangiz ham, hoodie glyutensiz lo-fi fap aliquip. Ular sotilishidan oldin mehnatkashlar, Terri Richardson, hunarmandning kosbi kozoklari bo'lgan brunch nesciunt quis cosby. Cardigan craft pivo seitan tayyor velit. VHS chambray laboris tempor veniam. Anim mollit minimal commodo ullamco thundercats.


Foydalanish

Ma'lumotlar atributlari orqali

Yuqori paneldagi navigatsiyaga osongina scrollspy xatti-harakatini qo'shish data-spy="scroll"uchun josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu korpus bo'ladi) va data-target=".navbar"qaysi navbatni ishlatishni tanlang. Siz komponent bilan scrollspy dan foydalanmoqchisiz .nav.

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

JavaScript orqali

JavaScript orqali scrollspy-ga qo'ng'iroq qiling:

  1. $ ( '#navbar' ). scrollspy ()
Oldindan qisqa ma'lumot berish! Navbar havolalarida hal qilinadigan id maqsadlari boʻlishi kerak. Masalan, <a href="#home">home</a>domdagi kabi bir narsaga must mos keladi <div id="home"></div>.

Usullari

.scrollspy('yangilash')

Scrollspy-dan DOM-ga elementlarni qo'shish yoki olib tashlash bilan birgalikda foydalanilganda, siz yangilash usulini shunday chaqirishingiz kerak bo'ladi:

  1. $ ( '[data-spy="scroll"]' ). har bir ( funktsiya () {
  2. var $spy = $ ( bu ). scrollspy ( "yangilash" )
  3. });

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset="".

Ism turi standart tavsifi
ofset raqam 10 O'tkazish joyini hisoblashda yuqoridan siljish uchun piksellar.

Voqealar

Tadbir Tavsif
faollashtirish Bu voqea har safar yangi element scrollspy tomonidan faollashtirilganda boshlanadi.

Misol yorliqlari

Mahalliy kontent panellari orqali, hatto ochiladigan menyular orqali ham o‘tish uchun tezkor, dinamik yorliq funksiyasini qo‘shing.

Raw denim, ehtimol siz ular haqida eshitmagansiz jinsi shortilar Ostin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mo'ylovli klişe tempor, Williamsburg Carles vegan helvetica. Reprehenderit qassob retro keffiyeh dreamcatcher synth. Cosby sviter eu banh mi, qui irure Terri Richardson sobiq kalamar. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, qassob 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.


Foydalanish

JavaScript orqali yorliqli yorliqlarni yoqish (har bir yorliq alohida faollashtirilishi kerak):

  1. $ ( '#mening Tab a' ). bosing ( funksiya ( e ) {
  2. e . preventDefault ();
  3. $ ( bu ). tab ( "ko'rsatish" );
  4. })

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( "ko'rsatish" ); // Yorliqni nomi bo'yicha tanlang
  2. $ ( '#myTab a:first' ). tab ( "ko'rsatish" ); // Birinchi yorliqni tanlang
  3. $ ( '#myTab a:oxirgi' ). tab ( "ko'rsatish" ); // Oxirgi yorliqni tanlang
  4. $ ( '#myTab li:eq(2) a' ). tab ( "ko'rsatish" ); // Uchinchi yorliqni tanlang (0-indekslangan)

Belgilash

Siz biron bir JavaScript-ni yozmasdan, oddiygina elementni ko'rsatish data-toggle="tab"yoki ustiga kiritish orqali yorliq yoki tabletka navigatsiyasini faollashtirishingiz mumkin. data-toggle="pill"Yorliqga navva nav-tabssinflarini qo'shish ulBootstrap yorlig'i uslubini qo'llaydi.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Bosh sahifa </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Xabarlar </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Sozlamalar </a></li>
  6. </ul>

Usullari

$().tab

Yorliq elementi va kontent konteynerini faollashtiradi. Yorliqda DOM-dagi konteyner tuguniga mo'ljallangan data-targetyoki a bo'lishi kerak .href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Bosh sahifa </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Xabarlar </a></li>
  5. <li><a href = "#settings" > Sozlamalar </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "xabarlar" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <skript>
  16. $ ( funktsiya () {
  17. $ ( '#myTab a:oxirgi' ). tab ( "ko'rsatish" );
  18. })
  19. </script>

Voqealar

Tadbir Tavsif
ko'rsatish Bu voqea tab ko'rsatishda boshlanadi, lekin yangi tab ko'rsatilishidan oldin. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.targetfoydalaning .event.relatedTarget
ko'rsatilgan Bu voqea varaq koʻrsatilgandan soʻng yorliqlar koʻrinishida ishga tushadi. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.targetfoydalaning .event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'ko'rsatilgan' , funktsiya ( e ) {
  2. e . maqsad // faollashtirilgan yorliq
  3. e . bog'liqTarget // oldingi yorliq
  4. })

Misollar

Jeyson Frame tomonidan yozilgan mukammal jQuery.tipsy plaginidan ilhomlangan; Maslahatlar yangilangan versiya boʻlib, u tasvirlarga tayanmaydi, animatsiyalar uchun CSS3 va mahalliy sarlavhalarni saqlash uchun maʼlumotlar atributlaridan foydalanadi.

Ishlash sabablariga ko'ra, asboblar maslahati va popover data-apis qo'shilgan, ya'ni ularni o'zingiz ishga tushirishingiz kerak .

Maslahatlarni ko'rish uchun kursorni quyidagi havolalar ustiga olib boring:

Qattiq shimlar keyingi darajadagi keffiyeh , ehtimol siz ular haqida eshitmagansiz. Foto stend soqol xom denim letterpress vegan messenger sumkasi Stumptown. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-bit amerikan kiyimida terri Richardson vinil chambray bor . Beard stumptown, kardiganlar banh mi lomo thundercats. Tofu biodizel Uilyamsburg marfa, to'rt loko mcsweeney ning tozalovchi vegan chambray. A, albatta, istehzoli hunarmand nima bo'lishidan qat'iy nazar, keytar , scenester farm-to-stol banksy Austin twitter handle freegan cred raw denim single-origin coffee virus.

To'rt yo'nalish

Kirish guruhlari uchun maslahatlar

Bootstrap kiritish guruhlari bilan maslahatlar va popoverlardan foydalanganda, containerkiruvchi nojo'ya ta'sirlarni oldini olish uchun (quyida hujjatlashtirilgan) opsiyasini o'rnatishingiz kerak bo'ladi.


Foydalanish

JavaScript orqali asboblar maslahatini ishga tushiring:

  1. $ ( '#misol' ). maslahat ( variantlar )

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Ism turi standart tavsifi
animatsiya mantiqiy rost asboblar maslahatiga CSS fade o'tishni qo'llang
html mantiqiy yolg'on Maslahatga html kiriting. Agar noto'g'ri bo'lsa, jQuery textusuli domga tarkib kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning.
joylashtirish string | funktsiyasi "yuqori" Maslahatni qanday joylashtirish kerak - tepa | pastki | chap | to'g'ri
selektor ip yolg'on Agar selektor taqdim etilsa, asboblar paneli ob'ektlari belgilangan maqsadlarga topshiriladi.
sarlavha string | funktsiyasi '' `title` tegi mavjud bo'lmasa, standart sarlavha qiymati
tetik ip 'fokusni ko'tarish' asboblar maslahati qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. E'tibor bering, pass trigger ko'p, bo'sh joy ajratilgan, trigger turlari.
kechikish raqam | ob'ekt 0

asboblar maslahatini ko'rsatish va yashirishni kechiktirish (ms) - qo'lda ishga tushirish turiga taalluqli emas

Agar raqam berilsa, yashirish/ko'rsatish uchun ham kechikish qo'llaniladi

Ob'ekt tuzilishi:delay: { show: 500, hide: 100 }

idish string | yolg'on yolg'on

Maslahatni ma'lum bir elementga qo'shadicontainer: 'body'

Oldindan qisqa ma'lumot berish! Alohida maslahatlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali muqobil ravishda belgilanishi mumkin.

Belgilash

  1. <a href = "#" data-toggle = "tooltip" title = "birinchi maslahat" > kursorni mening ustimga olib keling </a>

Usullari

$().maslahat (variantlar)

Elementlar to'plamiga asboblar paneli ishlov beruvchisini biriktiradi.

.tooltip('shou')

Elementning asboblar maslahatini ko'rsatadi.

  1. $ ( '#element' ). maslahat ( 'ko'rsatish' )

.tooltip('yashirish')

Elementning asboblar maslahatini yashiradi.

  1. $ ( '#element' ). maslahatchi ( 'yashirish' )

.tooltip('almashtirish')

Elementning asboblar maslahatini almashtiradi.

  1. $ ( '#element' ). asboblar maslahati ( "o'tish" )

.tooltip('yo'q qilish')

Elementning asboblar maslahatini yashiradi va yo'q qiladi.

  1. $ ( '#element' ). maslahatchi ( 'yo'q qilish' )

Misollar

Ikkilamchi ma'lumotni saqlash uchun har qanday elementga, iPad'dagi kabi kontentning kichik qatlamlarini qo'shing. Qalqib chiquvchi tugmani ishga tushirish uchun kursorni ustiga bosing. Asboblar maslahatini qo'shishni talab qiladi .

Statik popover

To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.

Popover tepasi

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

Popover o'ngda

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

Popover pastki

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

Popover ketdi

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.

dataJavaScript va atribut tarkibidagi kontentdan popover sifatida ko'rsatilmagan hech qanday belgilash .

Jonli demo

To'rt yo'nalish


Foydalanish

JavaScript orqali popoverlarni yoqish:

  1. $ ( '#misol' ). popover ( variantlar )

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Ism turi standart tavsifi
animatsiya mantiqiy rost asboblar maslahatiga CSS fade o'tishni qo'llang
html mantiqiy yolg'on Popoverga html kiriting. Agar noto'g'ri bo'lsa, jQuery textusuli domga tarkib kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning.
joylashtirish string | funktsiyasi "to'g'ri" popoverni qanday joylashtirish mumkin - tepa | pastki | chap | to'g'ri
selektor ip yolg'on agar selektor taqdim etilsa, asboblar paneli ob'ektlari belgilangan maqsadlarga topshiriladi
tetik ip "bosish" popover qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma
sarlavha string | funktsiyasi '' `title` atributi mavjud bo'lmasa, standart sarlavha qiymati
mazmuni string | funktsiyasi '' “data-content” atributi mavjud bo'lmasa, standart kontent qiymati
kechikish raqam | ob'ekt 0

popoverni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda tetiklash turiga taalluqli emas

Agar raqam berilsa, yashirish/ko'rsatish uchun ham kechikish qo'llaniladi

Ob'ekt tuzilishi:delay: { show: 500, hide: 100 }

idish string | yolg'on yolg'on

Popoverni ma'lum bir elementga qo'shadicontainer: 'body'

Oldindan qisqa ma'lumot berish! Alohida popoverlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali muqobil ravishda belgilanishi mumkin.

Belgilash

Ishlash sabablariga ko'ra, Tooltip va Popover data-apis qo'shiladi. Agar ulardan foydalanmoqchi bo'lsangiz, shunchaki selektor opsiyasini belgilang.

Usullari

$().popover(variantlar)

Elementlar to'plami uchun popoverlarni ishga tushiradi.

.popover('shou')

Popover elementlarini ochib beradi.

  1. $ ( '#element' ). popover ( "shou" )

.popover('yashirish')

Qalqib chiquvchi elementlarni yashiradi.

  1. $ ( '#element' ). popover ( "yashirish" )

.popover('toggle')

Qalqib chiquvchi elementlarni almashtiradi.

  1. $ ( '#element' ). popover ( "o'tish" )

.popover('yo'q qilish')

Elementning popoverini yashiradi va yo'q qiladi.

  1. $ ( '#element' ). popover ( "yo'q qilish" )

Ogohlantirishlarga misollar

Ushbu plagin yordamida barcha ogohlantirish xabarlariga oʻchirish funksiyasini qoʻshing.

Muqaddas guakamol! O'zingizni tekshirib ko'ring, siz unchalik yaxshi ko'rinmaysiz.

Oh, chaqqon! Sizda xatolik bor!

Buni va buni o'zgartiring va qayta urinib ko'ring. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Ushbu harakatni bajaring Yoki buni qiling


Foydalanish

JavaScript orqali ogohlantirishni o'chirishni yoqing:

  1. $ ( ".alert" ). ogohlantirish ()

Belgilash

data-dismiss="alert"Avtomatik ravishda ogohlantirish funksiyasini berish uchun yopish tugmachangizga qo'shing .

  1. <a class = "yopish" data-dississ = "alert" href = "#" > × </a>

Usullari

$().alert()

Barcha ogohlantirishlarni yaqin funksionallik bilan o'rab oladi. Ogohlantirishlaringiz yopilganda jonlantirilishi uchun ularda .fadeva .insinfi allaqachon qo'llanilganligiga ishonch hosil qiling.

.alert('yopish')

Ogohlantirishni yopadi.

  1. $ ( ".alert" ). ogohlantirish ( "yopish" )

Voqealar

Bootstrap ning ogohlantirish klassi ogohlantirish funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

Tadbir Tavsif
yaqin Ushbu hodisa closemisol usuli chaqirilganda darhol ishga tushadi.
yopiq Ogohlantirish yopilgandan so'ng, bu hodisa ishga tushiriladi (css o'tishlari tugashini kutadi).
  1. $ ( '#mening ogohlantirishim' ). bog'lash ( 'yopiq' , funktsiya () {
  2. // biror narsa qilmoq…
  3. })

Foydalanish misollari

Tugmalar yordamida ko'proq harakat qiling. Boshqaruv tugmasi asboblar paneli kabi ko'proq komponentlar uchun tugmalar guruhlarini belgilaydi yoki yaratadi.

Davlatga tegishli

data-loading-text="Loading..."Tugmadagi yuklanish holatidan foydalanish uchun qo'shing .

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Yuklanmoqda..." > Yuklanmoqda holati </button>

Yagona almashtirish

data-toggle="button"Bitta tugma orqali almashtirishni faollashtirish uchun qo'shing .

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Yagona o‘tish tugmasi </button>

Belgilash katagi

data-toggle="buttons-checkbox"btn-group-da belgilash qutisi uslubini almashtirish uchun qo'shing .

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Chap </button>
  3. <button type = "button" class = "btn btn-primary" > O'rta </button>
  4. <button type = "button" class = "btn btn-primary" > O‘ng </button>
  5. </div>

Radio

data-toggle="buttons-radio"btn-group-da radio uslubini almashtirish uchun qo'shing .

  1. <div class = "btn-group" data-toggle = "tugmalar-radio" >
  2. <button type = "button" class = "btn btn-primary" > Chap </button>
  3. <button type = "button" class = "btn btn-primary" > O'rta </button>
  4. <button type = "button" class = "btn btn-primary" > O‘ng </button>
  5. </div>

Foydalanish

JavaScript orqali tugmalarni yoqish:

  1. $ ( '.nav-tabs' ). tugmasi ()

Belgilash

Ma'lumotlar atributlari tugma plaginining ajralmas qismidir. Turli xil belgilash turlari uchun quyidagi misol kodini tekshiring.

Variantlar

Yo'q

Usullari

$().tugmasi("oʻtish")

Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.

Oldindan qisqa ma'lumot berish! Atribut yordamida tugmani avtomatik almashtirishni yoqishingiz mumkin data-toggle.
  1. <button type = "button" class = "btn" data-toggle = "tugma" > </button>

$().tugma ('yuklanmoqda')

Tugma holatini yuklash uchun o'rnatadi - tugmani o'chiradi va matnni yuklash matniga almashtiradi. Matnni yuklash ma'lumotlar atributidan foydalangan holda tugma elementida aniqlanishi kerak data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "matn yuklanmoqda..." > ... </button>
Oldindan qisqa ma'lumot berish! Firefox o'chirilgan holatni sahifa yuklarida saqlab qoladi . Buning uchun vaqtinchalik yechim foydalanish hisoblanadi autocomplete="off".

$().tugmasi("qayta o'rnatish")

Tugma holatini tiklaydi - matnni asl matnga almashtiradi.

$().tugma (string)

Tugma holatini tiklash - matnni har qanday ma'lumot bilan belgilangan matn holatiga almashtiradi.

  1. <button type = "button" class = "btn" data-complete-text = "tugallandi!" > ... </tugmasi>
  2. <skript>
  3. $ ( '.btn' ). tugmasi ( "to'liq" )
  4. </script>

Haqida

Akkordeon va navigatsiya kabi yig‘iladigan komponentlar uchun asosiy uslublar va moslashuvchan yordam oling.

* Transitions plaginini qo'shishni talab qiladi.

Misol uchun akkordeon

Yiqilish plaginidan foydalanib, biz oddiy akkordeon uslubi vidjetini yaratdik:

Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
  1. <div class = "akkordeon" id = "akkordeon2" >
  2. <div class = "akkordeon guruhi" >
  3. <div class = "akkordeon sarlavhasi" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Yigʻiladigan guruh elementi №1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akkordeon tanasi qulashi" >
  9. <div class = "akkordeon-ichki" >
  10. Anim pariatur klişe...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akkordeon guruhi" >
  15. <div class = "akkordeon sarlavhasi" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Yig'iladigan guruh elementi №2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akkordeon-tananing qulashi" >
  21. <div class = "akkordeon-ichki" >
  22. Anim pariatur klişe...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Siz plaginni akkordeon belgisisiz ham ishlatishingiz mumkin. Boshqa elementning kengayishi va siqilishini almashtirish tugmachasini yarating.

  1. <tugma turi = "tugma" klassi = "btn btn-danger" data-toggle = "qulash" data-target = "#demo" >
  2. oddiy yig'iladigan
  3. </button>
  4.  
  5. <div id = "demo" class = "yiqilish" > </div>

Foydalanish

Ma'lumotlar atributlari orqali

Yigʻiladigan element boshqaruvini avtomatik belgilash uchun elementga data-toggle="collapse"va a qoʻshing . data-targetAtribut data-targetsiqishni qo'llash uchun CSS selektorini qabul qiladi. collapseSinfni yig'iladigan elementga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing in.

Akkordeonga o'xshash guruh boshqaruvini yig'iladigan boshqaruvga qo'shish uchun ma'lumotlar atributini qo'shing data-parent="#selector". Buni amalda ko'rish uchun demoga qarang.

JavaScript orqali

Qo'lda yoqish:

  1. $ ( “.qulash” ). qulash ()

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-parent="".

Ism turi standart tavsifi
ota-ona selektor yolg'on Agar selektor bo'lsa, ushbu yig'iladigan element ko'rsatilganda ko'rsatilgan ota-ona ostidagi barcha yig'iladigan elementlar yopiladi. (an'anaviy akkordeon harakati bilan o'xshash)
almashtirish mantiqiy rost Chaqiruvda yig'iladigan elementni almashtiradi

Usullari

.collapse(variantlar)

Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

  1. $ ( '#myClapsible' ). qulash ({
  2. o'zgartirish : noto'g'ri
  3. })

.collapse('toggle')

Yigʻiladigan elementni koʻrsatish yoki yashirishga oʻzgartiradi.

.collapse('shou')

Yigʻiladigan elementni koʻrsatadi.

.collapse('yashirish')

Yig'iladigan elementni yashiradi.

Voqealar

Bootstrap ning qulash klassi qulash funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

Tadbir Tavsif
ko'rsatish Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan Ushbu hodisa yig'ish elementi foydalanuvchiga ko'rinadigan bo'lsa, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
yashirish Ushbu hodisa hideusul chaqirilgandan so'ng darhol o'chiriladi.
yashirin Ushbu hodisa siqilish elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi).
  1. $ ( '#myClapsible' ). on ( 'yashirin' , funktsiya () {
  2. // biror narsa qilmoq…
  3. })

Misol

Har qanday shakldagi matn kiritish bilan oqlangan shriftlarni tezda yaratish uchun asosiy, oson kengaytirilgan plagin.

  1. <kiritish turi = "matn" data-provide = "typeahead" >

Siz autocomplete="off"standart brauzer menyularini Bootstrap typeahead ochiladigan roʻyxatida paydo boʻlishini oldini olishni xohlaysiz.


Foydalanish

Ma'lumotlar atributlari orqali

Yuqoridagi misolda ko'rsatilganidek, matn terish funksiyasiga ega elementni ro'yxatdan o'tkazish uchun ma'lumotlar atributlarini qo'shing.

JavaScript orqali

Matn boshiga qo'lda qo'ng'iroq qiling:

  1. $ ( '.yozuv oldinda' ). yozuv oldi ()

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-source="".

Ism turi standart tavsifi
manba massiv, funksiya [ ] So'rov uchun ma'lumotlar manbai. Satrlar massivi yoki funksiya bo'lishi mumkin. Funktsiyaga ikkita argument, querykiritish maydonidagi qiymat va processqayta qo'ng'iroq o'tkaziladi. processFunktsiya ma'lumotlar manbasini to'g'ridan-to'g'ri yoki asinxron ravishda qayta qo'ng'iroqning yagona argumenti orqali qaytarish orqali sinxron tarzda ishlatilishi mumkin .
buyumlar raqam 8 Ochiladigan ro'yxatda ko'rsatiladigan elementlarning maksimal soni.
min Uzunlik raqam 1 Avtomatik toʻldirish takliflarini ishga tushirishdan oldin zarur boʻlgan minimal belgilar uzunligi
moslashtiruvchi funktsiyasi katta harf sezgir emas So'rovning elementga mos kelishini aniqlash uchun ishlatiladigan usul. itemSo'rovni sinab ko'rish uchun bitta argumentni qabul qiladi . bilan joriy so'rovga kiring this.query. trueAgar so'rov mos bo'lsa , mantiqiy qiymatni qaytaring .
saralovchi funktsiyasi aniq moslik, katta-kichik
harf sezgir, katta-
kichik harf sezgir
Avtomatik to'ldirish natijalarini saralash uchun ishlatiladigan usul. Bitta argumentni qabul qiladi itemsva matnning oldingi namunasi doirasiga ega. Joriy so'rovga murojaat qiling this.query.
yangilovchi funktsiyasi tanlangan elementni qaytaradi Tanlangan elementni qaytarish uchun ishlatiladigan usul. Yagona argumentni qabul qiladi, itemva matnning oldingi nusxasi doirasiga ega.
yoritgich funktsiyasi barcha standart mosliklarni ta'kidlaydi Avtoto'ldirish natijalarini ta'kidlash uchun ishlatiladigan usul. Bitta argumentni qabul qiladi itemva matnning oldingi namunasi doirasiga ega. HTMLni qaytarish kerak.

Usullari

.typeahead(variantlar)

Yozuv boshi bilan kiritishni ishga tushiradi.

Misol

Chapdagi subnavigatsiya affiks plaginining jonli demosidir.


Foydalanish

Ma'lumotlar atributlari orqali

Har qanday elementga affiks xatti-harakatlarini osongina qo'shish data-spy="affix"uchun josuslik qilmoqchi bo'lgan elementga qo'shing. So'ngra, elementni pinlashni qachon yoqish va o'chirish kerakligini aniqlash uchun ofsetlardan foydalaning.

  1. <div data-spy = "affiks" data-offset-top = "200" > ... </div>
Oldindan qisqa ma'lumot berish! Siz mahkamlangan elementning holatini va uning bevosita ota-onasining harakatini boshqarishingiz kerak. affixPozitsiya , affix-topva tomonidan boshqariladi affix-bottom. Affiks ishga tushganda, potentsial yopilgan ota-onani tekshirishni unutmang, chunki u sahifaning oddiy oqimidan tarkibni olib tashlamoqda.

JavaScript orqali

JavaScript orqali affiks plaginiga qo'ng'iroq qiling:

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

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset-top="200".

Ism turi standart tavsifi
ofset raqam | funktsiyasi | ob'ekt 10 O'tkazish joyini hisoblashda ekrandan siljish uchun piksellar. Agar bitta raqam taqdim etilsa, ofset ham yuqori, ham chap yo'nalishda qo'llaniladi. Bitta yo'nalishni yoki bir nechta noyob ofsetlarni tinglash uchun faqat ob'ektni taqdim eting offset: { x: 10 }. Ofsetni dinamik ravishda ta'minlash kerak bo'lganda funktsiyadan foydalaning (ba'zi sezgir dizaynlar uchun foydali).