Bizning Modal plaginimiz an'anaviy modal JS plaginini juda nozik tarzda o'z ichiga oladi va bu erda twitterda biz talab qiladigan yalang'och funksionallikni o'z ichiga olishga alohida e'tibor beradi.

Yuklab olish

Bootstrap-modaldan foydalanish

$ ( '#mening-modal' ). modal ( variantlar )

Variantlar

Ism	turi	standart	tavsifi
fon	mantiqiy	yolg'on	Modal fon elementini o'z ichiga oladi
klaviatura	mantiqiy	yolg'on	Escape tugmasi bosilganda modalni yopadi
ko'rsatish	mantiqiy	yolg'on	Sinfni ishga tushirishda modalni ochadi

Belgilash

Bir qator javascript yozmasdan sahifangizdagi modallarni osongina faollashtirishingiz mumkin. Elementga data-controls-modalmodal element identifikatoriga mos keladigan atributni bering va bosilganda u modalingizni ishga tushiradi. Modali variantlarni qo'shish uchun ularni ma'lumotlar atributlari sifatida ham qo'shing.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Modalni ishga tushirish </a>    

Diqqat Agar siz modalingiz jonlantirilishini xohlasangiz, elementingizga .fadesinf qo'shing .modal(buni amalda ko'rish uchun demoga qarang).

Usullari

.modal(variantlar)

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

$ ( '#mening-modal' ). modal ({
  closeOnEscape : rost 
})

.modal('toggle')

Modalni qo'lda almashtiradi.

$ ( '#mening-modal' ). modal ( "o'tish" )

.modal('shou')

Modalni qo'lda ochadi.

$ ( '#mening-modal' ). modal ( 'shou' )

.modal('yashirish')

Modalni qo'lda yashiradi.

$ ( '#mening-modal' ). modal ( "yashirish" )

.modal(to'g'ri)

Elementlarning modal klassi namunasini qaytaradi.

$ ( '#mening-modal' ). modal ( to'g'ri )

E'tibor bering . Shu bilan bir qatorda, buni yordamida olish mumkin $().data('modal').

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

$ ( '#mening-modal' ). bog'lash ( 'yashirin' , funktsiya () {   
  // biror narsa qilmoq ...
})

Namoyish

Modalni ishga tushiring

Ushbu plagin yuklash paneli yuqori paneliga yoki yorliqli navigatsiyalarga ochiladigan o'zaro ta'sirni qo'shish uchun mo'ljallangan.

Yuklab olish

boostrap-dropdown.js dan foydalanish

$ ( '#topbar' ). ochiladigan menyu ()

Belgilash

Har qanday nav elementiga ochiladigan funksiyani tezda qo'shish uchun data-dropdownatributdan foydalaning. Har qanday joriy yuklash oynasi avtomatik ravishda faollashtiriladi.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Bosh sahifa </a></li>  
  <li sinf = "ochiladigan" ma'lumotlar-ochiladigan pastga = "ochiladi" >   
    <a href = "#" class = "dropdown-toggle" > Ochiladigan </a>  
    <ul class = "ochiladigan menyu" > 
      <li><a href = "#" > Ikkilamchi havola </a></li> 
      <li><a href = "#" > Bu yerda boshqa narsa </a></li> 
      <li class = "bo'luvchi" ></li> 
      <li><a href = "#" > Boshqa havola </a></li> 
    </ul>
  </li>
</ul>

Eslatma Agar foydalanuvchi interfeysida bir nechta ochiladigan menyular bo'lsa, atributni yoki data-dropdownkabi muhimroq konteyner elementiga qo'shishni o'ylab ko'ring ..tabs.topbar

Usullari

$().ochiladigan menyu()

Berilgan yuqori panel yoki yorliqli navigatsiya uchun menyularni faollashtirish uchun dasturiy api.

Namoyish

Ushbu plagin yuklash paneli yuqori paneliga scrollspy (navbatni avtomatik yangilash) o'zaro ta'sirini qo'shish uchun mo'ljallangan.

Yuklab olish

boostrap-scrollspy.js dan foydalanish

$ ( '#topbar' ). ochiladigan menyu ()

Belgilash

Navigatsiyangizga scrollspy xatti-harakatini osongina qo'shish uchun data-scrollspyatributni .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Usullari

$().scrollspy()

Avtomatik navigatsiya tugmachalarini foydalanuvchilarning aylantirish pozitsiyasi bo'yicha faollashtiradi.

$ ( 'tana > .topbar' ). scrollSpy ()

E'tibor bering , Topbar langar teglari hal qilinadigan id maqsadlariga ega bo'lishi kerak. Masalan, <a href="#home">home</a>domdagi kabi bir narsaga must mos keladi <div id="home"></div>.

.scrollspy('yangilash')

