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

Բեռնել

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

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

Ընտրանքներ

Անուն	տիպ	լռելյայն	նկարագրությունը
ֆոն	բուլյան, լարային	կեղծ	Ներառում է մոդալ-ֆոնային տարր: Սահմանեք հետնաշերտը, "static"եթե չեք ցանկանում, որ մոդալը փակվի, երբ հետնապատկերը սեղմված է:
ստեղնաշար	բուլյան	կեղծ	Փակում է մոդալը, երբ սեղմված է escape ստեղնը
ցուցադրում	բուլյան	կեղծ	Դասի սկզբնավորման ժամանակ բացում է մոդալը

Նշում

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

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

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

Մեթոդներ

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

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

$ ( '#my-modal' ): մոդալ ({
  ստեղնաշար : ճիշտ է 
})

.modal ('toggle')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Դեմո

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

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

Բեռնել

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

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

Նշում

Ցանկացած նավարկիչի տարրում բացվող գործառույթն արագ ավելացնելու համար օգտագործեք 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-ի վերևի տողում ավելացնելու համար:

Բեռնել

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

$ ( '#վերին բար' ): scrollSpy ()

Նշում

Որպեսզի հեշտությամբ ավելացնեք ձեր նավարկության վարքագիծը, պարզապես ավելացրեք 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 ( «թարմացնել» )

Դեմո

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

Այս փլագինը առաջարկում է լրացուցիչ գործառույթ՝ կոճակի վիճակը կառավարելու համար:

Բեռնել

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

$ ( '.tabs' ): կոճակ ()

Մեթոդներ

$().button('toggle')

Անջատում է մղման վիճակը: Տալիս է btn տեսք, որ այն ակտիվացված է:

Ծանուցում Դուք կարող եք միացնել կոճակի ավտոմատ փոխարկումը՝ օգտագործելով data-toggleհատկանիշը:

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('loading')

Սահմանում է կոճակի վիճակը բեռնման համար - անջատում է կոճակը և փոխում է տեքստը բեռնվող տեքստի: Տեքստի բեռնումը պետք է սահմանվի կոճակի տարրի վրա՝ օգտագործելով տվյալների հատկանիշը data-loading-text:

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

$().button('reset')

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է բնօրինակ տեքստի:

$().button(string)

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է ցանկացած տվյալների սահմանված տեքստային վիճակի:

<button class = "btn" data-complete-text = "ավարտված է!" > ... </button>   
<script>
  $('.btn').button('ավարտված')
</scrip>

Դեմո

Բեռնվում է ցուցադրություն Միացնել Դեմո

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

Բեռնել

Օգտագործելով bootstrap-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> 
</div>
 
<script>
  $ ( ֆունկցիա () {  
    $ ( '.tabs' ): ներդիրներ ()
  })
</script>

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

Իրադարձություն	Նկարագրություն
փոփոխություն	Այս իրադարձությունը բացվում է ներդիրների փոփոխության ժամանակ: Օգտագործեք event.targetև event.relatedTargetթիրախավորեք համապատասխանաբար ակտիվ ներդիրը և նախորդ ակտիվ ներդիրը:

$ ( '#.tabs' ): bind ( 'փոփոխություն' , ֆունկցիա ( e ) {   
  ե . թիրախ // ակտիվացված ներդիր
  ե . relatedTarget // նախորդ ներդիր
})

Դեմո

• տուն
• Անձնագիր
• Հաղորդագրություններ
• Կարգավորումներ
• Բացվող
  • @ճարպ
  • @mdo

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

Բեռնել

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

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

Ընտրանքներ

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

Ծանուցում Անհատական ​​twipsy օրինակի ընտրանքները կարող են այլընտրանքային կերպով սահմանվել տվյալների ատրիբուտների օգտագործման միջոցով:

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Որոշ վերնագրի տեքստ' > տեքստ </a>    

Մեթոդներ

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

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

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

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

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

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

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

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

.twipsy (ճշմարիտ)

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

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

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

Դեմո

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

Ծանուցում Դուք պետք է ներառեք bootstrap-twipsy.js ֆայլը bootstrap-popover.js-ից առաջ :

Բեռնել

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

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

Ընտրանքներ

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

Ծանուցում Անհատական ​​popover օրինակի ընտրանքները կարող են որպես այլընտրանքային նշվել տվյալների ատրիբուտների օգտագործման միջոցով:

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > text </a>    

Մեթոդներ

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

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

.popover ('show')

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

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

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

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

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

Դեմո

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

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

Բեռնել

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

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

Նշում

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

Ընտրանքներ

Անուն	տիպ	լռելյայն	նկարագրությունը
ընտրիչ	լար	'.փակել'	Ինչ ընտրիչ պետք է թիրախավորել ահազանգը փակելու համար:

Մեթոդներ

$().alert()

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

.alert ('փակել')

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

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

Դեմո