Javascript ya Xitirhisiwa xa Bootstrap

Tisa swiphemu swa Bootstrap evuton’wini—sweswi hi 12 wa ti-plugin ta jQuery leti endleriweke wena.

Timodali

Ku teka loku olovisiweke, kambe loku cinca-cincaka, eka plugin ya ndhavuko ya modal ya javascript leyi nga na ntsena ntirho wa le hansi lowu lavekaka na swihlawulekisi swo tlhariha.

Swilo leswi nga ehansi

Engetela timenyu leti nga ehansi eka kwalomu ka xin’wana ni xin’wana eka Bootstrap hi xiengetelo lexi xo olova. Bootstrap yi na nseketelo lowu heleleke wa menyu leyi nga ehansi eka eka navbar, tithebhu, na tiphilisi.

Xiphepherhele xa swiphepherhele

Tirhisa scrollspy ku pfuxeta hi ku tisungulela swihlanganisi eka navbar ya wena ku kombisa xihlanganisi xa sweswi lexi tirhaka hi ku ya hi xiyimo xa ku rhendzeleka.

Tithebhu leti nga cinciwaka

Tirhisa plugin leyi ku endla leswaku tithebhu na tiphilisi ti pfuna swinene hi ku ti pfumelela ku cinca-cinca hi ku tirhisa tipheji ta tithebhu ta swilo swa laha kaya.

Switsundzuxo swa Switirhisiwa

Ku teka lokuntshwa eka jQuery Tipsy plugin, Tooltips a yi titsheganga hi swifaniso—va tirhisa CSS3 eka swifaniso leswi hanyaka na data-attributes eka vuhlayiselo bya swihloko swa laha kaya.

Popovers * .

Engetelani swifunengeto leswitsongo swa swilo leswi nga endzeni, ku fana ni leswi nga eka iPad, eka elemente yihi na yihi yo veka rungula ra vumbirhi.

* Swi lava leswaku ku katsiwa Tooltips

Mahungu ya xitsundzuxo

Plugin ya xitsundzuxo i tlilasi leyitsongo yo engetela ntirho wa le kusuhi eka switsundzuxo.

Swikomba-nkarhi

Endla swo tala hi swikomba-nkarhi. Vulawuri bya swikomba-nkarhi kumbe ku tumbuluxa mintlawa ya swikomba-nkarhi swa swiphemu swo tala swo fana na tibarhi ta switirhisiwa.

Ku wa

Kuma switayele swa le hansi na nseketelo lowu cinca-cincaka wa swiphemu leswi pfalaka ku fana na ti-accordion na ku famba-famba.

Xigwitsirisi

Endla merry-go-round ya swilo swihi na swihi leswi u lavaka ku nyika nkombiso wa swilayidi lowu tirhisanaka wa swilo leswi nga endzeni.

Thayipha emahlweni

Plugin ya xisekelo, leyi andlariweke hi ku olova yo hatlisa ku tumbuluxa ti-typeahead to saseka hi ku nghenisa tsalwa ra fomo rihi na rihi.

Ku cinca-cinca * .

Ku kuma switandzhaku swo olova swa ku cinca, katsa bootstrap-transition.js kan’we ku rhetela eka ti-modal kumbe ku fade out switsundzuxo.

* Swi laveka eka animation eka ti-plugin

Tinhloko ta le henhla! Ti-plugin hinkwato ta javascript ti lava vuhundzuluxeri bya sweswinyana bya jQuery.

Malunghana na ti modals

Ku teka loku olovisiweke, kambe loku cinca-cincaka, eka plugin ya ndhavuko ya modal ya javascript leyi nga na ntsena ntirho wa le hansi lowu lavekaka na swihlawulekisi swo tlhariha.

Download fayili

Xikombiso xa xiyimo xa le henhla

Laha hansi ku na modal leyi hundzuluxeriweke hi ndlela leyi nga cinciki.

Demo leyi hanyaka

Toggle a modal hi ku tirhisa javascript hi ku tikhoma button leyi nga laha hansi. Yi ta rhetela ehansi yi tlhela yi nyamalala ku suka ehenhla ka tluka.

Ku sungula demo modal

Ku tirhisa bootstrap-modal

Fonela modal hi ku tirhisa javascript:

  1. $ ( '#Modal ya mina' ). modal ( swihlawulekisi ) .

Swihlawulekisi

Vito muxaka ku tlula nhlamuselo
xifaniso xa le ndzhaku xitsonga xitsonga ntiyiso Ku katsa na xiaki xa modal-backdrop. Handle ka sweswo, boxa staticeka backdrop leyi nga pfaliki modal eka click.
xikhiya xa xikhiya xitsonga xitsonga ntiyiso Ku pfala modal loko ku tshikileriwa escape key
kombisa xitsonga xitsonga ntiyiso Ku kombisa modal loko yi sunguriwa.

Ku fungha swilo

