Mae ein ategyn Modal yn olwg hynod denau ar yr ategyn js moddol traddodiadol, gan gymryd gofal arbennig i gynnwys dim ond y swyddogaethau noeth sydd eu hangen arnom yma yn twitter.

Lawrlwythwch

Defnyddio modd bootstrap

$ ( '#fy-modal' ). moddol ( opsiynau )

Opsiynau

Enw	math	rhagosodedig	disgrifiad
cefndir	boolaidd	ffug	Yn cynnwys elfen foddol-cefndir
bysellfwrdd	boolaidd	ffug	Yn cau'r modd pan fydd allwedd dianc yn cael ei wasgu
dangos	boolaidd	ffug	Yn agor moddol ar gychwyn dosbarth

Marcio

Gallwch chi actifadu moddau ar eich tudalen yn hawdd heb orfod ysgrifennu un llinell o javascript. Rhowch data-controls-modalnodwedd sy'n cyfateb i elfen foddol id, a phan fyddwch chi'n clicio, bydd yn lansio'ch modd. I ychwanegu opsiynau moddol, dylech eu cynnwys fel priodoleddau data hefyd.

<a class="btn" data-controls-modal = " my-modal " data-backdrop = " true " > Lansio Moddol </a>    

Hysbysiad Os ydych chi am i'ch modd animeiddio i mewn ac allan, ychwanegwch .fadeddosbarth at eich .modalelfen (cyfeiriwch at y demo i weld hwn ar waith).

Dulliau

.modal(opsiynau)

Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object.

$ ( '#fy-modal' ). moddol ({
  closeOnEscape : gwir 
})

.modal ('toglo')

Toglo moddol â llaw.

$ ( '#fy-modal' ). moddol ( ' toglo ' )

.modal ('dangos')

Yn agor moddol â llaw.

$ ( '#fy-modal' ). moddol ( 'dangos' )

.modal ('cuddio')

Yn cuddio moddol â llaw.

$ ( '#fy-modal' ). moddol ( 'cuddio' )

.modal(gwir)

Yn dychwelyd enghraifft dosbarth moddol elfennau.

$ ( '#fy-modal' ). moddol ( gwir )

Hysbysiad Fel arall, gellir ei adalw gyda $().data('modal').

Digwyddiadau

Mae dosbarth moddol Bootstrap yn datgelu rhai digwyddiadau ar gyfer cysylltu â swyddogaethau moddol.

Digwyddiad	Disgrifiad
dangos	Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangosir	Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau).
cuddio	Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
cudd	Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau).

$ ( '#fy-modal' ). rhwymo ( 'cudd' , swyddogaeth () {   
  // gwneud rhywbeth...
})

Demo

Lansio Modal

Mae'r ategyn hwn ar gyfer ychwanegu rhyngweithio cwymplen i'r bar uchaf bootstrap neu'r llywio â thabiau.

Lawrlwythwch

Gan ddefnyddio boostrap-dropdown.js

$ ( ' # bar uchaf ' ). cwymplen ()

Marcio

I ychwanegu ymarferoldeb cwymplen yn gyflym at unrhyw elfen nav, defnyddiwch y data-dropdownpriodoledd. Bydd unrhyw gwymplen bootstrap dilys yn cael ei actifadu'n awtomatig.

<ul class = "tabiau" > 
  < li class = " active " <a href = " # " > Cartref </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href="#" class="dropdown-toggle"> Dropdown </a> _ _ _ _ _  
    <ul class = "dropdown-menu" > 
      <li><a href="#"> Dolen eilaidd </a> < /li> 
      <li><a href="#"> Rhywbeth arall yma </a> </li> 
      <li class = "divider" ></li> 
      <li><a href="#"> Dolen arall </a> < /li> 
    </ul>
  </li>
</ul>

Hysbysiad Os oes gan eich ui sawl cwymplen, ystyriwch ychwanegu'r data-dropdownpriodoledd at elfen cynhwysydd mwy arwyddocaol fel .tabsneu .topbar.

Dulliau

