Ons Modal-inprop is 'n baie skraal weergawe van die tradisionele modal js-inprop, met spesiale sorg om slegs die blote funksionaliteit in te sluit wat ons hier by twitter benodig.

Aflaai

Gebruik bootstrap-modal

$ ( '#my-modaal' ). modaal ( opsies )

Opsies

Naam	tipe	verstek	beskrywing
agtergrond	boolean	onwaar	Sluit 'n modale agtergrondelement in
sleutelbord	boolean	onwaar	Maak die modaal toe wanneer escape-sleutel gedruk word
Wys	boolean	onwaar	Maak modaal oop met klasinisialisering

Opmerk

Jy kan maklik modale op jou bladsy aktiveer sonder om 'n enkele reël JavaScript te hoef te skryf. Gee net 'n element 'n data-controls-modalkenmerk wat ooreenstem met 'n modale element-ID, en wanneer daarop geklik word, sal dit jou modaal begin. Om modale opsies by te voeg, sluit dit net as data-kenmerke in.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Begin Modal </a>    

Kennisgewing As jy wil hê jou modaal moet in en uit animeer, voeg net 'n .fadeklas by jou .modalelement (verwys na die demo om dit in aksie te sien).

Metodes

.modal(opsies)

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

$ ( '#my-modaal' ). modaal ({
  closeOnEscape : waar 
})

.modal('toggle')

Wissel 'n modaal handmatig.

$ ( '#my-modaal' ). modaal ( 'wissel' )

.modal('show')

Maak 'n modaal handmatig oop.

$ ( '#my-modaal' ). modaal ( 'wys' )

.modal('versteek')

Versteek 'n modaal handmatig.

$ ( '#my-modaal' ). modaal ( 'versteek' )

.modal(true)

Wys 'n elemente modale klas instansie.

$ ( '#my-modaal' ). modaal ( waar )

Kennisgewing Alternatiewelik kan dit met $().data('modal').

Gebeurtenisse

Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.

Gebeurtenis	Beskrywing
Wys	Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode geroep word.
gewys	Hierdie gebeurtenis word afgevuur wanneer die modaal vir die gebruiker sigbaar gemaak is (sal wag vir css-oorgange om te voltooi).
wegsteek	Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hideinstansiemetode geroep is.
versteek	Hierdie gebeurtenis word afgevuur wanneer die modaal klaar versteek is vir die gebruiker (sal wag vir css-oorgange om te voltooi).

$ ( '#my-modaal' ). bind ( 'versteek' , funksie () {   
  // doen iets ...
})

Demo

Begin Modal

Hierdie inprop is vir die byvoeging van aftrek-interaksie by die bootstrap-bobalk of navigasies met oortjies.

Aflaai

Gebruik boostrap-dropdown.js

$ ( '#topbalk' ). aftreklys ()

Opmerk

data-dropdownGebruik die kenmerk om vinnig aftrekfunksies by enige nav-element te voeg . Enige geldige selflaai-aftreklys sal outomaties geaktiveer word.

<ul klas = "tabs" > 
  <li klas = "aktief" ><a href = "#" > Tuis </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Aftreklys </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Sekondêre skakel </a></li> 
      <li><a href = "#" > Iets anders hier </a></li> 
      <li klas = "verdeler" ></li> 
      <li><a href = "#" > Nog 'n skakel </a></li> 
    </ul>
  </li>
</ul>

Kennisgewing As jou ui verskeie aftreklys het, oorweeg dit om die data-dropdownkenmerk by 'n meer betekenisvolle houerelement soos .tabsof .topbar.

Metodes

$().dropdown()

'n Programmatiese API vir die aktivering van spyskaarte vir 'n gegewe topbalk of navigasie met oortjies.

Demo

Hierdie inprop is vir die byvoeging van die scrollspy (outomatiese opdatering van nav) interaksie by die selflaaibalk bobalk.

Aflaai

Die gebruik van boostrap-scrollspy.js

$ ( '#topbalk' ). aftreklys ()

Opmerk

Om scrollspy-gedrag maklik by jou nav te voeg, voeg net die data-scrollspykenmerk by die .topbar.

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

Metodes

$().scrollspy()

Outomaties aktiveer navigasieknoppies volgens gebruikers se rolposisie.

$ ( 'liggaam > .topbalk' ). scrollSpy ()

Let op Topbar-ankeretikette moet oplosbare ID-teikens hê. Byvoorbeeld, 'n <a href="#home">home</a>moet ooreenstem met iets in die dom soos <div id="home"></div>.

.scrollspy('refresh')

Die scrollspy kas navigasieknoppies en afdelingkoördinate vir prestasie. As jy hierdie kas moet opdateer (waarskynlik as jy dinamiese inhoud het), bel net hierdie herlaaimetode. As jy die data-kenmerk gebruik het om jou scrollspy te definieer, bel net refresh op die liggaam.

$ ( 'liggaam' ). scrollspy ( 'verfris' )

Demo

Kyk na die topbalk-navigasie op hierdie bladsy.

Hierdie inprop voeg vinnige, dinamiese oortjie- en pilfunksionaliteit by.

Aflaai

Gebruik boostrap-tabs.js