U nga tirhisa ti modals eka pheji ya wena hi ku olova handle ko tsala layini yin’we ya javascript. Ntsena veka data-toggle="modal"eka elemente ya mulawuri leyi nga na data-target="#foo"kumbe href="#foo"leyi fambelanaka na id ya elemente ya modal, naswona loko yi tsindziyerile, yi ta sungula modal ya wena.

Nakambe, ku engetela swihlawulekisi eka xikombiso xa wena xa modal, swi katsa ntsena tanihi swihlawulekisi swa data leswi engetelekeke eka xiaki xa vulawuri kumbe ku fungha ka modal hi koxe.

  1. <a class = "btn" data-toggle = "modal" href = "#Modal ya mina" > Sungula Modal </a>
  1. <div class = "ku fihla ka xivumbeko" id = "Modal ya mina" >
  2. <div class = "nhlokomhaka-ya-modal" >
  3. < muxaka wa buti = "button" class = "pfala" data-dismiss = "modal" > × </button>
  4. <h3> Nhlokomhaka ya modali </h3>
  5. </div>
  6. <div class = "miri-wa-modal" >
  7. <p> Miri wun’we lowunene... </p>
  8. </div>
  9. <div class = "xihlamusela-marito xa xiyimo xa le hansi" >
  10. <a href = "#" tlilasi = "btn" data-dismiss = "modal" > Pfala </a>
  11. <a href = "#" class = "btn btn-primary" > Hlayisa ku cinca </a>
  12. </div>
  13. </div>
Tinhloko ta le henhla! Loko u lava leswaku modal ya wena yi hanya ku nghena na ku huma, engetela ntsena .fadetlilasi eka .modalelemente (languta eka demo ku vona leswi hi xiendlo) ivi u katsa bootstrap-transition.js.

Maendlelo

.modal(swihlawulekisi) .

Ku endla leswaku nhundzu ya wena yi tirha tanihi modal. Ku amukela swihlawulekisi swa ku hlawula object.

  1. $ ( '#Modal ya mina' ). modal ({
  2. xikhiya : mavunwa
  3. }) .

.modal('ku cinca-cinca') .

Hi voko u cinca-cinca modal.

  1. $ ( '#Modal ya mina' ). modal ( 'ku cinca-cinca' ) .

.modal('kombisa') .

Hi voko u pfula modal.

  1. $ ( '#Modal ya mina' ). modal ( 'kombisa' ) .

.modal('fihla') .

Hi voko u tumbeta modal.

  1. $ ( '#Modal ya mina' ). modal ( 'fihla' ) .

Swiendlakalo

Tlilasi ya modal ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa modal.

Nkhuvo Nhlamuselo
kombisa Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
ku kombisiwile Xiendlakalo lexi xi duvuriwa loko modal yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka css ku hetisisiwa).
tumbela Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya hidexikombiso yi vitaniwile.
tumbetile Xiendlakalo lexi xi duvuriwa loko modal yi hetile ku tumbetiwa eka mutirhisi (yi ta rindza ku cinca ka css ku hela).
  1. $ ( '#Modal ya mina' ). on ( 'ku fihliwile' , ntirho () {
  2. // endla swo karhi...
  3. }) .

Plugin ya ScrollSpy i ya ku pfuxeta hi ku tisungulela swikongomelo swa nav hi ku ya hi xiyimo xa scroll.

Download fayili

Xikombiso xa navbar na scrollspy

Skrolela ndhawu leyi nga laha hansi ivi u hlalela mpfuxeto wa ku famba-famba. Swilo leswitsongo leswi nga ehansi swi ta kombisiwa na swona. Ringeta ku swi endla!

@mafurha

Ad leggings keytar, brunch id vutshila nkhuvo dolor labore. Pitchfork yr enim lo-fi va nga si xavisa qui. Tumblr timfanelo ta xikanyakanya xa purasi ku ya etafuleni whatever. Anim keffiyeh xitsonga xitsonga xitsonga xitsonga xitsonga. Velit seitan mcsweeney's xifaniso xa xiyindlwana 3 mpfundla n'weti irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui kumbexana a wu se twa hi vona et cardigan nkwama wa vutshembeki culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred xihlekiso biodiesel keffiyeh mutirhi wa mavoko ullamco consequat.

@mdo

Veniam marfa malebvu ya xikanyakanya, adipisicing fugiat velit malebvu ya pitchfork. Freegan malebvu aliqua cupidat mcsweeney ya vero. Cupidatat mune loko nisi, ea helvetica nulla carles. Tattooed cosby jesi lori swakudya, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Carles non aesthetic ku endla vutiolori quis gentrify. Brooklyn adipisicing vutshila bya vutshila bya le xihundleni xa keytar deserunt.

n'we

