Modal viðbótin okkar er ofur grannur útgáfa af hefðbundnu modal js viðbótinni, og gæta þess sérstaklega að innihalda aðeins þá virkni sem við þurfum hér á twitter.

Sækja

Notar bootstrap-modal

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

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
bakgrunn	boolean, strengur	rangt	Inniheldur modal-bakgrunnsþátt. Stilltu bakgrunn á "static"ef þú vilt ekki að modalið sé lokað þegar smellt er á bakgrunninn.
lyklaborð	Boolean	rangt	Lokar forminu þegar ýtt er á escape takkann
sýna	Boolean	rangt	Opnar aðferð við upphafssetningu bekkjar

Markup

Þú getur virkjað form á síðunni þinni auðveldlega án þess að þurfa að skrifa eina línu af javascript. Gefðu einingu bara data-controls-modaleigind sem samsvarar auðkenni mótunarþáttar og þegar smellt er á hann mun það ræsa formið þitt. Til að bæta við valkostum skaltu bara láta þá fylgja með sem gagnaeiginleika líka.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Ræsa Modal </a>    

Takið eftir Ef þú vilt að modalinn þinn hreyfi sig inn og út skaltu bara bæta .fadeflokki við .modalþáttinn þinn (sjá kynninguna til að sjá þetta í aðgerð).

Aðferðir

.modal(valkostir)

Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object.

$ ( '#my-modal' ). módel ({
  lyklaborð : satt 
})

.modal('toggle')

Skiptir handvirkt um form.

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

.modal('sýning')

Opnar form handvirkt.

$ ( '#my-modal' ). modal ( 'sýning' )

.modal('fela')

Felur form handvirkt.

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

.modal(true)

Skilar frumefnisflokkatilviki.

$ ( '#my-modal' ). módel ( satt )

Tilkynning Að öðrum kosti er hægt að sækja þetta með $().data('modal').

Viðburðir

Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni.

Viðburður	Lýsing
sýna	Þessi atburður ræsir strax þegar showtilviksaðferðin er kölluð.
Sýnt	Þessi atburður er ræstur þegar modal hefur verið gert sýnilegt notanda (mun bíða eftir að css umbreytingum ljúki).
fela sig	Þessi atburður er ræstur strax þegar hidetilviksaðferðin hefur verið kölluð.
falið	Þessi atburður er ræstur þegar modal hefur lokið við að vera falið fyrir notanda (mun bíða eftir að css umbreytingum ljúki).

$ ( '#my-modal' ). binda ( 'falið' , fall () {   
  // gera eitthvað ...
})

Demo

Ræstu Modal

Þessi tappi er til að bæta við samskiptum við fellivalmyndir við ræsistikuna eða flipaleiðsögur.

Sækja

Með því að nota bootstrap-dropdown.js

$ ( '#topbar' ). fellivalmynd ()

Markup

Notaðu data-dropdowneigindina til að bæta fljótt fellivalvirkni við hvaða nav frumefni sem er. Sérhver gild fellivalmynd af ræsibúnaði verður sjálfkrafa virkjuð.

<ul class = "flipar" > 
  <li class = "active" ><a href = "#" > Heim </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Fellilisti </a>  
    <ul class = "fellivalmynd" > 
      <li><a href = "#" > Aukatengill </a></li> 
      <li><a href = "#" > Eitthvað annað hér </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Annar tengill </a></li> 
    </ul>
  </li>
</ul>

Tilkynning Ef notendaviðmótið þitt hefur nokkra fellilista skaltu íhuga að bæta data-dropdowneigindinni við mikilvægari gámaþátt eins og .tabseða .topbar.

Aðferðir

$().dropdown()

Forritaforrit til að virkja valmyndir fyrir tiltekna toppstiku eða flipaleiðsögn.

Demo

Þessi tappi er til að bæta scrollspy (sjálfvirkri uppfærslu nav) samskipta við ræsistigið efst.

Sækja

Með því að nota bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markup

Til að bæta scrollspy hegðun á auðveldan hátt við nav þinn skaltu bara bæta data-scrollspyeigindinni við .topbar.

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

Aðferðir

$().scrollSpy()

Sjálfvirkt virkjar leiðsöguhnappa eftir skrunstöðu notenda.

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

Athugið Topbar akkerismerki verða að hafa auðleysanleg auðkennismarkmið. Til dæmis, a <a href="#home">home</a>verður að samsvara einhverju í dom eins og <div id="home"></div>.