$ ( '.tabs' ). oortjies ()

Opmerk

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige javascript te skryf deur bloot 'n data-tabsof data-pillskenmerk aan hulle te gee.

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

Metodes

$().tabs of $().pille

Aktiveer blad- en pil-funksionaliteit vir 'n gegewe houer. Oortjieskakels moet na ID's in die dokument verwys.

<ul klas = "tabs" > 
  <li klas = "aktief" ><a href = "#huis" > Tuis </a></li>  
  <li><a href = "#profile" > Profiel </a></li> 
  <li><a href = "#messages" > Boodskappe </a></li> 
  <li><a href = "#settings" > Instellings </a></li> 
</ul>
 
<div klas = "pil-inhoud" > 
  <div class = "active" id = "tuis" > ... </div>  
  <div id = "profiel" > ... </div> 
  <div id = "boodskappe" > ... </div> 
  <div id = "instellings" > ... </div> 
</ul>
 
<skrif>
  $ ( funksie () {  
    $ ( '.tabs' ). oortjies ()
  })
</script>

Demo

• Tuis
• Profiel
• Boodskappe
• Instellings

Gebaseer op die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; twipsy is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, css3 vir animasies gebruik en data-kenmerke vir titelberging!

Aflaai

Gebruik bootstrap-twipsy.js

$ ( '#voorbeeld' ). twipsy ( opsies )

Opsies

Naam	tipe	verstek	beskrywing
animeer	boolean	waar	pas 'n css-vervaag-oorgang op die nutswenk toe
vertraag	nommer	0	vertraging voordat nutswenk gewys word (ms)
uitstel	nommer	0	vertraging voordat nutswenk versteek word (ms)
terugval	string	''	teks om te gebruik wanneer geen nutswenk-titel teenwoordig is nie
plasing	string	'bo'	hoe om die nutswenk te posisioneer - bo | onder | links | reg
html	boolean	onwaar	laat html-inhoud binne tooltip toe
leef	boolean	onwaar	gebruik gebeurtenisdelegering in plaas van individuele gebeurtenishanteerders
verreken	nommer	0	pixel offset van tooltip vanaf teikenelement
titel	tou | funksie	'titel'	kenmerk of metode vir die herwinning van titelteks
sneller	string	'sweef'	hoe tooltip geaktiveer word - beweeg | fokus | handleiding

Metodes

$().twipsy(opsies)

Heg 'n twipsy-hanteerder aan 'n elementversameling.

.twipsy('show')

Onthul 'n twipsy elemente.

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

.twipsy('versteek')

Versteek 'n element twipsy.

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

.twipsy(true)

Wys 'n elements twipsy klas instansie.

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

Kennisgewing Alternatiewelik kan dit met $().data('twipsy').

Demo

Die popover-inprop bied 'n eenvoudige koppelvlak om popovers by jou toepassing te voeg. Dit brei die boostrap-twipsy.js- inprop uit, so maak seker dat jy daardie lêer ook gryp wanneer jy popovers in jou projek insluit!

Aflaai

Gebruik boostrap-popover.js

$ ( '#voorbeeld' ). popover ( opsies )

Opsies

Naam	tipe	verstek	beskrywing
animeer	boolean	waar	pas 'n css-vervaag-oorgang op die nutswenk toe
vertraag	nommer	0	vertraging voordat nutswenk gewys word (ms)
uitstel	nommer	0	vertraging voordat nutswenk versteek word (ms)
terugval	string	''	teks om te gebruik wanneer geen nutswenk-titel teenwoordig is nie
plasing	string	'reg'	hoe om die nutswenk te posisioneer - bo | onder | links | reg
html	boolean	onwaar	laat html-inhoud binne tooltip toe
leef	boolean	onwaar	gebruik gebeurtenisdelegering in plaas van individuele gebeurtenishanteerders
verreken	nommer	0	pixel offset van tooltip vanaf teikenelement
titel	tou | funksie	'titel'	kenmerk of metode vir die herwinning van titelteks
inhoud	tou | funksie	'data-inhoud'	kenmerk of metode vir die herwinning van inhoudteks
sneller	string	'sweef'	hoe tooltip geaktiveer word - beweeg | fokus | handleiding

Metodes

$().popover(opsies)

Inisialiseer popovers vir 'n elementversameling.

.popover('wys')

Onthul 'n element-oorspring.

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

.popover('versteek')

Versteek 'n element-opspringer.

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

Demo

beweeg vir popover

Die waarskuwing-inprop is 'n superklein klas om noue funksionaliteit by waarskuwings te voeg.

Aflaai

Gebruik bootstrap-alerts.js

$ ( ".alert-boodskap" ). waarskuwing ()

Opmerk

Voeg net 'n data-alertkenmerk by jou waarskuwingsboodskappe om hulle outomaties naby funksionaliteit te gee.

Metodes

$().alert()

Omvou alle waarskuwings met noue funksionaliteit. Om jou waarskuwings te laat animeer wanneer dit gesluit is, maak seker dat die .fadeen .inklas reeds op hulle toegepas is.

.alert('close')

Maak 'n waarskuwing toe.

$ ( ".alert-boodskap" ). waarskuwing ( 'toe' )

Demo