Nia Modala kromaĵo estas tre svelta aldono de la tradicia modala js-kromaĵo, aparte zorgante inkluzivi nur la nudan funkcion, kiun ni postulas ĉi tie ĉe tvitero.

Elŝutu

Uzante bootstrap-modal

$ ( '#mia-modala' ). modalo ( opcioj )

Opcioj

Nomo	tajpu	defaŭlte	Priskribo
fono	boolean, ŝnuro	malvera	Inkluzivas modalan fonan elementon. Agordu fonon al "static"se vi ne volas la modalon fermita kiam la fonfono estas klakita.
klavaro	bulea	malvera	Fermas la modalon kiam eskapa klavo estas premata
montri	bulea	malvera	Malfermas modalon sur klasinicialigo

Markado

Vi povas facile aktivigi modalojn en via paĝo sen devi skribi unu linion de Javaskripto. Nur donu al elemento data-controls-modalatributon, kiu respondas al modala elemento-id, kaj kiam oni klakas, ĝi lanĉos vian modalon. Por aldoni modalajn opciojn, simple inkluzivu ilin ankaŭ kiel datumajn atributojn.

<a class = "btn" data-controls-modal = "mia-modala" data-backdrop = "senmova" > Lanĉi Modalon </a>    

Rimarko Se vi volas, ke via modalo animu en kaj eksteren, simple aldonu .fadeklason al via .modalelemento (referu al la demo por vidi ĉi tion en ago).

Metodoj

.modal(opcioj)

Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object.

$ ( '#mia-modala' ). modalo ({
  klavaro : vera 
})

.modal('ŝanĝu')

Mane ŝanĝas modalon.

$ ( '#mia-modala' ). modala ( 'ŝalti' )

.modal('montri')

Mane malfermas modalon.

$ ( '#mia-modala' ). modalo ( 'montri' )

.modal('kaŝi')

Mane kaŝas modalon.

$ ( '#mia-modala' ). modalo ( 'kaŝi' )

.modala (vera)

Liveras elementon de modala klaso.

$ ( '#mia-modala' ). modala ( vera )

Rimarko Alternative, ĉi tio povas esti prenita per $().data('modal').

Eventoj

La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.

Evento	Priskribo
montri	Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata	Ĉi tiu evento estas lanĉita kiam la modalo fariĝis videbla por la uzanto (atendos ke css-transiroj finiĝos).
kaŝi	Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita	Ĉi tiu evento estas pafita kiam la modalo finiĝis kaŝita de la uzanto (atendos ke css-transiroj finiĝos).

$ ( '#mia-modala' ). bind ( 'kaŝita' , funkcio () {   
  // fari ion ...
})

Demo

Lanĉu Modalon

Ĉi tiu kromaĵo estas por aldoni falmeninteragon al la botostrap supra baro aŭ klapetaj navigacioj.

Elŝutu

Uzante bootstrap-dropdown.js

$ ( '#supra baro' ). falmenuo ()

Markado

Por rapide aldoni falmenuan funkcion al iu ajn nav-elemento, uzu la data-dropdownatributon. Ajna valida bootstrap falmenuo aŭtomate aktiviĝos.

<ul class = "langetoj" > 
  <li class = "active" ><a href = "#" > Hejmo </a></li>  
  <li class = "dropdown" data-dropdown = "menumenumo" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "falmenuo" > 
      <li><a href = "#" > Malĉefa ligilo </a></li> 
      <li><a href = "#" > Io alia ĉi tie </a></li> 
      <li class = "dividanto" ></li> 
      <li><a href = "#" > Alia ligilo </a></li> 
    </ul>
  </li>
</ul>

Rimarku Se via ui havas plurajn falmenuojn, konsideru aldoni la data-dropdownatributon al pli signifa ujo-elemento kiel .tabsaŭ .topbar.

Metodoj

$(). dropdown()

Programa API por aktivigi menuojn por donita supra baro aŭ klapeta navigado.

Demo

Ĉi tiu kromaĵo estas por aldoni la scrollspy (aŭtomata ĝisdatigo de nav) interago al la bootstrap supra baro.

Elŝutu

Uzante bootstrap-scrollspy.js

$ ( '#supra baro' ). scrollSpy ()

Markado

Por facile aldoni scrollspy konduton al via nav, simple aldonu la data-scrollspyatributon al la .topbar.

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

Metodoj

$().scrollSpy()

Aŭtomate aktivigas navigajn butonojn de la rulpozicio de uzantoj.

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

Rimarku Topbar-ankro-etikedoj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>devas respondi al io en la dom kiel <div id="home"></div>.

.scrollSpy('refreŝigi')

