Bootstrap uchun Javascript

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

Modallar

Oddiy, ammo moslashuvchan, an'anaviy javascript modal plaginini faqat minimal talab qilinadigan funksionallik va aqlli standart sozlamalar bilan qabul qiladi.

Ochiladigan menyular

Ushbu oddiy plagin yordamida Bootstrap-dagi deyarli hamma narsaga ochiladigan menyularni qo'shing. Bootstrap navigatsiya paneli, yorliqlar va tabletkalarda to'liq ochiladigan menyuni qo'llab-quvvatlaydi.

Scrollspy

Joriy faol havolani aylantirish holatiga ko'ra ko'rsatish uchun navigatsiya panelidagi havolalarni avtomatik yangilash uchun scrollspy-dan foydalaning.

Oʻzgaruvchan yorliqlar

Ushbu plagindan yorliqlar va tabletkalarni mahalliy kontentning yorliqli panellari orqali almashtirishga imkon berish orqali foydaliroq qilish uchun foydalaning.

Maslahat

JQuery Tipsy plaginining yangi talqini, Tooltips rasmlarga tayanmaydi — ular animatsiyalar uchun CSS3 va mahalliy sarlavhalarni saqlash uchun maʼlumotlar atributlaridan foydalanadi.

Popoverlar *

Ikkilamchi ma'lumotni saqlash uchun har qanday elementga, iPad'dagi kabi kontentning kichik qatlamlarini qo'shing.

* Maslahatlarni qo'shishni talab qiladi

Ogohlantirish xabarlari

Ogohlantirish plagini ogohlantirishlarga yaqin funksiyalarni qo'shish uchun kichik sinfdir.

Tugmalar

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

Yiqilish

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

Karusel

Kontentning interaktiv slayd-shousini taqdim qilmoqchi bo'lgan har qanday kontentni yarating.

Oldindan yozing

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

O'tishlar *

Oddiy oʻtish effektlari uchun modallarda siljitish yoki ogohlantirishlarni oʻchirish uchun bootstrap-transition.js ni bir marta qoʻshing.

* Plaginlarda animatsiya uchun talab qilinadi

Oldindan qisqa ma'lumot berish! Barcha javascript plaginlari jQuery-ning so'nggi versiyasini talab qiladi.

Modalar haqida

Oddiy, ammo moslashuvchan, an'anaviy javascript modal plaginini faqat minimal talab qilinadigan funksionallik va aqlli standart sozlamalar bilan qabul qiladi.

Faylni yuklab oling

Statik misol

Quyida statik tarzda ko'rsatilgan modal mavjud.

Jonli demo

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

Demo modalni ishga tushiring

Bootstrap-modaldan foydalanish

Modalni javascript orqali chaqiring:

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

Variantlar

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.

Belgilash

Bir qator javascript yozmasdan sahifangizdagi modallarni osongina faollashtirishingiz mumkin. Modal element identifikatoriga yoki mos keladigan data-toggle="modal"boshqaruvchi elementni o'rnating va bosilganda u modalingizni ishga tushiradi.data-target="#foo"href="#foo"

Bundan tashqari, modal namunangizga opsiyalarni qo'shish uchun ularni boshqaruv elementiga yoki modal belgilashning o'ziga qo'shimcha ma'lumotlar atributlari sifatida kiriting.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modalni ishga tushirish </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "yopish" data-dississ = "modal" > × </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" data-dississ = "modal" > Yopish </a>
  11. <a href = "#" class = "btn btn-primary" > O‘zgarishlarni saqlash </a>
  12. </div>
  13. </div>
Oldindan qisqa ma'lumot berish! Agar siz modalingiz jonlantirilishini va tashqarida bo'lishini istasangiz, elementga .fadesinf qo'shing .modal(buni amalda ko'rish uchun demoga qarang) va bootstrap-transition.js ni qo'shing.

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

ScrollSpy plagini o'tish joyiga qarab navbat maqsadlarini avtomatik ravishda yangilash uchun mo'ljallangan.

Faylni yuklab oling

Scrollspy bilan navigatsiya paneliga misol

Quyidagi maydonni aylantiring va navigatsiya yangilanishini tomosha qiling. Ochiladigan pastki elementlar ham ta'kidlanadi. Urunib ko'r!

@yog'

Reklama leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ular qui sotilgan oldin. Tumblr fermadan stolga velosiped huquqlari. Anim keffiyeh carles kardigan. Velit seitan mcsweeney ning fotostendi 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 huquqlarini adipisicing banh mi, velit ea sunt the next level locavore in a magna Veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisizing. 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 kozoklarini yaxshi ko'rardi. Cardigan craft pivo seitan tayyor velit. VHS chambray laboris tempor veniam. Anim mollit minimal commodo ullamco thundercats.


bootstrap-scrollspy.js dan foydalanish

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

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

Belgilash

Yuqori paneldagi navigatsiyaga osongina scrollspy xatti-harakatini qo'shish uchun shunchaki data-spy="scroll"josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu tana bo'ladi).

  1. <body data-spy = "scroll" > ... </body>
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

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.

Ushbu plagin mahalliy kontentga o'tish uchun tezkor, dinamik yorliq va hap funksiyalarini qo'shadi.

Faylni yuklab oling

Misol yorliqlari

Yashirin panellar o'rtasida, hatto ochiladigan menyular orqali o'tish uchun quyidagi yorliqlarni bosing.

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.