Occaecat commodo xihlala xa xirhendzevutani. Fap vutshila byalwa deserunt xikanyakanya ea. Lomo timfanelo ta xikanyakanya adipisicing banh mi, velit ea sunt xiyimo lexi landzelaka locavore kofi ya masungulo yin’we eka magna veniam. Vutomi bya le henhla id vinyl, echo phaka consequat quis aliquip banh mi pitchfork. Vero VHS est ku hlantswa. Consectetur nisi DIY xikhwama xa murhumiwa lexitsongo. Cred ex eka, delectus consectetur fanny pack iphone leyi nga ta tshama nkarhi wo leha.

mbirhi

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 nkwama wa murhumiwa marfa yini na yini delectus lori ya swakudya. Sapiente synth id ya ku ehleketa. Locavore sed helvetica cliche irony, ti thundercats kumbexana a wu si twa hi tona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat va nga si xavisiwa, terry richardson proident brunch nesciunt quis cosby xisuti pariatur keffiyeh ut helvetica mutirhi wa mavoko. Cardigan craft biya seitan yi lunghekile velit. VHS chambray laboris xitsongwatsongwana xa nkarhinyana. Anim mollit minim commodo ullamco switsongwatsongwana swa ku dzindza ka tilo.


Hi ku tirhisa bootstrap-scrollspy.js

Fonela scrollspy hi ku tirhisa javascript:

  1. $ ( '#navbar' ). xiphepherhele xa swiphepherhele () .

Ku fungha swilo

Ku engetela hi ku olova mahanyelo ya scrollspy eka ku famba-famba ka wena ka topbar, engetela ntsena data-spy="scroll"eka elemente leyi u lavaka ku yi hlota (hi ntolovelo leswi swi nga va miri).

  1. <body data-spy = "ku rhendzeleka" > ... </miri>
Tinhloko ta le henhla! Swihlanganisi swa Navbar swi fanele ku va na swikongomelo swa id leswi nga lulamisiwaka. Hi xikombiso, a yi <a href="#home">home</a>fanele yi fambisana ni nchumu lowu nga eka dom ku fana na <div id="home"></div>.

Maendlelo

.scrollspy('ku pfuxeta') .

Loko u tirhisa scrollspy hi ku fambisana na ku engetela kumbe ku susa swiaki eka DOM, u ta lava ku vitana ndlela yo pfuxeta ku fana na sweswo:

  1. $ ( '[data-spy="ku rhendzeleka"]' ). xin'wana na xin'wana ( ntirho () { .
  2. var $ nhlori = $ ( leswi ). scrollspy ( 'ku pfuxeta' ) .
  3. });

Swihlawulekisi

Vito muxaka ku tlula nhlamuselo
offset nomboro 10. Tipikseli to offset kusuka ehenhla loko u hlayela xiyimo xa scroll.

Swiendlakalo

Nkhuvo Nhlamuselo
ku tirhisa Xiendlakalo lexi xi pfurha nkarhi wun’wana ni wun’wana loko nchumu lowuntshwa wu sungula ku tirhisiwa hi scrollspy.

Plugin leyi yi engetela ku hatlisa, ku cinca-cinca ka thebhu na ntirho wa philisi ku cinca hi ku tirhisa swilo swa laha kaya.

Download fayili

Xikombiso xa tithebhu

Click ti tabs leti nga laha hansi ku cinca-cinca exikarhi ka ti pane leti fihliweke, hambi ku ri hi ku tirhisa ti dropdown menus.

Raw denim kumbexana a wu se twa hi vona jean shorts Austin. Nesciunt tofu stumptown aliqua, ku basisiwa ka n’wini wa synth ya retro. Xikhovha xa malebvu xa nkarhinyana, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Xisuti xa cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat xitsonga xitsonga xitsonga xitsonga xitsonga xitsonga. Seitan aliquip quis cardigan swiambalo swa le Amerika, muxavisi wa nyama 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.


Hi ku tirhisa bootstrap-tab.js

Endla leswaku tithebhu ta tithebhu ti tirha hi ku tirhisa javascript (thebhu yin’wana ni yin’wana yi lava ku tirhisiwa hi yoxe):

  1. $ ( '#Tab ya mina a' ). click ( ntirho ( e ) { .
  2. e . sivelaXihlawulekisi ();
  3. $ ( leswi ). tab ( 'kombisa' );
  4. }) .

U nga tirhisa tithebhu ha yin’we-yin’we hi tindlela to hlayanyana:

  1. $ ( '#Tab ya mina a[href="#profayile"]' ). tab ( 'kombisa' ); // Hlawula thebhu hi vito
  2. $ ( '#Tab ya mina a:yo sungula' ). tab ( 'kombisa' ); // Hlawula thebhu yo sungula
  3. $ ( '#Tab ya mina a:yo hetelela' ). tab ( 'kombisa' ); // Hlawula thebhu yo hetelela
  4. $ ( '#Tab ya mina li:eq(2) a' ). tab ( 'kombisa' ); // Hlawula thebhu ya vunharhu (0-indexed) .

Ku fungha swilo

