Modalar haqida

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

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.

Bootstrap-modaldan foydalanish

Modalni javascript orqali chaqiring:

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

Variantlar

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.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Modalni ishga tushirish </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "yopish" data-dississ = "modal" > × </button>  
    <h3> Modal sarlavha </h3>
  </div>
  <div class = "modal-tana" > 
    <p> Bitta nozik tana... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Yopish </a>  
    <a href = "#" class = "btn btn-primary" > O‘zgarishlarni saqlash </a>  
  </div>
</div>

Usullari

.modal(variantlar)

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

.modal('toggle')

Modalni qo'lda almashtiradi.

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

.modal('shou')

Modalni qo'lda ochadi.

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

.modal('yashirish')

Modalni qo'lda yashiradi.

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

Voqealar

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

$ ( '#myModal' ). on ( 'yashirin' , funktsiya () {   
  // biror narsa qilmoq…
})

Ochiladiganlar haqida

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.

Misollar

Ochiladiganlarni sinab ko'rish uchun navigatsiya panelidagi ochiladigan havolalar va pastdagi tabletkalarni bosing.

• Oddiy havola
• Ochiladigan ro'yxat
  • Action
  • Another action
  • Something else here
  • Separated link
• Ochiladigan 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Ochiladigan 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js dan foydalanish

Javascript orqali ochiladigan menyularga qo'ng'iroq qiling:

$ ( '.dropdown-toggle' ). ochiladigan menyu ()

Belgilash

Har qanday elementga ochiladigan funksiyani tezda qo'shish uchun shunchaki qo'shing data-toggle="dropdown"va har qanday joriy bootstrap ochiladigan menyu avtomatik ravishda faollashtiriladi.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Oddiy havola </a></li>  
  <li class = "ochiladigan" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Ochiladigan ro'yxat
      <b class = "caret" >> </b> 
    </a>
    <ul class = "ochiladigan menyu" > 
      <li><a href = "#" > Harakat </a></li> 
      <li><a href = "#" > Boshqa amal </a></li> 
      <li><a href = "#" > Bu yerda boshqa narsa </a></li> 
      <li class = "bo'luvchi" ></li> 
      <li><a href = "#" > Ajratilgan havola </a></li> 
    </ul>
  </li>
  ...
</ul>

URL manzillari saqlanib qolishi uchun data-targetoʻrniga atributdan foydalaning href="#".

<ul class = "nav nav-pills" > 
  <li sinf = "ochiladigan" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Ochiladigan ro'yxat
      <b class = "caret" >> </b> 
    </a>
    <ul class = "ochiladigan menyu" > 
      ...
    </ul>
  </li>
</ul>

Usullari

$().ochiladigan menyu()

Berilgan navigatsiya paneli yoki yorliqli navigatsiya uchun menyularni faollashtirish uchun dasturiy api.

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

Scrollspy bilan navigatsiya paneliga misol

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

bootstrap-scrollspy.js dan foydalanish

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

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

<body data-spy = "scroll" > ... </body>  

Usullari

.scrollspy('yangilash')

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

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

Variantlar

Voqealar

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

Misol yorliqlari

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

• Uy
• Profil
• Ochiladigan ro'yxat
  • @fat
  • @mdo

bootstrap-tab.js dan foydalanish

JavaScript orqali tabbable yorliqlarini yoqish (har bir yorliq alohida faollashtirilishi kerak):

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

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

$ ( '#myTab a[href="#profile"]' ). tab ( "ko'rsatish" ); // Yorliqni nomi bo'yicha tanlang 
$ ( '#myTab a:first' ). tab ( "ko'rsatish" ); // Birinchi yorliqni tanlang 
$ ( '#myTab a:oxirgi' ). tab ( "ko'rsatish" ); // Oxirgi yorliqni tanlang 
$ ( '#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.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Bosh sahifa </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Xabarlar </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Sozlamalar </a></li>  
</ul>

Usullari

$().tab

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Bosh sahifa </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Xabarlar </a></li> 
  <li><a href = "#settings" > Sozlamalar </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "xabarlar" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skript>
  $ ( funktsiya () {  
    $ ( '#myTab a:oxirgi' ). tab ( "ko'rsatish" );
  })
</script>

Voqealar

$ ( 'a[data-toggle="tab"]' ). on ( 'ko'rsatilgan' , funktsiya ( e ) {   
  e . maqsad // faollashtirilgan yorliq
  e . bog'liqTarget // oldingi yorliq
})

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.

Maslahatlardan foydalanishga misol

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

bootstrap-tooltip.js dan foydalanish

Javascript orqali asboblar maslahatini ishga tushiring:

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

Variantlar

Belgilash

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

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

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

.tooltip('yashirish')

