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	rangt	Inniheldur modal-bakgrunnsþátt
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 = "true" > 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 ({
  closeOnEscape : 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 boostrap-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

Að nota boostrap-scrollspy.js

$ ( '#topbar' ). fellivalmynd ()

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('refresh')

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ætir við skjótum, kraftmiklum flipa og pilla virkni.

Sækja

Notkun boostrap-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> 
</ul>
 
<handrit>
  $ ( fall () {  
    $ ( '.tabs' ). flipar ()
  })
</script>

Demo

• Heim
• Prófíll
• Skilaboð
• Stillingar

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

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 boostrap-twipsy.js viðbótina, svo vertu viss um að grípa líka í þá skrá þegar þú hefur popover í verkefninu þínu!

Sækja

Notkun boostrap-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'	eigind eða aðferð til að sækja efnistexta
kveikja	strengur	'sveima'	hvernig ábending er sett af stað - sveima | fókus | handbók

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.

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