U nga tirhisa ku famba-famba ka thebhu kumbe philisi handle ko tsala javascript yihi na yihi hi ku boxa ntsena data-toggle="tab"kumbe data-toggle="pill"eka elemente. Ku engetela titlilasi ta na eka thebhu navswi ta tirhisa xitayili xa thebhu ya bootstrap.nav-tabsul

  1. <ul tlilasi = "nav nav-tithebhu" >
  2. <li><a href = "#ekaya" data-toggle = "thebhu" > Ekaya </a></li>
  3. <li><a href = "#profayile" data-toggle = "thebhu" > Xivumbeko </a></li>
  4. <li><a href = "#mahungu" data-toggle = "thebhu" > Mahungu </a></li>
  5. <li><a href = "#swiyimiso" data-toggle = "thebhu" > Switirhisiwa </a></li>
  6. </ul>

Maendlelo

$().thebhu ya kona

Ku tirhisa xiaki xa thebhu na xigwitsirisi xa nhundzu. Tab yi fanele ku va na a data-targetkumbe ku hrefkongomisa eka node ya xikhomela eka DOM.

  1. <ul class = "nav nav-tithebhu" id = "Tab ya mina" >
  2. <li class = "active" ><a href = "#kaya" > Ekaya </a></li>
  3. <li><a href = "#profayile" > Xivumbeko </a></li>
  4. <li><a href = "#mahungu" > Mahungu </a></li>
  5. <li><a href = "#swiyimiso" > Switirhisiwa </a></li>
  6. </ul>
  7.  
  8. <div class = "nhundzu ya thebhu" >
  9. <div class = "thebhu-pheni leyi tirhaka" id = "kaya" > ... </div>
  10. <div class = "thebhu-pheni" id = "phurofayili" > ... </div>
  11. <div class = "thebhu-pheni" id = "mahungu" > ... </div>
  12. <div class = "tab-pane" id = "swiletelo" > ... </div>
  13. </div>
  14.  
  15. <tsalwa>
  16. $ ( ntirho () { .
  17. $ ( '#Tab ya mina a:yo hetelela' ). tab ( 'kombisa' );
  18. }) .
  19. </script>

Swiendlakalo

Nkhuvo Nhlamuselo
kombisa Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu, kambe thebhu leyintshwa yi nga si kombisiwa. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
ku kombisiwile Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu endzhaku ka loko thebhu yi kombisiwile. Tirhisa event.targetna event.relatedTargetku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
  1. $ ( 'a [ku cinca-cinca ka data="thebhu"]' ). on ( 'ku kombisiwile' , ntirho ( e ) { .
  2. e . target // thebhu leyi tirhisiweke
  3. e . relatedTarget // thebhu ya khale
  4. }) .

Malunghana na Switsundzuxo swa Switirhisiwa

Ku hlohloteriwa hi jQuery.tipsy plugin ya kahle swinene leyi tsariweke hi Jason Frame; Switirhisiwa i vuhundzuluxeri lebyi pfuxetiweke, lebyi nga titshegangiki hi swifaniso, byi tirhisa css3 eka swifaniso leswi hanyaka, na data-attributes eka vuhlayiselo bya swihloko swa laha kaya.

Download fayili

Xikombiso xa ku tirhisiwa ka Switirhisiwa

Hover ehenhla ka swihlanganisi leswi nga laha hansi ku vona switsundzuxo swa switirhisiwa:

Tight pants next level keffiyeh kumbexana a wu se swi twa. Xifaniso xa xivandla xa malebvu ya denim yo ka yi nga swekiwanga letterpress vegan messenger bag stumptown. Seitan ya le purasini ku ya etafuleni, mcsweeney’s fixie sustainable quinoa 8-bit swiambalo swa le Amerika swi na terry richardson vinyl chambray. Beard stumptown, ti-cardigan banh mi lomo ti- thundercat. Tofu biodiesel williamsburg marfa, mune loko mcsweeney ya basisa vegan chambray. A really ironic artisan whatever keytar , scenester purasi-ku-tafula banksy Austin twitter khoma freegan cred raw denim kofi ya masungulo yin’we ya xitsongwatsongwana.


Hi ku tirhisa bootstrap-tooltip.js

Pfuxeta xitsundzuxo xa xitirhisiwa hi ku tirhisa javascript:

  1. $ ( '#xikombiso' ). xitsundzuxo xa switirhisiwa ( swihlawulekisi ) .

Swihlawulekisi

