Amacomeka yacu ya Modal ni super slim ifata gakondo ya modal js plugin, witondera cyane kugirango ushiremo imikorere yambaye ubusa dukeneye hano kuri twitter.

Kuramo

Gukoresha bootstrap-modal

$ ( '# my-modal' ). modal ( amahitamo )

Amahitamo

Izina	Ubwoko	Mburabuzi	ibisobanuro
Inyuma	Boolean, umugozi	ibinyoma	Harimo modal-backdrop element. Shyira inyuma yinyuma "static"niba udashaka ko modal ifunga mugihe inyuma yakanze.
Mwandikisho	boolean	ibinyoma	Gufunga modal mugihe urufunguzo rwo guhunga rukanda
kwerekana	boolean	ibinyoma	Gufungura modal kumurongo wo gutangiza

Markup

Urashobora gukora modal kurupapuro rwawe byoroshye utiriwe wandika umurongo umwe wa javascript. Gusa tanga ikintu data-controls-modalikiranga gihuye na modal element id, kandi iyo ukanze, izatangiza modal yawe. Ongeraho uburyo bwo guhitamo, gusa ubishyiremo nkibiranga amakuru nayo.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static"> Gutangiza Moderi </a>    

Icyitonderwa Niba ushaka modal yawe kugirango igaragaze kandi isohoke, ongeraho .fadeicyiciro kubintu byawe .modal(reba kuri demo kugirango ubone ibi mubikorwa).

Uburyo

.modal (amahitamo)

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

$ ( '# my-modal' ). modal ({
  Mwandikisho : ukuri 
})

.modal ('guhinduranya')

Intoki ihinduranya modal.

$ ( '# my-modal' ). modal ( 'guhinduranya' )

.modal ('kwerekana')

Nintoki ifungura modal.

$ ( '# my-modal' ). modal ( 'kwerekana' )

.modal ('guhisha')

Nintoki ihishe modal.

$ ( '# my-modal' ). modal ( 'guhisha' )

.modal (ukuri)

Garuka ibice modal icyiciro urugero.

$ ( '# my-modal' ). modal ( ukuri )

Menyesha Ubundi, ibi birashobora kugarurwa hamwe $().data('modal').

Ibyabaye

Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa.

Icyabaye	Ibisobanuro
kwerekana	Ibirori birasa ako kanya mugihe showurugero rwitwa.
yerekanwe	Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko css inzibacyuho zirangira).
kwihisha	Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
byihishe	Ibirori birukanwa mugihe modal yarangije guhishwa kumukoresha (izategereza ko css inzibacyuho zirangira).

$ ( '# my-modal' ). guhambira ( 'guhisha' , imikorere () {   
  // Gira icyo ukora ...
})

Demo

Gutangiza Modal

Gucomeka ni ukongeramo imikoreshereze ya bootstrap topbar cyangwa tabbed navigations.

Kuramo

Ukoresheje bootstrap-dropdown.js

$ ( '#topbar' ). kumanuka ()

Markup

Kugirango wongere vuba kumanura imikorere kubintu byose nav, koresha data-dropdownikiranga. Ikintu cyose cyemewe cya bootstrap gitemba kizahita gikora.

<ul class = "tabs" > 
  <li urwego = "rukora" > <a href = "#"> Urugo </a> </li>  
  <li urwego = "guta" amakuru-guta = "guta" >   
    <a href = "#" class = "dropdown-toggle"> Igitonyanga </a> _  
    <ul class = "ibitonyanga-menu" > 
      <li> <a href = "#"> Ihuza rya kabiri </a> </li> 
      <li> <a href = "#"> Ikindi kintu hano </a> </li> 
      <li urwego = "umutandukanya" > </li> 
      <li> <a href = "#"> Undi muhuza </a> </li> 
    </ul>
  </li>
</ul>

Icyitonderwa Niba ui yawe ifite ibitonyanga byinshi, tekereza kongeramo data-dropdownikiranga kubintu byingenzi bifite ibikoresho nka .tabscyangwa .topbar.

Uburyo

$ (). Kugabanuka ()

Porogaramu api yo gukora menus kumurongo watanzwe cyangwa kugendagenda hejuru.

Demo

Gucomeka ni ukongeramo imizingo (auto update nav) imikoranire kuri bootstrap topbar.

Kuramo

Ukoresheje bootstrap-scrollspy.js

$ ( '#topbar' ). umuzingoSpy ()

Markup

Kugirango byoroshye kongeramo imyitwarire yimyitwarire kuri nav, gusa ongeraho data-scrollspyikiranga kuri .topbar.

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

Uburyo

$ (). umuzingoSpy ()

Imodoka ikora ingendo zo kugendana nabakoresha kuzunguruka.

$ ( 'umubiri> .topbar' ). umuzingoSpy ()

Menyesha Topbar anchor tags igomba kuba ifite intego id idakemuka. Kurugero, <a href="#home">home</a>ugomba guhuza ikintu muri dom nka <div id="home"></div>.

