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, string	onwaar	Sluit 'n modale agtergrondelement in. Stel agtergrond "static"as jy nie wil hê dat die modaal gesluit word wanneer die agtergrond geklik word nie.
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 = "static" > 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 ({
  sleutelbord : 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 bootstrap-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

Met behulp van bootstrap-scrollspy.js

$ ( '#topbalk' ). scrollSpy ()

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

Demo

Kyk na die topbalk-navigasie op hierdie bladsy.

Hierdie inprop bied bykomende funksionaliteit vir die bestuur van knoppiestatus.

Aflaai

Die gebruik van bootstrap-buttons.js

$ ( '.tabs' ). knoppie ()

Metodes

$().button('wissel')

Wissel stootstatus. Gee btn die voorkoms dat dit geaktiveer is.

Kennisgewing Jy kan outomatiese skakel van 'n knoppie aktiveer deur die data-togglekenmerk te gebruik.

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

$().button('laai')

Stel knoppiestatus na laai - deaktiveer knoppie en ruil teks om na laai teks. Laaiteks moet op die knoppie-element gedefinieer word deur die data-kenmerk te gebruik data-loading-text.

<button class = "btn" data-loading-text = "laai goed..." > ... </button>   

$().button('reset')

Stel knoppiestatus terug - ruil teks na oorspronklike teks.

$().button(string)

Stel knoppiestatus terug - ruil teks na enige data-gedefinieerde tekstoestand.

<button class = "btn" data-complete-text = "klaar!" > ... </knoppie>   
<skrif>
  $('.btn').button('complete')
</script>

Demo

Laai tans Demo Wissel Demo

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

Aflaai

Gebruik bootstrap-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> 
</div>
 
<skrif>
  $ ( funksie () {  
    $ ( '.tabs' ). oortjies ()
  })
</script>

Gebeurtenisse

Gebeurtenis	Beskrywing
verander	Hierdie gebeurtenis begin met oortjieverandering. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie te teiken.

$ ( '#.tabs' ). bind ( 'verander' , funksie ( e ) {   
  e . teiken // geaktiveerde blad
  e . relatedTarget // vorige oortjie
})

Demo

• Tuis
• Profiel
• Boodskappe
• Instellings
• Aftreklys
  • @vet
  • @mdo

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	string, funksie	'titel'	kenmerk of metode vir die herwinning van titelteks
sneller	string	'sweef'	hoe tooltip geaktiveer word - beweeg | fokus | handleiding
sjabloon	string	[verstek opmaak]	Die HTML-sjabloon wat gebruik word vir die weergawe van 'n twipsy.

Kennisgewing Individuele twipsy-instansie-opsies kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Sommige titelteks' > teks </a>    

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 bootstrap-twipsy.js- inprop uit, so maak seker dat jy daardie lêer ook gryp wanneer jy popovers in jou projek insluit!

Kennisgewing Jy moet die bootstrap-twipsy.js-lêer voor bootstrap-popover.js insluit.

Aflaai

Gebruik bootstrap-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	string, funksie	'titel'	kenmerk of metode vir die herwinning van titelteks
inhoud	string, funksie	'data-inhoud'	'n string of metode vir die herwinning van inhoudteks. indien geen verskaf word nie, sal inhoud van 'n data-inhoud-kenmerk verkry word.
sneller	string	'sweef'	hoe tooltip geaktiveer word - beweeg | fokus | handleiding
sjabloon	string	[verstek opmaak]	Die HTML-sjabloon wat gebruik word vir die lewering van 'n popover.

Kennisgewing Individuele popover-instansie-opsies kan alternatiewelik gespesifiseer word deur die gebruik van data-kenmerke.

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

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.

Opsies

Naam	tipe	verstek	beskrywing
keurder	string	'.naby'	Watter kieser om te teiken vir die sluiting van 'n waarskuwing.

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