Vito muxaka ku tlula nhlamuselo
ku endla swifaniso leswi hanyaka xitsonga xitsonga ntiyiso tirhisa ku cinca ka css fade eka xitirhisiwa
ku vekiwa ka swilo ntambhu|ntirho 'henhla' ndlela yo veka xitirhisiwa - ehenhla | ehansi | ximatsi | mfanelo
xihlawulekisi xa swilo ntambu vunwa Loko ku nyikiwile xihlawulekisi, swilo swa xitsundzuxo xa switirhisiwa swi ta nyikiwa swikongomelo leswi boxiweke.
xirhangi ntambhu ya xirhendzevutani | ntirho '' . nkoka wa xihloko xa xiviri loko thegi ya `title` yi nga ri kona
gwedla ntambu 'hover'. ndlela leyi xitirhisiwa xi pfuriwaka ha yona - hover | ku kongomisa | manyuwali
hlwela nomboro | nchumu 0.

ku hlwela ku kombisa na ku tumbeta xitsundzuxo xa xitirhisiwa (ms) - a swi tirhi eka muxaka wa xihlohloteri xa manual

Loko nomboro yi nyikiwile, ku hlwela ku tirhisiwa eka havumbirhi bya ku fihla/kombisa

Xivumbeko xa nchumu i:delay: { show: 500, hide: 100 }

Tinhloko ta le henhla! Swihlawulekisi swa switsundzuxo swa switirhisiwa swa munhu hi xiyexe swi nga boxiwile hi ndlela yin’wana hi ku tirhisa swihlawulekisi swa datha.

Ku fungha swilo

Hi swivangelo swa matirhelo, Tooltip na Popover data-apis swi hlawula ku nghena Loko u lava ku swi tirhisa ntsena boxa nhlawulo wa xihlawulekisi.

  1. <a href = "#" rel = "xitsundzuxo xa xitirhisiwa" title = "xitsundzuxo xo sungula xa xitirhisiwa" > hover ehenhla ka mina </a>

Maendlelo

$().xitsundzuxo xa switirhisiwa(swihlawulekisi) .

Ku khomanisa xitirhisiwa xa xitirhisiwa eka nhlengeleto wa swiaki.

.tooltip('kombisa') .

Ku paluxa xitsundzuxo xa xitirhisiwa xa elemente.

  1. $ ( '#xiaki' ). xitsundzuxo xa switirhisiwa ( 'kombisa' ) .

.tooltip('fihla') .

Ku fihla xitsundzuxo xa xitirhisiwa xa elemente.

  1. $ ( '#xiaki' ). xitsundzuxo xa switirhisiwa ( 'fihla' ) .

.tooltip('ku cinca-cinca') .

Ku cinca-cinca xitsundzuxo xa xitirhisiwa xa elemente.

  1. $ ( '#xiaki' ). xitsundzuxo xa switirhisiwa ( 'toggle' ) .

Malunghana ni ti- popovers

Engetelani swifunengeto leswitsongo swa swilo leswi nga endzeni, ku fana ni leswi nga eka iPad, eka elemente yihi na yihi yo veka rungula ra vumbirhi.

* Swi lava leswaku Tooltip yi katsiwa

Download fayili

Xikombiso xa hover popover

Hover ehenhla ka button ku pfuxa popover.


Hi ku tirhisa bootstrap-popover.js

Endla leswaku ti-popovers ti tirha hi ku tirhisa javascript:

  1. $ ( '#xikombiso' ). popover ( swihlawulekisi ) .

Swihlawulekisi

Vito muxaka ku tlula nhlamuselo
ku endla swifaniso leswi hanyaka xitsonga xitsonga ntiyiso tirhisa ku cinca ka css fade eka xitirhisiwa
ku vekiwa ka swilo ntambhu|ntirho 'mfanelo' ndlela yo veka popover - ehenhla | ehansi | ximatsi | mfanelo
xihlawulekisi xa swilo ntambu vunwa loko ku nyikiwile xihlawulekisi, swilo swa xitsundzuxo xa switirhisiwa swi ta nyikiwa swikongomelo leswi boxiweke
gwedla ntambu 'hover'. ndlela leyi xitirhisiwa xi pfuriwaka ha yona - hover | ku kongomisa | manyuwali
xirhangi ntambhu ya xirhendzevutani | ntirho '' . nkoka wa xihloko xa xiviri loko xihlawulekisi xa `title` xi nga ri kona
vundzeni ntambhu ya xirhendzevutani | ntirho '' . nkoka wa nhundzu ya xiviri loko xihlawulekisi xa `data-content` xi nga ri kona
hlwela nomboro | nchumu 0.

ku hlwela ku kombisa na ku tumbeta popover (ms) - a swi tirhi eka muxaka wa manual trigger

Loko nomboro yi nyikiwile, ku hlwela ku tirhisiwa eka havumbirhi bya ku fihla/kombisa

Xivumbeko xa nchumu i:delay: { show: 500, hide: 100 }

Tinhloko ta le henhla! Swihlawulekisi swa ti-popovers ha yin’we-yin’we swi nga boxiwile hi ndlela yin’wana hi ku tirhisa swihlawulekisi swa datha.

Ku fungha swilo

Hi swivangelo swa matirhelo, Tooltip na Popover data-apis swi hlawula ku nghena Loko u lava ku swi tirhisa ntsena boxa nhlawulo wa xihlawulekisi.