.scrollSpy('endurnýja')

Scrollspy vistar nav hnappa og kaflahnit fyrir frammistöðu. Ef þú þarft að uppfæra þetta skyndiminni (líklega ef þú ert með kraftmikið efni) hringdu bara í þessa endurnýjunaraðferð. Ef þú notaðir gagnaeiginleikann til að skilgreina scrollspy þinn, hringdu bara í refresh á líkamann.

$ ( 'líkami' ). scrollSpy ( 'hressa' )

Demo

Skoðaðu flakk á efstu stikunni á þessari síðu.

Þessi viðbót býður upp á viðbótarvirkni til að stjórna hnappastöðu.

Sækja

Með því að nota bootstrap-buttons.js

$ ( '.tabs' ). hnappur ()

Aðferðir

$().button('skipta')

Skiptir á ýtastöðu. Gefur btn útlitið að það hafi verið virkjað.

Tilkynning Þú getur virkjað sjálfvirka skiptingu á hnappi með því að nota data-toggleeigindina.

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

$().button('hleðsla')

Stillir stöðu hnapps á hleðslu - slekkur á hnappi og breytir texta yfir í hleðslutexta. Hleðslutexti ætti að vera skilgreindur á hnappahlutanum með því að nota gagnaeiginleikann data-loading-text.

<button class = "btn" data-loading-text = "hleður efni..." > ... </button>   

$().button('endurstilla')

Endurstillir stöðu hnapps - skiptir texta yfir í upprunalegan texta.

$().hnappur(strengur)

Endurstillir hnappastöðu - skiptir um texta í hvaða gagnaskilgreinda textastöðu sem er.

<button class = "btn" data-complete-text = "lokið!" > ... </hnappur>   
<handrit>
  $('.btn').button('complete')
</script>

Demo

Hleður kynningu Skiptu um kynningu

Þessi viðbót bætir við skjótum, kraftmiklum flipa og pilla virkni.

Sækja

Með því að nota bootstrap-tabs.js

$ ( '.tabs' ). flipar ()

Markup

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa nein javascript með því einfaldlega að gefa þeim a data-tabseða data-pillseiginleika.

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

Aðferðir

$().tabs eða $().pills

Virkjar flipa og pilla virkni fyrir tiltekið ílát. Flipatenglar ættu að vísa til auðkennis í skjalinu.

<ul class = "flipar" > 
  <li class = "active" ><a href = "#home" > Heim </a></li>  
  <li><a href = "#profile" > Prófíll </a></li> 
  <li><a href = "#messages" > Skilaboð </a></li> 
  <li><a href = "#settings" > Stillingar </a></li> 
</ul>
 
<div class = "pill-content" > 
  <div class = "active" id = "heima" > ... </div>  
  <div id = "prófíl" > ... </div> 
  <div id = "skilaboð" > ... </div> 
  <div id = "stillingar" > ... </div> 
</div>
 
<handrit>
  $ ( fall () {  
    $ ( '.tabs' ). flipar ()
  })
</script>

Viðburðir

Viðburður	Lýsing
breyta	Þessi atburður fer af stað við flipaskipti. Notaðu event.targetog event.relatedTargettil að miða á virka flipann og fyrri virka flipann í sömu röð.

$ ( '#.tabs' ). binda ( 'breyta' , fall ( e ) {   
  e . target // virkjaður flipi
  e . relatedTarget // fyrri flipi
})

Demo

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Fellilisti
  • @feiti
  • @mdo

Byggt á frábæru jQuery.tipsy viðbótinni skrifað af Jason Frame; twipsy er uppfærð útgáfa, sem byggir ekki á myndum, notar css3 fyrir hreyfimyndir og gagnaeiginleika fyrir titlageymslu!

Sækja

Með því að nota bootstrap-twipsy.js

$ ( '#dæmi' ). twipsy ( valkostir )

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
lífga	Boolean	satt	notaðu css fade umskipti á tólabendinguna
seinkun	númer	0	seinkun áður en verkfæraleiðbeiningar eru sýndar (ms)
delayOut	númer	0	seinkun áður en þú felur verkfæraábendingu (ms)
bakslag	strengur	''	texti til að nota þegar enginn titill á tóli er til staðar
staðsetningu	strengur	'fyrir ofan'	hvernig á að staðsetja tólið - fyrir ofan | fyrir neðan | vinstri | rétt
html	Boolean	rangt	leyfir html efni innan tólitip
lifa	Boolean	rangt	nota viðburðaframsal í stað einstakra atburðastjórnunaraðila
á móti	númer	0	pixlajöfnun á tóli frá markeiningu
titill	strengur, virka	'titill'	eigind eða aðferð til að sækja titiltexta
kveikja	strengur	'sveima'	hvernig ábending er sett af stað - sveima | fókus | handbók
sniðmát	strengur	[sjálfgefin merking]	HTML sniðmátið sem notað er til að gera twipsy.