$().gwymp i lawr()

Ap rhaglennol ar gyfer actifadu dewislenni ar gyfer bar uchaf neu lywio tabiau penodol.

Demo

Mae'r ategyn hwn ar gyfer ychwanegu'r rhyngweithio scrollspy (auto Update nav) i'r bar uchaf bootstrap.

Lawrlwythwch

Gan ddefnyddio boostrap-scrollspy.js

$ ( ' # bar uchaf ' ). cwymplen ()

Marcio

Er mwyn ychwanegu ymddygiad sgrôlsbïo yn hawdd i'ch llywio, ychwanegwch y data-scrollspypriodoledd i'r ffeil .topbar.

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

Dulliau

$().scrollspy()

Mae awto yn actifadu botymau llywio yn ôl safle sgrolio defnyddwyr.

$ ( 'corff > .topbar' ). sgrolioSpy ()

Sylwch Mae'n rhaid i dagiau angori Topbar fod â thargedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>rhaid cyfateb i rywbeth yn y cartref fel <div id="home"></div>.

.scrollspy('adnewyddu')

Mae botymau llywio'r caches scrollspy a'r cyfesurynnau adran ar gyfer perfformiad. Os oes angen i chi ddiweddaru'r storfa hon (yn ôl pob tebyg os oes gennych chi gynnwys deinamig) ffoniwch y dull adnewyddu hwn. Os gwnaethoch ddefnyddio'r priodoledd data i ddiffinio'ch sgrolsbïwr, ffoniwch adnewyddu'r corff.

$ ( 'corff' ). sgrôlspy ( 'adnewyddu' )

Demo

Edrychwch ar y llywio y bar uchaf ar y dudalen hon.

Mae'r ategyn hwn yn ychwanegu ymarferoldeb tab a phils cyflym, deinamig.

Lawrlwythwch

Gan ddefnyddio boostrap-tabs.js

$ ( ' .tabs ' ). tabiau ()

Marcio

Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw javascript trwy roi nodwedd data-tabsneu data-pillsbriodwedd iddynt.

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

Dulliau

$().tabs neu $().pils

Yn actifadu ymarferoldeb tab a phil ar gyfer cynhwysydd penodol. Dylai dolenni tab gyfeirio at yr IDs yn y ddogfen.

<ul class = "tabiau" > 
  <li class = "active" <a href = " #home" > Cartref </a></li>  
  <li><a href = "#profile"> Proffil </a> </li> 
  <li><a href = "#messages"> Negeseuon </a> </li> 
  <li><a href="#settings"> Gosodiadau </a> < / li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "gosodiadau" > ... </div> 
</ul>
 
<script>
  $ ( swyddogaeth ( ) {  
    $ ( ' .tabs ' ). tabiau ()
  })
</script>

Demo

• Cartref
• Proffil
• Negeseuon
• Gosodiadau

Yn seiliedig ar yr ategyn jQuery.tipsy ardderchog a ysgrifennwyd gan Jason Frame; Mae twipsy yn fersiwn wedi'i diweddaru, nad yw'n dibynnu ar ddelweddau, yn defnyddio css3 ar gyfer animeiddiadau, a nodweddion data ar gyfer storio teitl!

Lawrlwythwch

Defnyddio bootstrap-twipsy.js

$ ( '#enghraifft' ). twipsy ( opsiynau )

Opsiynau

Enw	math	rhagosodedig	disgrifiad
animeiddio	boolaidd	gwir	cymhwyso trawsnewidiad pylu css i'r cyngor
oediIn	rhif	0	oedi cyn dangos cyngor (ms)
oedi Allan	rhif	0	oedi cyn cuddio cyngor (ms)
wrth gefn	llinyn	''	testun i'w ddefnyddio pan nad oes teitl cyngor yn bresennol
lleoliad	llinyn	'uwchben'	sut i leoli'r cyngor - uchod | isod | chwith | iawn
html	boolaidd	ffug	yn caniatáu cynnwys html o fewn y cyngor
byw	boolaidd	ffug	defnyddio dirprwyo digwyddiad yn lle trinwyr digwyddiadau unigol
gwrthbwyso	rhif	0	gwrthbwyso picsel o gyngor offer o'r elfen darged
teitl	llinyn | swyddogaeth	'teitl'	priodoledd neu ddull ar gyfer adalw testun teitl
sbardun	llinyn	'hofran'	sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw

Dulliau

$().twipsy(opsiynau)

Yn cysylltu triniwr twipsi wrth gasgliad elfennau.

.twipsy ('dangos')

Yn datgelu twipsy elfennau.

$ ( '# elfen' ). twipsy ( 'dangos' )

.twipsy ('cuddio')

Yn cuddio twipsy elfennau.

$ ( '# elfen' ). twipsy ( 'cuddio' )

.twipsy(gwir)

Yn dychwelyd enghraifft dosbarth twipsy elfennau.

$ ( '# elfen' ). twipsy ( gwir )

Hysbysiad Fel arall, gellir ei adalw gyda $().data('twipsy').

Demo

Mae'r ategyn popover yn darparu rhyngwyneb syml ar gyfer ychwanegu popovers at eich cais. Mae'n ymestyn yr ategyn boostrap-twipsy.js , felly gwnewch yn siŵr eich bod chi'n cydio yn y ffeil honno hefyd wrth gynnwys popovers yn eich prosiect!

Lawrlwythwch

Gan ddefnyddio boostrap-popover.js

$ ( '#enghraifft' ). popover ( opsiynau )

Opsiynau

Enw	math	rhagosodedig	disgrifiad
animeiddio	boolaidd	gwir	cymhwyso trawsnewidiad pylu css i'r cyngor
oediIn	rhif	0	oedi cyn dangos cyngor (ms)
oedi Allan	rhif	0	oedi cyn cuddio cyngor (ms)
wrth gefn	llinyn	''	testun i'w ddefnyddio pan nad oes teitl cyngor yn bresennol
lleoliad	llinyn	'iawn'	sut i leoli'r cyngor - uchod | isod | chwith | iawn
html	boolaidd	ffug	yn caniatáu cynnwys html o fewn y cyngor
byw	boolaidd	ffug	defnyddio dirprwyo digwyddiad yn lle trinwyr digwyddiadau unigol
gwrthbwyso	rhif	0	gwrthbwyso picsel o gyngor offer o'r elfen darged
teitl	llinyn | swyddogaeth	'teitl'	priodoledd neu ddull ar gyfer adalw testun teitl
cynnwys	llinyn | swyddogaeth	'cynnwys data'	priodoledd neu ddull ar gyfer adalw testun cynnwys
sbardun	llinyn	'hofran'	sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw

Dulliau

$().popover(opsiynau)

Yn cychwyn popovers ar gyfer casgliad elfennau.

.popover ('dangos')

Yn datgelu popover elfennau.

$ ( '# elfen' ). popover ( 'dangos' )

.popover ('cuddio')

Yn cuddio popover elfennau.

$ ( '# elfen' ). popover ( 'cuddio' )

Demo

hofran ar gyfer popover

Mae'r ategyn rhybuddio yn ddosbarth hynod fach ar gyfer ychwanegu ymarferoldeb agos at rybuddion.

Lawrlwythwch

Defnyddio bootstrap-alerts.js

$ ( ".alert-message" ). rhybudd ()

Marcio

Ychwanegwch data-alertbriodwedd at eich negeseuon effro i roi ymarferoldeb agos iddynt yn awtomatig.

Dulliau

$().rhybudd()

Yn lapio pob rhybudd ag ymarferoldeb agos. Er mwyn i'ch rhybuddion gael eu hanimeiddio pan fyddant ar gau, gwnewch yn siŵr bod y dosbarth .fadea'r .indosbarth eisoes wedi'i gymhwyso iddynt.

. rhybudd ('cau')

Yn cau rhybudd.

$ ( ".alert-message" ). rhybudd ( 'agos' )

Demo