Maendlelo

$().popover(swihlawulekisi) .

Ku sungula ti-popovers ta nhlengeleto wa swiaki.

.popover('kombisa') .

Ku paluxa an elements popover.

  1. $ ( '#xiaki' ). popover ( 'kombisa' ) .

.popover('fihla') .

Ku tumbeta an elements popover.

  1. $ ( '#xiaki' ). popover ( 'fihla' ) .

.popover('ku cinca-cinca') .

Ku cinca-cinca ka swiaki swa popover.

  1. $ ( '#xiaki' ). popover ( 'ku cinca-cinca' ) .

Malunghana ni switsundzuxo

Plugin ya xitsundzuxo i tlilasi leyitsongo yo engetela ntirho wa le kusuhi eka switsundzuxo.

Downloda

Xikombiso xa switsundzuxo

Plugin ya switsundzuxo yi tirha eka marungula ya switsundzuxo ya nkarhi na nkarhi, na ku sivela marungula.

Guacamole yo kwetsima! Best check yo self, a wu languteki kahle ngopfu.

Oh snap! U kume xihoxo!

Cinca leswi na leswiya ivi u ringeta nakambe. Duis mollis, est non commodo luctus, nisi erat xirho xa xirhendzevutani, xitsongwatsongwana xa xirhendzevutani xa xirhendzevutani. Cras mattis consectetur purus yitshama eka fermentum.

Teka goza leri Kumbe u endla leswi


Hi ku tirhisa bootstrap-alert.js

Endla leswaku ku hlongoriwa ka xitsundzuxo ku tirha hi ku tirhisa javascript:

  1. $ ( ".xitsundzuxo" ). xitsundzuxo () .

Ku fungha swilo

Ntsena engetela data-dismiss="alert"eka buti ya wena yo pfala ku nyika hi ku tisungulela ntirho wa ku pfala wa xitsundzuxo.

  1. <a class = "pfala" data-dismiss = "xitsundzuxo" href = "#" > &minkarhi; </a>

Maendlelo

$().xitsundzuxo() .

Pfuxeta switsundzuxo hinkwaswo hi ntirho wa le kusuhi. Ku endla leswaku switsundzuxo swa wena swi hanya loko swi pfariwile, tiyisisa leswaku swi na .fadena .intlilasi leyi se yi tirhisiweke eka swona.

.alert('pfala') .

Ku pfala xitsundzuxo.

  1. $ ( ".xitsundzuxo" ). xitsundzuxo ( 'pfala' ) .

Swiendlakalo

Tlilasi ya xitsundzuxo ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa xitsundzuxo.

Nkhuvo Nhlamuselo
pfala Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku closevitaniwa ndlela ya xikombiso.
ku pfariwile Xiendlakalo lexi xi pfuriwa loko xitsundzuxo xi pfariwile (xi ta rindza ku cinca ka css ku hela).
  1. $ ( '#xitsundzuxo xa mina' ). bind ( 'ku pfariwile' , ntirho () {
  2. // endla swo karhi...
  3. }) .

Hi

Endla swo tala hi swikomba-nkarhi. Vulawuri bya swikomba-nkarhi kumbe ku tumbuluxa mintlawa ya swikomba-nkarhi swa swiphemu swo tala swo fana na tibarhi ta switirhisiwa.

Download fayili

Swikombiso swa matirhiselo

Tirhisa plugin ya swikomba-nkarhi eka swiyimo na ku cinca-cinca.

Stateful
Toggle yin’we
Bokisi ro kambela
Xiya-ni-moya

Hi ku tirhisa bootstrap-button.js

Endla leswaku swikomba-nkarhi swi tirha hi ku tirhisa javascript:

  1. $ ( '.nav-tithebhu' ). xikomba -nkarhi () .

Ku fungha swilo

Swihlawulekisi swa datha i swa nkoka eka xiengetelo xa buti. Languta khodi ya xikombiso laha hansi eka tinxaka to hambana ta swimaki.

  1. <!-- Engetela data-toggle="button" ku endla leswaku ku cinca-cinca ku tirha eka buti yin'we -->
  2. <button class = "btn" data-toggle = "button" > Xihlawulekisi xin'we </button>
  3.  
  4. <!-- Engetela data-toggle="buttons-checkbox" ya ku cinca-cinca ka xitayili xa bokisi ro kambela eka btn-group -->
  5. <div class = "btn-group" data-toggle = "swikomba-ndlela-bokisi ro kambela" >
  6. <button class = "btn" > Ximatsi </button>
  7. <button class = "btn" > Xikarhi </button>
  8. <button class = "btn" > Xinene </button>
  9. </div>
  10.  
  11. <!-- Engetela data-toggle="buttons-radio" ya ku cinca-cinca ka xitayili xa xiya-ni-moya eka btn-group -->
  12. <div class = "btn-ntlawa" data-toggle = "swikomba-ndlela-radio" >
  13. <button class = "btn" > Ximatsi </button>
  14. <button class = "btn" > Xikarhi </button>
  15. <button class = "btn" > Xinene </button>
  16. </div>