La scrollspy konservas navbutonojn kaj sekciajn koordinatojn por agado. Se vi bezonas ĝisdatigi ĉi tiun kaŝmemoron (verŝajne se vi havas dinamikan enhavon) simple voku ĉi tiun refreŝigan metodon. Se vi uzis la datuman atributon por difini vian scrollspy, simple voku refresh sur la korpo.

$ ( 'korpo' ). scrollSpy ( 'refreŝigi' )

Demo

Kontrolu la supran baran navigadon en ĉi tiu paĝo.

Ĉi tiu kromaĵo ofertas aldonan funkcion por administri butonan staton.

Elŝutu

Uzante bootstrap-buttons.js

$ ( '.tabs' ). butono ()

Metodoj

$().button('ŝaltu')

Ŝaltigas puŝan staton. Donas al btn la aspekton, ke ĝi estas aktivigita.

Rimarko Vi povas ebligi aŭtomatan ŝanĝadon de butono uzante la data-toggleatributon.

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

$().button('ŝarĝante')

Agordas butonan staton al ŝarĝo - malŝaltas butonon kaj interŝanĝas tekston al ŝarĝo de teksto. Ŝargado de teksto devus esti difinita sur la butonelemento uzante la datuman atributon data-loading-text.

<button class = "btn" data-loading-text = "ŝargi aĵojn..." > ... </button>   

$().button('restarigi')

Restarigas butonan staton - interŝanĝas tekston al originala teksto.

$().butono(ŝnuro)

Restarigas butonan staton - interŝanĝas tekston al iu ajn datuma difinita teksto-stato.

<button class = "btn" data-complete-text = "finita!" > ... </butono>   
<skripto>
  $('.btn').button('kompleta')
</skripto>

Demo

Ŝarĝante Demo Baskuligi Demo

Ĉi tiu kromaĵo aldonas rapidan, dinamikan langeton kaj pilolfunkciecon.

Elŝutu

Uzante bootstrap-tabs.js

$ ( '.tabs' ). langetoj ()

Markado

Vi povas aktivigi langeton aŭ pilolan navigadon sen verki javaskripton simple donante al ili atributon data-tabsaŭ .data-pills

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

Metodoj

$().tabs aŭ $().piloloj

Aktivigas langeton kaj pilolfunkcion por donita ujo. Tab-ligiloj devus referenci id-ojn en la dokumento.

<ul class = "langetoj" > 
  <li class = "aktiva" ><a href = "#home" > Hejmo </a></li>  
  <li><a href = "#profile" > Profilo </a></li> 
  <li><a href = "#messages" > Mesaĝoj </a></li> 
  <li><a href = "#settings" > Agordoj </a></li> 
</ul>
 
<div class = "pilol-enhavo" > 
  <div class = "aktiva" id = "hejmo" > ... </div>  
  <div id = "profilo" > ... </div> 
  <div id = "mesaĝoj" > ... </div> 
  <div id = "agordoj" > ... </div> 
</div>
 
<skripto>
  $ ( funkcio () {  
    $ ( '.tabs' ). langetoj ()
  })
</script>

Eventoj

Evento	Priskribo
ŝanĝi	Ĉi tiu evento ekfunkciigas je langetoŝanĝo. Uzu event.targetkaj event.relatedTargetpor celi la aktivan langeton kaj la antaŭan aktivan langeton respektive.

$ ( '#.langetoj' ). bind ( 'ŝanĝo' , funkcio ( e ) {   
  e . celo // aktivigita langeto
  e . rilataCelo // antaŭa langeto
})

Demo

• Hejmo
• Profilo
• Mesaĝoj
• Agordoj
• Dropdown
  • @graso
  • @mdo

Bazita sur la bonega jQuery.tipsy kromaĵo skribita de Jason Frame; twipsy estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas css3 por kuraĝigoj kaj datumoj-atributoj por titola konservado!

Elŝutu

Uzante bootstrap-twipsy.js

$ ( '#ekzemplo' ). twipsy ( opcioj )

Opcioj

Nomo	tajpu	defaŭlte	Priskribo
animi	bulea	vera	apliki css fade transiro al la konsileto
delayIn	nombro	0	prokrasto antaŭ montri konsileton (ms)
delayOut	nombro	0	prokrasto antaŭ kaŝi konsileton (ms)
falo	ŝnuro	''	teksto por uzi kiam neniu konsila titolo ĉeestas
lokigo	ŝnuro	'supre'	kiel poziciigi la konsileton - supre | malsupre | maldekstra | ĝuste
html	bulea	malvera	permesas HTML-enhavon ene de konsileto
vivi	bulea	malvera	uzu eventan delegacion anstatau individuaj eventaj pritraktiloj
ofseto	nombro	0	piksela ofseto de konsileto de cela elemento
titolo	string, funkcio	'titolo'	atributo aŭ metodo por retrovi titoltekston
ellasilon	ŝnuro	'ŝvebi'	kiel la konsileto estas ekigita - ŝvebi | fokuso | manlibro
ŝablono	ŝnuro	[defaŭlta markado]	La html-ŝablono uzata por bildi twipsy.

