Us Modal-plugin is in super slanke take op 'e tradisjonele modal js-plugin, mei spesjale soarch om allinich de bleate funksjonaliteit op te nimmen dy't wy hjir op twitter nedich binne.

Download

Mei help fan bootstrap-modal

$ ( '#my-modal' ). modaal ( opsjes )

Opsjes

Namme	type	standert	beskriuwing
eftergrûn	boolean	falsk	Omfettet in modale eftergrûnelemint
toetseboerd	boolean	falsk	Slút de modale as escape-toets wurdt yndrukt
sjen litte	boolean	falsk	Iepenet modaal op klasse inisjalisaasje

Markup

Jo kinne modalen op jo side maklik aktivearje sûnder in inkele rigel fan javascript te skriuwen. Jou gewoan in elemint in data-controls-modalattribút dat oerienkomt mei in modale elemint id, en as jo klikke, sil it jo modal starte. Om modale opsjes ta te foegjen, befetsje se gewoan ek as gegevensattributen.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "wier" > Launch Modal </a>    

Opmerking As jo ​​wolle dat jo modal yn en út animearret, foegje dan gewoan in .fadeklasse ta oan jo .modalelemint (ferwize nei de demo om dit yn aksje te sjen).

Metoaden

.modal(opsjes)

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

$ ( '#my-modal' ). modal ({
  closeOnEscape : wier 
})

.modal('toggle')

Wizigje manuell in modaal.

$ ( '#my-modal' ). modaal ( 'wikselje' )

.modal('show')

Iepenet in modaal mei de hân.

$ ( '#my-modal' ). modaal ( 'show' )

.modal('ferbergje')

Ferberget in modaal mei de hân.

$ ( '#my-modal' ). modaal ( 'ferbergje' )

.modal(wier)

Jout in eleminten modale klasse eksimplaar werom.

$ ( '#my-modal' ). modaal ( wier )

Notice As alternatyf kin dit ophelle wurde mei $().data('modal').

Eveneminten

De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit.

Barren	Beskriuwing
sjen litte	Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
sjen litten	Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
ferstopje	Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
ferburgen	Dit barren wurdt ûntslein as de modal klear is ferburgen foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).

$ ( '#my-modal' ). binde ( 'ferburgen' , funksje () {   
  // wat dwaan ...
})

Demo

Start Modal

Dizze plugin is foar it tafoegjen fan dropdown-ynteraksje oan 'e bootstrap-topbalke of ljeppernavigaasjes.

Download

Mei help fan boostrap-dropdown.js

$ ( '#topbalke' ). dropdown ()

Markup

Om fluch tafoegje dropdown funksjonaliteit oan alle nav elemint, brûk it data-dropdownattribút. Elke jildige bootstrap dropdown sil automatysk wurde aktivearre.

<ul class = "tabs" > 
  <li class = "aktyf" ><a href = "#" > Thús </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Sekundêre keppeling </a></li> 
      <li><a href = "#" > Hjir noch wat </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > In oare keppeling </a></li> 
    </ul>
  </li>
</ul>

Opmerking As jo ​​​​ui ferskate dropdowns hat, beskôgje dan it tafoegjen fan it data-dropdownattribút oan in wichtiger kontenerelemint lykas .tabsof .topbar.

Metoaden

$().dropdown()

In programmatyske api foar it aktivearjen fan menu's foar in opjûne topbalke of navigaasje mei ljeppers.

Demo

Dit plugin is foar it tafoegjen fan de scrollspy (auto bywurkjen nav) ynteraksje oan 'e bootstrap topbalke.

Download

Mei help fan boostrap-scrollspy.js

$ ( '#topbalke' ). dropdown ()

Markup

Om maklik scrollspy-gedrach ta te foegjen oan jo nav, foegje gewoan it data-scrollspyattribút ta oan de .topbar.

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

Metoaden

$().scrollspy()

Automatysk aktivearret navigaasjeknoppen troch brûkersrollposysje.

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

Opmerking Topbar-ankertags moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e dom lykas <div id="home"></div>.

.scrollspy('ferfarskje')

De scrollspy cache nav knoppen en seksje koördinaten foar prestaasjes. As jo ​​​​dizze cache moatte bywurkje (wierskynlik as jo dynamyske ynhâld hawwe), skilje gewoan dizze ferfarskingsmetoade. As jo ​​​​de data-attribút hawwe brûkt om jo scrollspy te definiearjen, skilje gewoan ferfarsk op it lichem.

$ ( 'body' ). scrollspy ( 'ferfarskje' )

Demo

Besjoch de topbalke-navigaasje op dizze side.

Dit plugin foeget rappe, dynamyske ljepper- en pilfunksjonaliteit ta.

Download

Mei help fan boostrap-tabs.js

$ ( '.tabs' ). ljeppers ()

Markup

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder javascript te skriuwen troch har gewoan in data-tabsof data-pillsattribút te jaan.

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

Metoaden

$().tabs of $().pills

Aktivearret ljepper en pil funksjonaliteit foar in opjûne container. Ljepkeppelings moatte ferwize nei id's yn it dokumint.