Scrollspy ishlash uchun nav tugmalari va bo'lim koordinatalarini keshlaydi. Agar siz ushbu keshni yangilashingiz kerak bo'lsa (ehtimol sizda dinamik tarkib mavjud bo'lsa), shunchaki ushbu yangilash usulini chaqiring. Agar siz scrollspy-ni aniqlash uchun ma'lumotlar atributidan foydalangan bo'lsangiz, shunchaki tanadagi yangilanishni chaqiring.

$ ( 'tana' ). scrollspy ( "yangilash" )

Namoyish

Ushbu sahifadagi yuqori paneldagi navigatsiyani tekshiring.

Ushbu plagin tezkor, dinamik yorliq va hap funksiyalarini qo'shadi.

Yuklab olish

boostrap-tabs.js dan foydalanish

$ ( '.tabs' ). yorliqlar ()

Belgilash

Yorliq yoki tabletka navigatsiyasini hech qanday javascript yozmasdan, ularga shunchaki atribut data-tabsyoki data-pillsatribut berish orqali faollashtirishingiz mumkin.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Usullari

$().tabs yoki $().pills

Berilgan idish uchun yorliq va hap funksiyalarini faollashtiradi. Yorliq havolalari hujjatdagi identifikatorlarga murojaat qilishi kerak.

<ul class = "tabs" > 
  <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 = "pill-content" > 
  <div class = "active" id = "uy" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "xabarlar" > ... </div> 
  <div id = "sozlamalar" > ... </div> 
</ul>
 
<skript>
  $ ( funktsiya () {  
    $ ( '.tabs' ). yorliqlar ()
  })
</script>

Namoyish

• Uy
• Profil
• Xabarlar
• Sozlamalar

Jeyson Frame tomonidan yozilgan mukammal jQuery.tipsy plaginiga asoslangan; twipsy - bu yangilangan versiya bo'lib, u tasvirlarga tayanmaydi, animatsiyalar uchun css3 dan va sarlavhani saqlash uchun ma'lumotlar atributlaridan foydalanadi!

Yuklab olish

bootstrap-twipsy.js dan foydalanish

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

Variantlar

Ism	turi	standart	tavsifi
jonlantirish	mantiqiy	rost	asboblar maslahatiga CSS fade o'tishni qo'llang
kechikish	raqam	0	Maslahatni ko'rsatishdan oldin kechikish (ms)
kechikish	raqam	0	Maslahatni yashirishdan oldin kechikish (ms)
Orqaga chekinish	ip	''	hech qanday maslahat sarlavhasi mavjud bo'lmaganda foydalanish uchun matn
joylashtirish	ip	"yuqorida"	Maslahatni qanday joylashtirish kerak - yuqorida | quyida | chap | to'g'ri
html	mantiqiy	yolg'on	html kontentiga asboblar maslahati ichida ruxsat beradi
yashash	mantiqiy	yolg'on	individual hodisa ishlovchilari o'rniga voqea delegatsiyasidan foydalaning
ofset	raqam	0	maqsadli elementdan asboblar maslahatining piksel ofseti
sarlavha	string | funktsiyasi	"nom"	atribut yoki sarlavha matnini olish usuli
tetik	ip	'qarang'	asboblar maslahati qanday ishga tushiriladi - kursorni | diqqat | qo'llanma

Usullari

$().twipsy(variantlar)

Elementlar to'plamiga twipsy ishlov beruvchini biriktiradi.

.twipsy('shou')

Elementlarni twipsy ochib beradi.

$ ( '#element' ). twipsy ( 'shou' )

.twipsy('yashirish')

Elementlarni twipsy yashiradi.

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

.twipsy(to'g'ri)

Elementlarning twipsy sinf namunasini qaytaradi.

$ ( '#element' ). twipsy ( to'g'ri )

E'tibor bering . Shu bilan bir qatorda, buni yordamida olish mumkin $().data('twipsy').

Namoyish

Popover plagini ilovangizga popover qo'shish uchun oddiy interfeysni taqdim etadi. U boostrap-twipsy.js plaginini kengaytiradi, shuning uchun loyihangizga popoverlarni qo'shganda ushbu faylni ham qo'lga kiriting!

Yuklab olish

boostrap-popover.js dan foydalanish

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

Variantlar

Ism	turi	standart	tavsifi
jonlantirish	mantiqiy	rost	asboblar maslahatiga CSS fade o'tishni qo'llang
kechikish	raqam	0	Maslahatni ko'rsatishdan oldin kechikish (ms)
kechikish	raqam	0	Maslahatni yashirishdan oldin kechikish (ms)
Orqaga chekinish	ip	''	hech qanday maslahat sarlavhasi mavjud bo'lmaganda foydalanish uchun matn
joylashtirish	ip	"to'g'ri"	Maslahatni qanday joylashtirish kerak - yuqorida | quyida | chap | to'g'ri
html	mantiqiy	yolg'on	html kontentiga asboblar maslahati ichida ruxsat beradi
yashash	mantiqiy	yolg'on	individual hodisa ishlovchilari o'rniga voqea delegatsiyasidan foydalaning
ofset	raqam	0	maqsadli elementdan asboblar maslahatining piksel ofseti
sarlavha	string | funktsiyasi	"nom"	atribut yoki sarlavha matnini olish usuli
mazmuni	string | funktsiyasi	"ma'lumotlar tarkibi"	atribut yoki kontent matnini olish usuli
tetik	ip	'qarang'	asboblar maslahati qanday ishga tushiriladi - kursorni | diqqat | qo'llanma

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

Namoyish

popover uchun kursorni bosing

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

Yuklab olish

bootstrap-alerts.js dan foydalanish

$ ( ".alert-xabar" ). ogohlantirish ()

Belgilash

data-alertOgohlantirish xabarlariga avtomatik ravishda yaqin funksiyalarni berish uchun atribut qo‘shing .

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-xabar" ). ogohlantirish ( "yopish" )

Namoyish