Մեր Modal plugin-ը չափազանց բարակ տարբերակ է ավանդական մոդալ js հավելվածի նկատմամբ՝ հատուկ ուշադրություն դարձնելով միայն այն մերկ գործառույթներին, որոնք մենք պահանջում ենք այստեղ Twitter-ում:

Բեռնել

Օգտագործելով bootstrap-modal

$ ( '#my-modal' ): մոդալ ( ընտրանքներ )

Ընտրանքներ

Անուն	տիպ	լռելյայն	նկարագրությունը
ֆոն	բուլյան	կեղծ	Ներառում է մոդալ-ֆոնային տարր
ստեղնաշար	բուլյան	կեղծ	Փակում է մոդալը, երբ սեղմված է escape ստեղնը
ցուցադրում	բուլյան	կեղծ	Բացվում է մոդալ դասի սկզբնավորման վրա

Նշում

Դուք կարող եք հեշտությամբ ակտիվացնել մոդալները ձեր էջում՝ առանց Javascript-ի մեկ տող գրելու: Պարզապես տարրին տվեք data-controls-modalհատկանիշ, որը համապատասխանում է մոդալ տարրի id-ին, և սեղմելուց հետո այն կգործարկի ձեր մոդալը: Մոդալ ընտրանքներ ավելացնելու համար պարզապես դրանք ներառեք նաև որպես տվյալների ատրիբուտներ:

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Գործարկել մոդալը </a>    