<ul class = "tabs" > 
  <li class = "aktyf" ><a href = "#home"> Thús </a> </li>  
  <li><a href = "#profile" > Profyl </a></li> 
  <li><a href = "#messages" > Berjochten </a></li> 
  <li><a href = "#settings" > Ynstellings </a></li> 
</ul>
 
<div class = "pill-ynhâld" > 
  <div class = "active" id = "thús" > ... </div>  
  <div id = "profyl" > ... </div> 
  <div id = "berjochten" > ... </div> 
  <div id = "ynstellings" > ... </div> 
</ul>
 
<skript>
  $ ( funksje () {  
    $ ( '.tabs' ). ljeppers ()
  })
</skript>

Demo

• Thús
• Profyl
• Berjochten
• Ynstellings

Op grûn fan de treflike jQuery.tipsy plugin skreaun troch Jason Frame; twipsy is in bywurke ferzje, dy't net fertrout op ôfbyldings, brûkt css3 foar animaasjes, en data-attributen foar opslach fan titels!

Download

Mei help fan bootstrap-twipsy.js

$ ( '#foarbyld' ). twipsy ( opsjes )

Opsjes

Namme	type	standert	beskriuwing
animearje	boolean	wier	tapasse in css-fade-oergong op de tooltip
fertrageIn	nûmer	0	fertraging foar it werjaan fan tooltip (ms)
delayOut	nûmer	0	fertraging foar it ferbergjen fan tooltip (ms)
weromfalle	string	''	tekst te brûken as der gjin tooltip-titel oanwêzich is
pleatsing	string	'boppe'	hoe't jo de tooltip pleatse - boppe | ûnder | lofts | rjochts
html	boolean	falsk	lit html ynhâld binnen tooltip
libje	boolean	falsk	brûke evenemint delegaasje ynstee fan yndividuele evenemint handlers
offset	nûmer	0	pixel offset fan tooltip fan doel elemint
titel	string | funksje	'titel'	attribút of metoade foar it opheljen fan titeltekst
trekker	string	'sweve'	hoe't tooltip wurdt aktivearre - hover | fokus | hantlieding

Metoaden

$().twipsy(opsjes)

Hechtet in twipsy handler oan in elemint kolleksje.

.twipsy('show')

Bliuwt in eleminten twipsy.

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

.twipsy('ferbergje')

Ferberget in eleminten twipsy.

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

.twipsy(wier)

Jout in eleminten twipsy klasse eksimplaar.

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

Notice As alternatyf kin dit ophelle wurde mei $().data('twipsy').

Demo

De popover-plugin biedt in ienfâldige interface foar it tafoegjen fan popovers oan jo applikaasje. It wreidet de boostrap-twipsy.js- plugin út, dus wês der wis fan dat jo dat bestân ek pakke as jo popovers yn jo projekt opnimme!

Download

Mei help fan boostrap-popover.js

$ ( '#foarbyld' ). popover ( opsjes )

Opsjes

Namme	type	standert	beskriuwing
animearje	boolean	wier	tapasse in css-fade-oergong op de tooltip
fertrageIn	nûmer	0	fertraging foar it werjaan fan tooltip (ms)
delayOut	nûmer	0	fertraging foar it ferbergjen fan tooltip (ms)
weromfalle	string	''	tekst te brûken as der gjin tooltip-titel oanwêzich is
pleatsing	string	'rjochts'	hoe't jo de tooltip pleatse - boppe | ûnder | lofts | rjochts
html	boolean	falsk	lit html ynhâld binnen tooltip
libje	boolean	falsk	brûke evenemint delegaasje ynstee fan yndividuele evenemint handlers
offset	nûmer	0	pixel offset fan tooltip fan doel elemint
titel	string | funksje	'titel'	attribút of metoade foar it opheljen fan titeltekst
ynhâld	string | funksje	'data-ynhâld'	attribút of metoade foar it opheljen fan ynhâld tekst
trekker	string	'sweve'	hoe't tooltip wurdt aktivearre - hover | fokus | hantlieding

Metoaden

$().popover(opsjes)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

Bliuwt in popover fan eleminten.

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

.popover('ferbergje')

Ferberget in eleminten popover.

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

Demo

hover foar popover

De warskôgingsplugin is in super lytse klasse foar it tafoegjen fan nauwe funksjonaliteit oan warskôgings.

Download

Mei help fan bootstrap-alerts.js

$ ( ".alert-berjocht" ). warskôgje ()

Markup

Foegje gewoan in data-alertattribút ta oan jo warskôgingsberjochten om se automatysk tichte funksjonaliteit te jaan.

Metoaden

$().alert()

Wraps alle warskôgings mei nauwe funksjonaliteit. Om jo warskôgings te animearjen as se sluten binne, soargje derfoar dat se de .fadeen .inklasse al op har tapast hawwe.

.alert('slute')

Slút in warskôging.

$ ( ".alert-berjocht" ). warskôging ( 'slute' )

Demo