Elementning asboblar maslahatini yashiradi.

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

.tooltip('almashtirish')

Elementning asboblar maslahatini almashtiradi.

$ ( '#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

Misol uchun hover popover

Qalqib chiquvchi tugmani ishga tushirish uchun kursorni ustiga bosing.

bootstrap-popover.js dan foydalanish

Javascript orqali popoverlarni yoqing:

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

Variantlar

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.

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

.popover('yashirish')

Qalqib chiquvchi elementlarni yashiradi.

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

.popover('toggle')

Qalqib chiquvchi elementlarni almashtiradi.

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

Ogohlantirishlar haqida

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

Ogohlantirishlarga misollar

Ogohlantirishlar plagini muntazam ogohlantirish xabarlarida ishlaydi va xabarlarni bloklaydi.

bootstrap-alert.js dan foydalanish

Javascript orqali ogohlantirishni o'chirishni yoqing:

$ ( ".alert" ). ogohlantirish ()

Belgilash

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

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

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

Voqealar

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

$ ( '#mening ogohlantirishim' ). bog'lash ( 'yopiq' , funktsiya () {   
  // biror narsa qilmoq…
})

Haqida

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

Foydalanish misollari

Holatlar va almashtirishlar uchun tugmalar plaginidan foydalaning.

bootstrap-button.js dan foydalanish

Javascript orqali tugmalarni yoqish:

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

Belgilash

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

<!-- Bitta tugma orqali almashishni faollashtirish uchun data-toggle="button" qo'shing -->
<button class = "btn" data-toggle = "button" > Yagona almashtirish </button>  
 
<!-- btn-group-da belgilash qutisi uslubini almashtirish uchun data-toggle="buttons-checkbox" qo'shing -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Chap </button> 
  <button class = "btn" > O'rta </button> 
  <button class = "btn" > O‘ng </button> 
</div>
 
<!-- btn-group-da radio uslubini almashtirish uchun data-toggle="buttons-radio" qo'shing -->
<div class = "btn-group" data-toggle = "tugmalar-radio" >  
  <button class = "btn" > Chap </button> 
  <button class = "btn" > O'rta </button> 
  <button class = "btn" > O‘ng </button> 
</div>

Usullari

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

Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.

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

<button class = "btn" data-loading-text = "narsalarni yuklash..." > ... </button>   

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

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

Haqida

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

* Transitions plaginini kiritishni talab qiladi.

Misol uchun akkordeon

Yiqilish plaginidan foydalanib, biz oddiy akkordeon uslubi vidjetini yaratdik:

bootstrap-collapse.js dan foydalanish

Javascript orqali yoqish:

$ ( “.qulash” ). qulash ()

Variantlar

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.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  oddiy yig'iladigan
</button>
 
<div id = "demo" class = "yiqilish" > … </div>  

Usullari

.collapse(variantlar)

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

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

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

$ ( '#myClapsible' ). on ( 'yashirin' , funktsiya () {   
  // biror narsa qilmoq…
})

Haqida

Elementlar bo'ylab aylanish uchun umumiy plagin. Ko'ngilxushlik.

Misol karusel

Quyidagi slayd-shouni tomosha qiling.

Birinchi eskiz yorlig'i

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

bootstrap-carousel.js dan foydalanish

Javascript orqali qo'ng'iroq qiling:

$ ( '.karusel' ). karusel ()

Variantlar

Belgilash

Ma'lumotlar atributlari oldingi va keyingi boshqaruvlar uchun ishlatiladi. Quyidagi misol belgisini ko'rib chiqing.

<div id = "myCarousel" class = "karusel" >  
  <!-- Karusel elementlari -->
  <div class = "karusel-ichki" > 
    <div class = "faol element" > … </div> 
    <div class = "element" > … </div> 
    <div class = "element" > … </div> 
  </div>
  <!-- Karusel navbati -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "oldingi" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "keyingi" > › </a>   
</div>

Usullari

.karusel(variantlar)

Karuselni ixtiyoriy variantlar objectbilan ishga tushiradi va ob'ektlar bo'ylab aylana boshlaydi.

$ ( '.karusel' ). karusel ({
  interval : 2000 
})

.karusel('tsikl')

Karusel elementlarini chapdan o'ngga aylantiring.

.karusel('pauza')

Karuselning ob'ektlar orasidan aylanishini to'xtatadi.

.karusel(raqam)

Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash).

.karusel('oldingi')

Oldingi elementga aylanish.

.karusel('keyingi')

Keyingi elementga o'tish.

Voqealar

Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi.

Haqida

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

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:

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

Variantlar

Belgilash

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

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

Usullari

.typeahead(variantlar)

Yozuv boshi bilan kiritishni ishga tushiradi.