Rimarko Individuaj twipsy-ekzemploj povas alternative esti specifitaj per la uzo de datumaj atributoj.

<a href = "#" data-placement = "malsupre" rel = 'twipsy' title = 'Iom da titolteksto' > teksto </a>    

Metodoj

$().twipsy(opcioj)

Alligas twipsy-traktilon al elementkolekto.

.twipsy('montri')

Rivelas elementojn twipsy.

$ ( '#elemento' ). twipsy ( 'montri' )

.twipsy('kaŝi')

Kaŝas elementojn twipsy.

$ ( '#elemento' ). twipsy ( 'kaŝi' )

.twipsy(vera)

Liveras ekzemplon de la klaso twipsy de elementoj.

$ ( '#elemento' ). twipsy ( vera )

Rimarko Alternative, ĉi tio povas esti prenita per $().data('twipsy').

Demo

La popover kromaĵo provizas simplan interfacon por aldoni popovers al via aplikaĵo. Ĝi etendas la kromprogramon bootstrap-twipsy.js , do nepre prenu ankaŭ tiun dosieron kiam vi inkluzivas popovers en via projekto!

Rimarko Vi devas inkluzivi la dosieron bootstrap-twipsy.js antaŭ bootstrap-popover.js.

Elŝutu

Uzante bootstrap-popover.js

$ ( '#ekzemplo' ). popover ( opcioj )

Opcioj

Nomo	tajpu	defaŭlte	Priskribo
animi	bulea	vera	apliki css fade transiro al la konsileto
delayIn	nombro	0	prokrasto antaŭ montri konsileton (ms)
delayOut	nombro	0	prokrasto antaŭ kaŝi konsileton (ms)
falo	ŝnuro	''	teksto por uzi kiam neniu konsila titolo ĉeestas
lokigo	ŝnuro	'ĝuste'	kiel poziciigi la konsileton - supre | malsupre | maldekstra | ĝuste
html	bulea	malvera	permesas HTML-enhavon ene de konsileto
vivi	bulea	malvera	uzu eventan delegacion anstatau individuaj eventaj pritraktiloj
ofseto	nombro	0	piksela ofseto de konsileto de cela elemento
titolo	string, funkcio	'titolo'	atributo aŭ metodo por retrovi titoltekston
enhavo	string, funkcio	'datumenhavo'	ĉeno aŭ metodo por retrovi enhavan tekston. se neniu estas provizita, enhavo estos fontita el atributo de datumoj-enhavo.
ellasilon	ŝnuro	'ŝvebi'	kiel la konsileto estas ekigita - ŝvebi | fokuso | manlibro
ŝablono	ŝnuro	[defaŭlta markado]	La html-ŝablono uzata por bildi popover.

Rimarko Individuaj popover-ekzemploj povas alternative esti specifitaj per la uzo de datumaj atributoj.

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

Metodoj

$().popover(opcioj)

Inicializas popovers por elemento kolekto.

.popover('montri')

Rivelas elementojn popover.

$ ( '#elemento' ). popover ( 'montri' )

.popover('kaŝi')

Kaŝas elementojn popover.

$ ( '#elemento' ). popover ( 'kaŝi' )

Demo

ŝvebi por popover

La atentiga kromaĵo estas tre eta klaso por aldoni proksimajn funkciojn al atentigoj.

Elŝutu

Uzante bootstrap-alerts.js

$ ( ".alerto-mesaĝo" ). atentiga ()

Markado

Nur aldonu data-alertatributon al viaj atentaj mesaĝoj por aŭtomate doni al ili proksiman funkcion.

Opcioj

Nomo	tajpu	defaŭlte	Priskribo
elektilo	ŝnuro	'.fermu'	Kiun elektilon celi por fermi alarmon.

Metodoj

$().alerto()

Envolvas ĉiujn atentigojn kun proksima funkcio. Por ke viaj atentigoj animiĝu kiam fermite, certigu, ke ili havas la klason .fadekaj .injam aplikita al ili.

.alert('fermi')

Fermas alarmon.

$ ( ".alerto-mesaĝo" ). atentigo ( 'fermi' )

Demo