Ծանուցում Եթե ցանկանում եք, որ ձեր մոդալը շարժվի և դուրս գա, պարզապես .fadeձեր տարրին մի դաս ավելացրեք .modal(դիմեք ցուցադրությանը` սա գործողության մեջ տեսնելու համար):

Մեթոդներ

.modal(ընտրանքներ)

Ակտիվացնում է ձեր բովանդակությունը որպես մոդալ: Ընդունում է ընտրովի տարբերակներ object:

$ ( '#my-modal' ): մոդալ ({
  closeOnEscape : ճշմարիտ 
})

.modal ('toggle')

Ձեռքով փոխում է մոդալը:

$ ( '#my-modal' ): մոդալ ( «անջատել» )

.modal ('ցուցադրել')

Ձեռքով բացում է մոդալ:

$ ( '#my-modal' ): մոդալ ( «ցուցադրել» )

.modal ('թաքցնել')

Ձեռքով թաքցնում է մոդալը:

$ ( '#my-modal' ): մոդալ ( «թաքցնել» )

.մոդալ (ճշմարիտ)

Վերադարձնում է տարրերի մոդալ դասի օրինակ:

$ ( '#my-modal' ): մոդալ ( ճշմարիտ )

Ծանուցում Այլապես, սա կարելի է առբերել $().data('modal').

Իրադարձություններ

Bootstrap-ի մոդալ դասը բացահայտում է մի քանի իրադարձություն՝ մոդալ ֆունկցիոնալությանը միանալու համար:

Իրադարձություն	Նկարագրություն
ցուցադրում	Այս իրադարձությունը գործարկվում է անմիջապես, երբ showկանչվում է օրինակի մեթոդը:
ցուցադրված է	Այս իրադարձությունը գործարկվում է, երբ մոդալը տեսանելի է դառնում օգտատիրոջը (կսպասի css անցումների ավարտին):
թաքցնել	Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideկանչվում է օրինակի մեթոդը:
թաքնված	Այս իրադարձությունը գործարկվում է, երբ մոդալն ավարտում է օգտագործողից թաքցված լինելը (կսպասի css անցումների ավարտին):

$ ( '#my-modal' ): bind ( 'թաքնված' , ֆունկցիա () {   
  // անել ինչ որ բան ...
})

Դեմո

Գործարկել Modal-ը

Այս փլագինը նախատեսված է բացվող փոխազդեցություն ավելացնելու համար bootstrap վերին տողում կամ ներդիրներով նավարկություններում:

Բեռնել

Օգտագործելով boostrap-dropdown.js

$ ( '#վերին բար' ): բացվող ()

Նշում

Բացվող ֆունկցիոնալությունը արագ ավելացնելու համար ցանկացած navig տարր, օգտագործեք data-dropdownհատկանիշը: Ցանկացած վավեր bootstrap բացվող ցանկն ավտոմատ կերպով կակտիվանա:

<ul class = «ներդիրներ» > 
  <li class = "active" ><a href = "#" > Գլխավոր </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > բացվող </a>  
    <ul class = «dropdown-menu» > 
      <li><a href = "#" > Երկրորդական հղում </a></li> 
      <li><a href = "#" > Այստեղ այլ բան </a></li> 
      <li class = «բաժանարար» ></li> 
      <li><a href = "#" > Մեկ այլ հղում </a></li> 
    </ul>
  </li>
</ul>

Ծանուցում , եթե ձեր UI-ն ունի մի քանի բացվող պատուհաններ, մտածեք data-dropdownհատկանիշն ավելացնելու ավելի կարևոր կոնտեյների տարրին, ինչպիսին է .tabsկամ .topbar.

Մեթոդներ

$(). dropdown()

Ծրագրային api՝ տվյալ վերին տողի կամ ներդիրներով նավիգացիայի համար ընտրացանկերի ակտիվացման համար:

Դեմո

Այս փլագինը նախատեսված է «scrollspy» (ավտո թարմացվող նավարկություն) փոխազդեցությունը bootstrap-ի վերևի տողում ավելացնելու համար:

Բեռնել

Օգտագործելով boostrap-scrollspy.js

$ ( '#վերին բար' ): բացվող ()

Նշում

Որպեսզի հեշտությամբ ավելացնեք պտտվող դիտման վարքագիծը ձեր նավին, պարզապես ավելացրեք data-scrollspyհատկանիշը .topbar.

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

Մեթոդներ

$().scrollspy()

Ավտոմատ կերպով ակտիվացնում է նավիգացիոն կոճակները օգտատերերի ոլորման դիրքի կողմից:

$ ( 'body > .topbar' ): scrollSpy ()

Ծանուցում , Topbar խարիսխի պիտակները պետք է ունենան լուծելի ID թիրախներ: Օրինակ, a-ն <a href="#home">home</a>պետք է համապատասխանի մի բանի, ինչպիսին է <div id="home"></div>.

.scrollspy ('թարմացնել')

Scrollspy-ը պահում է նավի կոճակները և հատվածի կոորդինատները կատարման համար: Եթե ​​Ձեզ անհրաժեշտ է թարմացնել այս քեշը (հավանաբար, եթե ունեք դինամիկ բովանդակություն), պարզապես զանգահարեք թարմացման այս մեթոդը: Եթե ​​դուք օգտագործել եք տվյալների հատկանիշը ձեր scrollspy-ը սահմանելու համար, պարզապես զանգահարեք թարմացում մարմնի վրա:

$ ( «մարմին» ): scrollspy ( «թարմացում» )

Դեմո

Ստուգեք այս էջի վերին տողի նավիգացիան:

Այս փլագինը ավելացնում է արագ, դինամիկ ներդիրների և հաբերի ֆունկցիոնալությունը:

Բեռնել

Օգտագործելով boostrap-tabs.js

$ ( '.tabs' ): ներդիրներ ()

Նշում

Դուք կարող եք ակտիվացնել ներդիրների կամ հաբերի նավարկությունը՝ առանց որևէ Javascript գրելու՝ պարզապես տալով նրանց հատկանիշ data-tabsկամ data-pillsհատկանիշ:

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

Մեթոդներ

$().tabs կամ $().pills

Ակտիվացնում է ներդիրի և հաբերի գործառույթը տվյալ տարայի համար: Ներդիրների հղումները պետք է վկայակոչեն փաստաթղթի id-ները:

<ul class = «ներդիրներ» > 
  <li class = "active" ><a href = "#home" > Գլխավոր </a></li>  
  <li><a href = "#profile" > Պրոֆիլ </a></li> 
  <li><a href = "#messages" > Հաղորդագրություններ </a></li> 
  <li><a href = "#settings" > Կարգավորումներ </a></li> 
</ul>
 
<div class = «դեղահատի պարունակություն» > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "հաղորդագրություններ" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( ֆունկցիա () {  
    $ ( '.tabs' ): ներդիրներ ()
  })
</script>

Դեմո

• տուն
• Անձնագիր
• Հաղորդագրություններ
• Կարգավորումներ

Ջեյսոն Ֆրեյմի կողմից գրված հիանալի jQuery.tipsy հավելվածի հիման վրա; twipsy-ն թարմացված տարբերակ է, որը չի հիմնվում պատկերների վրա, օգտագործում է css3 անիմացիաների համար և տվյալների ատրիբուտներ՝ վերնագրերի պահպանման համար:

Բեռնել

Օգտագործելով bootstrap-twipsy.js

$ ( '#example' ): twipsy ( տարբերակներ )

Ընտրանքներ

Անուն	տիպ	լռելյայն	նկարագրությունը
կենդանացնել	բուլյան	ճիշտ	կիրառել css fade անցում դեպի գործիքի հուշում
հետաձգում	թիվ	0	ուշացում՝ նախքան գործիքի հուշումը ցուցադրելը (ms)
հետաձգում	թիվ	0	ուշացում մինչև գործիքի հուշումը թաքցնելը (ms)
ընկնում ետ	լար	''	տեքստ օգտագործելու համար, երբ գործիքի հուշման վերնագիր չկա
տեղաբաշխում	լար	«վերևում»	ինչպես տեղադրել գործիքի հուշումը - վերևում | ստորև | ձախ | ճիշտ
html	բուլյան	կեղծ	թույլ է տալիս html բովանդակություն գործիքի հուշման մեջ
ապրել	բուլյան	կեղծ	օգտագործել իրադարձությունների պատվիրակությունը առանձին իրադարձությունների մշակողների փոխարեն
օֆսեթ	թիվ	0	գործիքի հուշման պիքսելային հեռացում թիրախային տարրից
կոչում	լարային | ֆունկցիան	'կոչում'	վերնագրի տեքստի առբերման հատկանիշ կամ մեթոդ
ձգան	լար	'սավառնել'	ինչպես է գործարկվում գործիքի հուշումը - սավառնել | կենտրոնացում | ձեռնարկ

Մեթոդներ

$().twipsy(տարբերակներ)

Կցում է twipsy կարգավորիչը տարրերի հավաքածուին:

.twipsy («ցուցադրել»)

Բացահայտում է twipsy տարրերը:

$ ( '#element' ): twipsy ( «ցուցադրել» )

.twipsy ('թաքցնել')

Թաքցնում է մի տարրը twipsy:

$ ( '#element' ): twipsy ( «թաքցնել» )

.twipsy (ճշմարիտ)

Վերադարձնում է տարրերի twipsy դասի օրինակ:

$ ( '#element' ): twipsy ( ճշմարիտ )

Ծանուցում Այլապես, սա կարելի է առբերել $().data('twipsy').

Դեմո

Popover plugin-ը տրամադրում է պարզ ինտերֆեյս՝ ձեր հավելվածում պոպովերներ ավելացնելու համար: Այն ընդլայնում է boostrap-twipsy.js փլագինը, այնպես որ համոզվեք, որ այդ ֆայլը նույնպես վերցրեք, երբ ձեր նախագծում ներառեք popover-ներ:

Բեռնել

Օգտագործելով boostrap-popover.js-ը

$ ( '#example' ): popover ( տարբերակներ )

Ընտրանքներ

Անուն	տիպ	լռելյայն	նկարագրությունը
կենդանացնել	բուլյան	ճիշտ	կիրառել css fade անցում դեպի գործիքի հուշում
հետաձգում	թիվ	0	ուշացում՝ նախքան գործիքի հուշումը ցուցադրելը (ms)
հետաձգում	թիվ	0	ուշացում մինչև գործիքի հուշումը թաքցնելը (ms)
ընկնում ետ	լար	''	տեքստ օգտագործելու համար, երբ գործիքի հուշման վերնագիր չկա
տեղաբաշխում	լար	'ճիշտ'	ինչպես տեղադրել գործիքի հուշումը - վերևում | ստորև | ձախ | ճիշտ
html	բուլյան	կեղծ	թույլ է տալիս html բովանդակություն գործիքի հուշման մեջ
ապրել	բուլյան	կեղծ	օգտագործել իրադարձությունների պատվիրակությունը առանձին իրադարձությունների մշակողների փոխարեն
օֆսեթ	թիվ	0	գործիքի հուշման պիքսելային հեռացում թիրախային տարրից
կոչում	լարային | ֆունկցիան	'կոչում'	վերնագրի տեքստի առբերման հատկանիշ կամ մեթոդ
բովանդակությունը	լարային | ֆունկցիան	«տվյալների բովանդակություն»	հատկանիշ կամ մեթոդ բովանդակության տեքստի առբերման համար
ձգան	լար	'սավառնել'	ինչպես է գործարկվում գործիքի հուշումը - սավառնել | կենտրոնացում | ձեռնարկ

Մեթոդներ

$().popover(տարբերակներ)

Նախաձեռնում է popovers տարրերի հավաքածուի համար:

.popover ('show')

Բացահայտում է տարրերի պոպովեր:

$ ( '#element' ): popover ( «ցուցադրում» )

.popover ('թաքցնել')

Թաքցնում է տարրերի պոպովերը:

$ ( '#element' ): popover ( «թաքցնել» )

Դեմո

սավառնել popover-ի համար

Զգուշացման հավելվածը գերփոքր դաս է զգուշացումներին սերտ ֆունկցիոնալություն ավելացնելու համար:

Բեռնել

Օգտագործելով bootstrap-alerts.js

$ ( «.alert-message» ): զգոն ()

Նշում

Պարզապես ավելացրեք data-alertհատկանիշ ձեր ահազանգային հաղորդագրություններին, որպեսզի դրանք ավտոմատ կերպով ապահովեն փակ գործառույթներ:

Մեթոդներ

$().alert()

Փաթաթում է բոլոր ահազանգերը փակ ֆունկցիոնալությամբ: Որպեսզի ձեր ծանուցումները փակվեն, համոզվեք, որ դրանք .fadeև .inդասը արդեն կիրառվել են դրանց համար:

.alert ('փակել')

Փակում է ահազանգը:

$ ( «.alert-message» ): զգուշացում ( «փակ» )

Դեմո