Maendlelo

$().button('ku cinca-cinca') .

Ku cinca-cinca xiyimo xa push. Yi nyika button xivumbeko xa leswaku yi tirhisiwile.

Tinhloko ta le henhla! U nga endla leswaku auto toggling ya button yi tirha hi ku tirhisa data-toggleattribute.
  1. < tlilasi ya buti = "btn" data-toggle = "buti" > ... </button>

$().button('ku layicha') .

Seta xiyimo xa buti eka ku layicha - yi tshikisa buti na ku cincana tsalwa eka ku layicha tsalwa. Ku layicha tsalwa ku fanele ku hlamuseriwa eka elemente ya buti hi ku tirhisa xihlawulekisi xa datha data-loading-text.

  1. <button class = "btn" data-loading-text = "ku layicha swilo..." > ... </button>
Tinhloko ta le henhla! Firefox yi phikelela xiyimo lexi nga tirhiki eka ku layicha ka matluka hinkwawo . Ntlhantlho wa leswi i ku tirhisa autocomplete="off".

$().button('seta nakambe') .

Ku tlherisela xiyimo xa buti - cinca tsalwa eka tsalwa ra masungulo.

$().button(ntambhu) .

Yi tlherisela xiyimo xa buti - yi cincana tsalwa eka xiyimo xihi na xihi xa tsalwa lexi hlamuseriweke hi datha.

  1. <button class = "btn" data-ku hetiseka-tsalwa = "ku hetisiwile!" > ... </button> leyi nga kona
  2. <tsalwa>
  3. $ ( '.btn' ). button ( 'ku hetiseka' ) .
  4. </script>

Hi

Kuma switayele swa le hansi na nseketelo lowu cinca-cincaka wa swiphemu leswi pfalaka ku fana na ti-accordion na ku famba-famba.

Download fayili

* Swi lava leswaku ku katsiwa plugin ya Transitions.

Xikombiso xa accordion

Hi ku tirhisa plugin ya collapse, hi ake xitirhisiwa xo olova xa xitayili xa accordion:

Anim pariatur cliche reprehenderit, enim eiusmod vutomi bya le henhla accusamus terry richardson ad ximanga. 3 mpfundla wa n’weti officia aute, non cupidat xikanyakanya dolor brunch. Lori ya swakudya quinoa nesciunt laborum eiusmod. Brunch 3 mpfundla n’weti tempo, sunt aliqua veka xinyenyana eka yona squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, ntirho wa vutshila bya biya wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur muxanisi wa nyama vice lomo. Leggings occaecat craft beer purasi-ku-tafula, raw denim aesthetic synth nesciunt kumbexana a wu si twa hi vona accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod vutomi bya le henhla accusamus terry richardson ad ximanga. 3 mpfundla wa n’weti officia aute, non cupidat xikanyakanya dolor brunch. Lori ya swakudya quinoa nesciunt laborum eiusmod. Brunch 3 mpfundla n’weti tempo, sunt aliqua veka xinyenyana eka yona squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, ntirho wa vutshila bya biya wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur muxanisi wa nyama vice lomo. Leggings occaecat craft beer purasi-ku-tafula, raw denim aesthetic synth nesciunt kumbexana a wu si twa hi vona accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod vutomi bya le henhla accusamus terry richardson ad ximanga. 3 mpfundla wa n’weti officia aute, non cupidat xikanyakanya dolor brunch. Lori ya swakudya quinoa nesciunt laborum eiusmod. Brunch 3 mpfundla n’weti tempo, sunt aliqua veka xinyenyana eka yona squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, ntirho wa vutshila bya biya wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur muxanisi wa nyama vice lomo. Leggings occaecat craft beer purasi-ku-tafula, raw denim aesthetic synth nesciunt kumbexana a wu si twa hi vona accusamus labore sustainable VHS.

Hi ku tirhisa bootstrap-collapse.js

Endla leswaku swi tirha hi ku tirhisa javascript:

  1. $ ( ".ku tshoveka" ). ku wa () .

Swihlawulekisi

Vito muxaka ku tlula nhlamuselo
mutswari xihlawulekisi xa swilo vunwa Loko selector kutani swiaki hinkwaswo leswi pfaleriwaka ehansi ka mutswari loyi a boxiweke swi ta pfala loko nchumu lowu wu pfaleriwaka wu kombisiwa. (ku fana ni mahanyelo ya ndhavuko ya accordion) .
ku cinca-cinca xitsonga xitsonga ntiyiso Ku cinca-cinca xiaki lexi nga pfaleriwaka eka ku vitaniwa

Ku fungha swilo