.scrollSpy ('kugarura')

Umuzingo wa cashe nav buto na igice gihuza imikorere. Niba ukeneye kuvugurura iyi cache (birashoboka niba ufite ibintu bifite imbaraga) hamagara ubu buryo bushya. Niba wakoresheje amakuru yikiranga kugirango usobanure umuzingo wawe, hamagara gusa kugarura umubiri.

$ ( 'umubiri' ). umuzingoSpy ( 'kugarura' )

Demo

Reba hejuru ya topbar igenda kuriyi page.

Gucomeka itanga imikorere yinyongera yo gucunga buto leta.

Kuramo

Ukoresheje bootstrap-buto.js

$ ( '.tabs' ). buto ()

Uburyo

$ (). buto ('guhinduranya')

Toggles gusunika leta. Itanga btn isura ko yakoreshejwe.

Icyitonderwa Urashobora gukora auto toggling ya buto ukoresheje data-toggleikiranga.

<buto icyiciro = "btn" data-toggle = "guhinduranya" > ... </button>   

$ (). buto ('gupakira')

Gushiraho buto ya reta kugirango yikore - guhagarika buto hanyuma uhinduranya inyandiko kumpapuro zipakurura. Gupakurura inyandiko bigomba gusobanurwa kuri buto yibintu ukoresheje ikiranga amakuru data-loading-text.

<buto urwego = "btn" amakuru-yipakurura-inyandiko = "ibintu byo gupakira ..." > ... </button>   

$ (). buto ('gusubiramo')

Kugarura buto leta - guhinduranya inyandiko kumyandiko yumwimerere.

$ (). buto (umugozi)

Kugarura buto ya leta - ihinduranya inyandiko kubintu byose byasobanuwe inyandiko.

<buto icyiciro = "btn" amakuru-yuzuye-inyandiko = "yarangije!" > ... </button>   
<Inyandiko
  $ ('. btn'). buto ('byuzuye')
</scrip>

Demo

Loading Demo Toggle Demo

Gucomeka kongeramo byihuse, imbaraga za tab hamwe nibikorwa bya tablet.

Kuramo

Ukoresheje bootstrap-tabs.js

$ ( '.tabs' ). tabs ()

Markup

Urashobora gukora tab cyangwa ibinini bigenda utanditse javascript iyo ari yo yose ubahaye data-tabscyangwa data-pillsikiranga.

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

Uburyo

$ (). tabs cyangwa $ (). ibinini

Gukora tab hamwe nibinini bikora kubintu runaka. Ihuza rya tab rigomba kwerekana id mu nyandiko.

<ul class = "tabs" > 
  <li urwego = "rukora" > <a href = "#urugo"> Urugo </a> </li>  
  <li> <a href = "#profile"> Umwirondoro </a> </li> 
  <li> <a href = "#messages"> Ubutumwa </a> </li> 
  <li> <a href = "#settings"> Igenamiterere </a> </li> 
</ul>
 
<div class = "ibinini-birimo" > 
  <div class = "ikora" id = "urugo" > ... </div>  
  <div id = "umwirondoro" > ... </div> 
  <div id = "ubutumwa" > ... </div> 
  <div id = "igenamiterere" > ... </div> 
</div>
 
<Inyandiko
  $ ( imikorere () {  
    $ ( '.tabs' ). tabs ()
  })
</script>

Ibyabaye

Icyabaye	Ibisobanuro
impinduka	Ibirori birasa kuri tab ihinduka. Koresha event.targetno event.relatedTargetgutondekanya tab ikora hamwe na tab ikora mbere.

$ ( '# .tabs' ). guhambira ( 'guhindura' , imikorere ( e ) {   
  e . intego // tab ikora
  e . bifitanye isano Intego // tab ibanza
})

Demo

• Murugo
• Umwirondoro
• Ubutumwa
• Igenamiterere
• Kumanuka
  • @fat
  • @mdo

Ukurikije plaque nziza ya jQuery.tipsy plugin yanditswe na Jason Frame; twipsy ni verisiyo ivuguruye, idashingiye kumashusho, ikoresha css3 kuri animasiyo, na data-ibiranga kubika umutwe!

Kuramo

Ukoresheje bootstrap-twipsy.js

$ ( '#Urugero' ). twipsy ( amahitamo )

Amahitamo

Izina	Ubwoko	Mburabuzi	ibisobanuro
animate	boolean	ni ukuri	Koresha css fade inzibacyuho kubikoresho
gutinda	umubare	0	gutinda mbere yo kwerekana ibikoresho (ms)
gutinda	umubare	0	gutinda mbere yo guhisha ibikoresho (ms)
gusubira inyuma	umugozi	''	inyandiko yo gukoresha mugihe nta mutwe wibikoresho uhari
gushyira	umugozi	'hejuru'	uburyo bwo gushyira ibikoresho - hejuru | munsi | ibumoso | iburyo
html	boolean	ibinyoma	yemerera html ibiri mubikoresho
Kubaho	boolean	ibinyoma	Koresha ibyabaye aho gukoresha ibyabaye kugiti cyabo
offset	umubare	0	pigiseli yo gukuramo ibikoresho biva mubintu bigenewe
Umutwe	umugozi, imikorere	'umutwe'	Ikiranga cyangwa uburyo bwo kugarura inyandiko yumutwe
imbarutso	umugozi	'hover'	burya ibikoresho byifashishwa - hover | kwibanda | imfashanyigisho
Inyandikorugero	umugozi	[Ikimenyetso gisanzwe]	Inyandikorugero ya html ikoreshwa mugutanga impanga.