Tilkynning Einnig er hægt að tilgreina einstaka twipsy tilviksvalkosti með því að nota gagnaeiginleika.

<a href = "#" data-placement = "neðan" rel = 'twipsy' title = 'Einhver titiltexti' > texti </a>    

Aðferðir

$().twipsy(valkostir)

Tengist twipsy meðhöndlun við frumefnasafn.

.twipsy('sýna')

Sýnir þætti twipsy.

$ ( '#þáttur' ). twipsy ( 'sýning' )

.twipsy('fela')

Felur þætti twipsy.

$ ( '#þáttur' ). twipsy ( 'fela' )

.twipsy(true)

Skilar eininga twipsy class tilviki.

$ ( '#þáttur' ). twipsy ( satt )

Tilkynning Að öðrum kosti er hægt að sækja þetta með $().data('twipsy').

Demo

Popover viðbótin veitir einfalt viðmót til að bæta popover við forritið þitt. Það framlengir bootstrap-twipsy.js viðbótina, svo vertu viss um að grípa líka í þá skrá þegar þú hefur popover í verkefninu þínu!

Tilkynning Þú verður að láta bootstrap-twipsy.js skrána fylgja með áður en bootstrap-popover.js.

Sækja

Með því að nota bootstrap-popover.js

$ ( '#dæmi' ). popover ( valkostir )

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
lífga	Boolean	satt	notaðu css fade umskipti á tólabendinguna
seinkun	númer	0	seinkun áður en verkfæraleiðbeiningar eru sýndar (ms)
delayOut	númer	0	seinkun áður en þú felur verkfæraábendingu (ms)
bakslag	strengur	''	texti til að nota þegar enginn titill á tóli er til staðar
staðsetningu	strengur	'rétt'	hvernig á að staðsetja tólið - fyrir ofan | fyrir neðan | vinstri | rétt
html	Boolean	rangt	leyfir html efni innan tólitip
lifa	Boolean	rangt	nota viðburðaframsal í stað einstakra atburðastjórnunaraðila
á móti	númer	0	pixlajöfnun á tóli frá markeiningu
titill	strengur, virka	'titill'	eigind eða aðferð til að sækja titiltexta
efni	strengur, virka	'gagna-efni'	strengur eða aðferð til að sækja efnistexta. ef ekkert er gefið upp verður efni fengið frá eigind gagnainnihalds.
kveikja	strengur	'sveima'	hvernig ábending er sett af stað - sveima | fókus | handbók
sniðmát	strengur	[sjálfgefin merking]	HTML sniðmátið sem notað er til að birta popover.

Tilkynning Hægt er að tilgreina einstaka tilviksvalkosti með því að nota gagnaeiginleika.

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

Aðferðir

$().popover(valkostir)

Frumstillir sprettiglugga fyrir þáttasafn.

.popover('sýna')

Afhjúpar þætti sem birtist.

$ ( '#þáttur' ). popover ( 'sýning' )

.popover('fela')

Felur frumefnisskjá.

$ ( '#þáttur' ). popover ( 'fela' )

Demo

sveima fyrir popover

Viðvörunarviðbótin er ofurlítill flokkur til að bæta náinni virkni við tilkynningar.

Sækja

Með því að nota bootstrap-alerts.js

$ ( ".alert-message" ). viðvörun ()

Markup

Bættu bara við data-alerteiginleikum við viðvörunarskilaboðin þín til að gefa þeim sjálfkrafa nána virkni.

Valmöguleikar

Nafn	tegund	sjálfgefið	lýsingu
veljara	strengur	'.close'	Hvaða valkostur á að miða á til að loka viðvörun.

Aðferðir

$().alert()

Umlykur allar viðvaranir með náinni virkni. Til að láta tilkynningar þínar birtast þegar þær eru lokaðar skaltu ganga úr skugga um að þær hafi .fadeog .inflokkinn þegar notaður fyrir þær.

.alert('loka')

Lokar viðvörun.

$ ( ".alert-message" ). viðvörun ( 'loka' )

Demo