Ntsena engetela data-toggle="collapse"na a data-targeteka elemente ku avela hi ku tisungulela vulawuri bya elemente leyi nga pfaleriwaka. Xihlawulekisi data-targetxi amukela xihlawulekisi xa css ku tirhisa ku wisa eka xona. Tiyiseka leswaku u engetela tlilasi collapseeka xiaki lexi nga pfaleriwaka. Loko u lava leswaku yi pfuleka hi ku tiyimisela, engetela tlilasi leyi engetelekeke in.

  1. <button class = "btn btn-khombo" data-toggle = "ku wa" data-xikongomiso = "#demo" >
  2. ku olova loku pfotlosaka
  3. </button>
  4.  
  5. <div id = "demo" class = "ku wa eka" > ... </div>
Tinhloko ta le henhla! Ku engetela vulawuri bya ntlawa byo fana na accordion eka vulawuri lebyi pfalekaka, engetela xihlawulekisi xa data data-parent="#selector". Languta eka demo ku vona leswi swi ri karhi swi tirha.

Maendlelo

.collapse(swihlawulekisi) .

Ku endla leswaku nhundzu ya wena yi tirha tanihi xiaki lexi nga pfaleriwaka. Ku amukela swihlawulekisi swa ku hlawula object.

  1. $ ( '#swi nga pfaleriwa hi mina' ). ku wa ({
  2. toggle : mavunwa
  3. }) .

.collapse('ku cinca-cinca') .

Ku cinca-cinca xiaki lexi nga pfaleriwaka ku ya eka lexi kombisiweke kumbe lexi fihliweke.

.collapse('kombisa') .

Ku kombisa xiaki lexi nga tshovekaka.

.collapse('fihla') .

Ku tumbeta xiaki lexi nga tshovekaka.

Swiendlakalo

Tlilasi ya ku wa ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa ku wa.

Nkhuvo Nhlamuselo
kombisa Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
ku kombisiwile Xiendlakalo lexi xi duvuriwa loko xiaki xa ku wa xi endliwile xi vonaka eka mutirhisi (xi ta rindza ku cinca ka css ku hetisisiwa).
tumbela Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko hidendlela yi vitaniwile.
tumbetile Xiendlakalo lexi xi duvuriwa loko elemente ya collapse yi fihliwile eka mutirhisi (yi ta rindza ku cinca ka css ku hetisisiwa).
  1. $ ( '#swi nga pfaleriwa hi mina' ). on ( 'ku fihliwile' , ntirho () {
  2. // endla swo karhi...
  3. }) .

Hi

Plugin ya xisekelo, leyi andlariweke hi ku olova yo hatlisa ku tumbuluxa ti-typeahead to saseka hi ku nghenisa tsalwa ra fomo rihi na rihi.

Download fayili

Xikombiso

Sungula ku thayipa eka nsimu leyi nga laha hansi ku kombisa mbuyelo wa typeahead.


Hi ku tirhisa bootstrap-typeahead.js

Fonela typeahead hi ku tirhisa javascript:

  1. $ ( '.ku thayipa emahlweni' ). ku thayipa emahlweni () .

Swihlawulekisi

Vito muxaka ku tlula nhlamuselo
xihlovo array ya xirhendzevutani [ ] . Xihlovo xa data xo vutisa ku lwisana na xona.
swilo nomboro 8. Nhlayo ya max ya swilo leswi nga ta kombisiwa eka dropdown.
muhlanganisi wa swilo ntirho ku nga ri na vuxiyaxiya eka maletere lamakulu Ndlela leyi tirhisiwaka ku kumisisa loko xivutiso xi fambisana ni nchumu wo karhi. Amukela njhekanjhekisano wun’we, itemlowu ku nga ta ringeta xivutiso ku lwisana na wona. Fikelela xivutiso xa sweswi hi this.query. Vuyisa boolean trueloko xivutiso xi ri ku fambisana.
muhleri ​​wa swilo ntirho ku fambisana loku kongomeke,
ku va ni maletere lamakulu, ku nga ri na
maletere lamakulu
Ndlela leyi tirhisiwaka ku hlela mimbuyelo ya autocomplete. Amukela njhekanjhekisano wun’we itemsnaswona yi na xikalo xa xikombiso xa typeahead. Kombetela xivutiso xa sweswi hi this.query.
xihlawulekisi xa swilo ntirho yi kombisa ku fambisana hinkwako ka ntolovelo Ndlela leyi tirhisiwaka ku kombisa mimbuyelo ya autocomplete. Amukela njhekanjhekisano wun’we itemnaswona yi na xikalo xa xikombiso xa typeahead. Swi fanele ku vuyisa html.

Ku fungha swilo

Engetela swihlawulekisi swa datha ku tsarisa elemente leyi nga na ntirho wa typeahead.

  1. < muxaka wa ku nghenisa = "tsalwa" data-provide = "typeahead" >

Maendlelo

.typeahead(swihlawulekisi) .

Ku sungula ku nghenisa hi typeahead.