Icyitonderwa Umuntu ku giti cye twipsy urugero amahitamo arashobora kugaragazwa muburyo bwo gukoresha amakuru ibiranga.

<a href = "#" data-placement = "below" rel ='twipsy' umutwe = 'Inyandiko zimwe z'umutwe'> inyandiko </a>    

Uburyo

$ (). twipsy (amahitamo)

Ongeraho impinduramatwara kubintu byegeranijwe.

.twipsy ('kwerekana')

Kugaragaza ibintu twipsy.

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

.twipsy ('guhisha')

Hisha ibintu twipsy.

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

.twipsy (ukuri)

Garuka ibice twipsy urwego urugero.

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

Menyesha Ubundi, ibi birashobora kugarurwa hamwe $().data('twipsy').

Demo

Amacomeka ya popover atanga interineti yoroshye yo kongeramo popovers muri porogaramu yawe. Yagura bootstrap-twipsy.js plugin , bityo rero wemeze gufata iyo dosiye kimwe mugihe ushizemo popovers mumushinga wawe!

Icyitonderwa Ugomba gushyiramo bootstrap-twipsy.js mbere ya bootstrap-popover.js.

Kuramo

Ukoresheje bootstrap-popover.js

$ ( '#Urugero' ). popover ( amahitamo )

Amahitamo

Izina	Ubwoko	Mburabuzi	ibisobanuro
animate	boolean	ni ukuri	Koresha css fade inzibacyuho kubikoresho
gutinda	umubare	0	gutinda mbere yo kwerekana ibikoresho (ms)
gutinda	umubare	0	gutinda mbere yo guhisha ibikoresho (ms)
gusubira inyuma	umugozi	''	inyandiko yo gukoresha mugihe nta mutwe wibikoresho uhari
gushyira	umugozi	'iburyo'	uburyo bwo gushyira ibikoresho - hejuru | munsi | ibumoso | iburyo
html	boolean	ibinyoma	yemerera html ibiri mubikoresho
Kubaho	boolean	ibinyoma	Koresha ibyabaye aho gukoresha ibyabaye kugiti cyabo
offset	umubare	0	pigiseli yo gukuramo ibikoresho biva mubintu bigenewe
Umutwe	umugozi, imikorere	'umutwe'	Ikiranga cyangwa uburyo bwo kugarura inyandiko yumutwe
ibirimo	umugozi, imikorere	'ibirimo-amakuru'	umurongo cyangwa uburyo bwo kugarura inyandiko yibirimo. niba ntanumwe watanzwe, ibirimo bizaturuka kubintu-biranga ibiranga.
imbarutso	umugozi	'hover'	burya ibikoresho byifashishwa - hover | kwibanda | imfashanyigisho
Inyandikorugero	umugozi	[Ikimenyetso gisanzwe]	Inyandikorugero ya html ikoreshwa mugutanga popover.

Icyitonderwa Umuntu ku giti cye popover urugero amahitamo arashobora gutomorwa mugukoresha amakuru yibiranga.

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

Uburyo

$ (). popover (amahitamo)

Itangiza popovers yikintu cyo gukusanya.

.kwerekana ('kwerekana')

Kugaragaza ibintu popover.

$ ( '#element' ). popover ( 'kwerekana' )

.kwerekana ('guhisha')

Hisha ibintu popover.

$ ( '#element' ). popover ( 'guhisha' )

Demo

hover kuri popover

Amacomeka yo kumenyesha ni super ntoya yo kongeramo imikorere yegeranye.

Kuramo

Ukoresheje bootstrap-imenyesha.js

$ ( ".ubutumwa-ubutumwa" ). kuba maso ()

Markup

Gusa ongeraho data-alertikiranga kubutumwa bwawe bwo kumenyesha kugirango uhite ubaha imikorere ya hafi.

Amahitamo

Izina	Ubwoko	Mburabuzi	ibisobanuro
uwatoranije	umugozi	'.funga'	Niki uhitamo intego yo gufunga integuza.

Uburyo

$ (). Kumenyesha ()

Kuzuza integuza zose hamwe nibikorwa bya hafi. Kugira ngo imenyesha ryawe risohoke iyo rifunze, menya neza ko bafite icyiciro .fadehamwe .innishuri ryabasabye.

.alert ('hafi')

Funga integuza.

$ ( ".ubutumwa-ubutumwa" ). kuba maso ( 'gufunga' )

Demo