bootstrap-tab.js dan foydalanish

JavaScript orqali tabbable yorliqlarini 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

data-toggle="tab"Elementni ko'rsatish yoki ustiga biron bir JavaScript yozmasdan 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 ishga tushadi, 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 Ushbu hodisa varaq ko'rsatilgandan so'ng yorliqlar ko'rsatishda 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. })

Maslahat haqida

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

Faylni yuklab oling

Maslahatlardan foydalanishga misol

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.


bootstrap-tooltip.js dan foydalanish

Javascript orqali asboblar maslahatini ishga tushiring:

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

Variantlar

Ism turi standart tavsifi
animatsiya mantiqiy rost asboblar maslahatiga CSS fade o'tishni qo'llang
joylashtirish string|funktsiya "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 'qarang' asboblar maslahati qanday ishga tushiriladi - kursorni | diqqat | qo'llanma
kechikish raqam | ob'ekt 0

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

Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi

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

Oldindan qisqa ma'lumot berish! Alohida maslahatlar 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.

  1. <a href = "#" rel = "tooltip" title = "birinchi maslahat" > kursorni mening ustimga olib boring </a>

Usullari

$().maslahat (variantlar)

Elementlar to'plamiga asboblar maslahati ishlovchisini 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" )

Popoverlar haqida

Ikkilamchi ma'lumotni saqlash uchun har qanday elementga, iPad'dagi kabi kontentning kichik qatlamlarini qo'shing.

* Asboblar maslahatini qo'shishni talab qiladi

Faylni yuklab oling

Misol uchun hover popover

Qalqib chiquvchi tugmani ishga tushirish uchun kursorni ustiga bosing.


bootstrap-popover.js dan foydalanish

Javascript orqali popoverlarni yoqing:

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

Variantlar

Ism turi standart tavsifi
animatsiya mantiqiy rost asboblar maslahatiga CSS fade o'tishni qo'llang
joylashtirish string|funktsiya "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 'qarang' asboblar maslahati qanday ishga tushiriladi - kursorni | 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 berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi

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

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" )

Ogohlantirishlar haqida

Ogohlantirish plagini ogohlantirishlarga yaqin funksiyalarni qo'shish uchun kichik sinfdir.

Yuklab olish

Ogohlantirishlarga misollar

Ogohlantirishlar plagini muntazam ogohlantirish xabarlarida ishlaydi va xabarlarni bloklaydi.

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


bootstrap-alert.js dan 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. })

Haqida

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

Faylni yuklab oling

Foydalanish misollari

Holatlar va almashtirishlar uchun tugmalar plaginidan foydalaning.

Davlatga tegishli
Yagona almashtirish
Belgilash katagi
Radio

bootstrap-button.js dan 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.

  1. <!-- Bitta tugma orqali almashishni faollashtirish uchun data-toggle="button" qo'shing -->
  2. <button class = "btn" data-toggle = "button" > Yagona almashtirish </button>
  3.  
  4. <!-- btn-group-da belgilash qutisi uslubini almashtirish uchun data-toggle="buttons-checkbox" qo'shing -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Chap </button>
  7. <button class = "btn" > O'rta </button>
  8. <button class = "btn" > O‘ng </button>
  9. </div>
  10.  
  11. <!-- btn-group-da radio uslubini almashtirish uchun data-toggle="buttons-radio" qo'shing -->
  12. <div class = "btn-group" data-toggle = "tugmalar-radio" >
  13. <button class = "btn" > Chap </button>
  14. <button class = "btn" > O'rta </button>
  15. <button class = "btn" > O‘ng </button>
  16. </div>

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 class = "btn" data-toggle = "button" > </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 class = "btn" data-loading-text = "narsalarni yuklash..." > ... </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 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.

Faylni yuklab oling

* Transitions plaginini kiritishni 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.

bootstrap-collapse.js dan foydalanish

Javascript orqali yoqish:

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

Variantlar

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

Belgilash

data-toggle="collapse"Yigʻiladigan element boshqaruvini avtomatik belgilash uchun data-targetelementga qoʻshish kifoya . Atribut 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.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. oddiy yig'iladigan
  3. </button>
  4.  
  5. <div id = "demo" class = "yiqilish" > </div>
Oldindan qisqa ma'lumot berish! 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.

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 berkitishga almashtiradi.

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

Haqida

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

Faylni yuklab oling

Misol

Oldindan yozish natijalarini ko'rsatish uchun quyidagi maydonga yozishni boshlang.


bootstrap-typeahead.js dan foydalanish

Javascript orqali matn terish mashinasiga qo'ng'iroq qiling:

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

Variantlar

Ism turi standart tavsifi
manba massiv [ ] So'rov uchun ma'lumotlar manbai.
buyumlar raqam 8 Ochiladigan ro'yxatda ko'rsatiladigan elementlarning maksimal soni.
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.
yoritgich funktsiyasi barcha standart mosliklarni ta'kidlaydi Avtomatik to'ldirish natijalarini ta'kidlash uchun ishlatiladigan usul. Bitta argumentni qabul qiladi itemva matnning oldingi namunasi doirasiga ega. HTMLni qaytarish kerak.

Belgilash

Elementni yozish funksiyasi bilan roʻyxatdan oʻtkazish uchun maʼlumotlar atributlarini qoʻshing.

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

Usullari

.typeahead(variantlar)

Yozuv boshi bilan kiritishni ishga tushiradi.