Il-plugin Modal tagħna huwa teħid super slim tal-plugin modali js tradizzjonali, filwaqt li tieħu ħsieb speċjali li tinkludi biss il-funzjonalità vojta li neħtieġu hawn fuq twitter.

Niżżel

Bl-użu bootstrap-modal

$ ( '#modal tiegħi' ). modali ( għażliet )

Għażliet

Isem	tip	default	deskrizzjoni
sfond	boolean, spag	falza	Jinkludi element ta' sfond modali. Issettja l-isfond għal "static"jekk ma tridx li l-modal jingħalaq meta l-isfond jiġi kklikkjat.
tastiera	boolean	falza	Jagħlaq il-modal meta tingħafas iċ-ċavetta tal-ħarba
juru	boolean	falza	Jiftaħ modali fuq l-inizjalizzazzjoni tal-klassi

Markup

Tista' tattiva l-modals fuq il-paġna tiegħek faċilment mingħajr ma jkollok tikteb linja waħda ta' javascript. Agħti biss element data-controls-modalattribut li jikkorrispondi għal id element modali, u meta għafast, se tniedi l-modal tiegħek. Biex iżżid għażliet modali, inkludihom biss bħala attributi tad-dejta wkoll.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Tnedija Modali </a>    

Avviż Jekk trid li l-modal tiegħek janima 'l ġewwa u 'l barra, żid .fadeklassi fl- .modalelement tiegħek (irreferi għad-demo biex tara dan fl-azzjoni).

Metodi

.modal(għażliet)

Jattiva l-kontenut tiegħek bħala modal. Jaċċetta għażliet fakultattivi object.

$ ( '#modal tiegħi' ). modali ({
  tastiera : vera 
})

.modal('toggle')

Manwalment toggles modali.

$ ( '#modal tiegħi' ). modali ( 'toggle' )

.modal('show')

Manwalment tiftaħ modali.

$ ( '#modal tiegħi' ). modali ( 'turi' )

.modal('hide')

Manwalment jaħbi modali.

$ ( '#modal tiegħi' ). modali ( 'ħbi' )

.modali(veru)

Jirritorna istanza ta' klassi modali ta' elementi.

$ ( '#modal tiegħi' ). modali ( veru )

Avviż Alternattivament, dan jista' jiġi rkuprat b' $().data('modal').

Avvenimenti

Il-klassi modali ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità modali.

Avveniment	Deskrizzjoni
juru	Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
murija	Dan l-avveniment jiġi sparat meta l-modal ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet css jitlestew).
ħabi	Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu tal-istanza jkun ġie msejjaħ.
moħbija	Dan l-avveniment jiġi sparat meta l-modal ikun spiċċa moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet css).

$ ( '#modal tiegħi' ). bind ( 'moħbi' , funzjoni () {   
  // agħmel xi ħaġa...
})

Demo

Tnedija Modal

Dan il-plugin huwa biex iżżid interazzjoni dropdown mal-bootstrap topbar jew navigazzjonijiet tabbed.

Niżżel

Bl-użu bootstrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Markup

Biex iżżid malajr il-funzjonalità dropdown għal kwalunkwe element tan-nav, uża l- data-dropdownattribut. Kwalunkwe dropdown valida tal-bootstrap tiġi attivata awtomatikament.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Dar </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "menu dropdown" > 
      <li><a href = "#" > Rabta sekondarja </a></li> 
      <li><a href = "#" > Xi ħaġa oħra hawn </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Rabta oħra </a></li> 
    </ul>
  </li>
</ul>

Avviż Jekk l-ui tiegħek għandha diversi dropdowns, ikkunsidra li żżid l- data-dropdownattribut ma' element ta' kontenitur aktar sinifikanti bħal .tabsjew .topbar.

Metodi

$().dropdown()

Api programatiku għall-attivazzjoni tal-menus għal topbar partikolari jew navigazzjoni bit-tabbed.

Demo

Dan il-plugin huwa biex iżżid l-interazzjoni scrollspy (nav aġġornament awtomatiku) mal-topbar tal-bootstrap.

Niżżel

Bl-użu bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markup

Biex iżżid faċilment l-imġieba scrollspy man-nav tiegħek, żid biss l- data-scrollspyattribut mal- .topbar.

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

Metodi

$().scrollSpy()

Auto jattiva l-buttuni tan-navigazzjoni mill-utenti skrollja pożizzjoni.

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

Avviż Topbar ankra tags għandu jkollhom miri risolvebbli id. Per eżempju, <a href="#home">home</a>għandu jikkorrispondi għal xi ħaġa fil-dom bħal <div id="home"></div>.

.scrollSpy('aġġornament')

L-iscrollspy jaħbat il-buttuni tan-nav u l-koordinati tas-sezzjoni għall-prestazzjoni. Jekk għandek bżonn taġġorna din il-cache (probabbilment jekk għandek kontenut dinamiku) sempliċement sejjaħ dan il-metodu ta 'aġġornament. Jekk użajt l-attribut tad-data biex tiddefinixxi l-iscrollspy tiegħek, sempliċement sejjaħ refresh fuq il-ġisem.

$ ( 'korp' ). scrollSpy ( 'aġġornament' )

Demo

Iċċekkja n-navigazzjoni topbar f'din il-paġna.

Dan il-plugin joffri funzjonalità addizzjonali għall-ġestjoni tal-istat tal-buttuna.

Niżżel

Bl-użu bootstrap-buttons.js

$ ( '.tabs' ). buttuna ()

Metodi

$().button('toggle')

Toggles push state. Jagħti lil btn id-dehra li ġie attivat.

Avviż Tista' tattiva t-toggling awtomatiku ta' buttuna billi tuża l- data-toggleattribut.

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

$().button('tagħbija')

Issettja l-istat tal-buttuna għat-tagħbija - tiddiżattiva l-buttuna u tbiddel it-test mat-test tat-tagħbija. It-test tat-tagħbija għandu jiġi definit fuq l-element tal-buttuna bl-użu tal-attribut tad-data data-loading-text.

<button class = "btn" data-loading-text = "jitgħabbi l-affarijiet..." > ... </button>   

$().button('reset')

Irrisettja l-istat tal-buttuna - tbiddel it-test mat-test oriġinali.

$().button(string)

Irrisettja l-istat tal-buttuna - tbiddel it-test għal kwalunkwe stat tat-test definit tad-dejta.

<button class = "btn" data-complete-text = "lest!" > ... </button>   
<kitba>
  $('.btn').button('komplet')
</skrip>

Demo

Tagħbija Demo Toggle Demo

Dan il-plugin iżid tab veloċi, dinamiku u funzjonalità tal-pilloli.

Niżżel

Bl-użu bootstrap-tabs.js

$ ( '.tabs' ). tabs ()

Markup

Tista' tattiva tab jew navigazzjoni pillola mingħajr ma tikteb xi javascript billi sempliċement tagħtihom attribut data-tabsjew .data-pills

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

Metodi

$().tabs jew $().pilloli

Jattiva l-funzjonalità tat-tab u l-pillola għal kontenitur partikolari. Il-links tat-tab għandhom jirreferu għall-id fid-dokument.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Dar </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messaġġi </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "kontenut tal-pilloli" > 
  <div class = "active" id = "dar" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "messaġġi" > ... </div> 
  <div id = "settings" > ... </div> 
</div>
 
<kitba>
  $ ( funzjoni () {  
    $ ( '.tabs' ). tabs ()
  })
</script>

Avvenimenti

Avveniment	Deskrizzjoni
bidla	Dan l-avveniment jispara fuq tab change. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti rispettivament.

$ ( '#.tabs' ). bind ( 'bidla' , funzjoni ( e ) {   
  e . mira // tab attivata
  e . relatedTarget // tab preċedenti
})

Demo

• Dar
• Profil
• Messaġġi
• Settings
• Dropdown
  • @xaħam
  • @mdo

Ibbażat fuq il-plugin jQuery.tipsy eċċellenti miktub minn Jason Frame; twipsy hija verżjoni aġġornata, li ma tistrieħx fuq immaġini, tuża css3 għal animazzjonijiet, u data-attributi għall-ħażna tat-titlu!

Niżżel

Bl-użu bootstrap-twipsy.js

$ ( '#eżempju' ). twipsy ( għażliet )

Għażliet

Isem	tip	default	deskrizzjoni
janimaw	boolean	veru	applika transizzjoni fade css għall-tooltip
dewmienIn	numru	0	dewmien qabel ma jintwera tooltip (ms)
delayOut	numru	0	dewmien qabel ma jaħbi tooltip (ms)
Aqa lura	spag	''	test biex tuża meta ma jkun preżenti l-ebda titolu ta' tooltip
tqegħid	spag	'hawn fuq'	kif tpoġġi l-tooltip - hawn fuq | hawn taħt | xellug | dritt
html	boolean	falza	jippermetti kontenut html fi ħdan tooltip
jgħix	boolean	falza	uża d-delegazzjoni tal-avvenimenti minflok handlers tal-avvenimenti individwali
offset	numru	0	pixel offset ta' tooltip mill-element fil-mira
titolu	spag, funzjoni	'titlu'	attribut jew metodu għall-irkupru tat-test tat-titlu
grillu	spag	'jiċċaqlaq'	kif tooltip huwa attivat - imbagħad jerġgħu | tiffoka | manwal
mudell	spag	[markup default]	Il-mudell html użat biex jagħti twipsy.

Avviż Għażliet ta' istanza ta' twipsy individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Xi test tat-titlu' > test </a>    

Metodi

$().twipsy(għażliet)

Jwaħħal twipsy handler ma' kollezzjoni ta' elementi.

.twipsy('show')

Tiżvela elementi twipsy.

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

.twipsy('hide')

Jaħbi elementi twipsy.

$ ( '#element' ). twipsy ( 'ħbi' )

.twipsy(veru)

Jirritorna istanza tal-klassi twipsy tal-elementi.

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

Avviż Alternattivament, dan jista' jiġi rkuprat b' $().data('twipsy').

Demo

Il-plugin popover jipprovdi interface sempliċi biex iżżid popovers mal-applikazzjoni tiegħek. Jestendi l -plugin bootstrap-twipsy.js , għalhekk kun żgur li taqbad dak il-fajl ukoll meta tinkludi popovers fil-proġett tiegħek!

Avviż Int trid tinkludi l-fajl bootstrap-twipsy.js qabel bootstrap-popover.js.

Niżżel

Bl-użu bootstrap-popover.js

$ ( '#eżempju' ). popover ( għażliet )

Għażliet

Isem	tip	default	deskrizzjoni
janimaw	boolean	veru	applika transizzjoni fade css għall-tooltip
dewmienIn	numru	0	dewmien qabel ma jintwera tooltip (ms)
delayOut	numru	0	dewmien qabel ma jaħbi tooltip (ms)
Aqa lura	spag	''	test biex tuża meta ma jkun preżenti l-ebda titolu ta' tooltip
tqegħid	spag	'dritt'	kif tpoġġi l-tooltip - hawn fuq | hawn taħt | xellug | dritt
html	boolean	falza	jippermetti kontenut html fi ħdan tooltip
jgħix	boolean	falza	uża d-delegazzjoni tal-avvenimenti minflok handlers tal-avvenimenti individwali
offset	numru	0	pixel offset ta' tooltip mill-element fil-mira
titolu	spag, funzjoni	'titlu'	attribut jew metodu għall-irkupru tat-test tat-titlu
kontenut	spag, funzjoni	'kontenut tad-dejta'	string jew metodu għall-irkupru tat-test tal-kontenut. jekk l-ebda wieħed ma jkun ipprovdut, il-kontenut jiġi minn attribut tal-kontenut tad-dejta.
grillu	spag	'jiċċaqlaq'	kif tooltip huwa attivat - imbagħad jerġgħu | tiffoka | manwal
mudell	spag	[markup default]	Il-mudell html użat biex tirrendi popover.

Avviż Għażliet ta' istanza ta' popover individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta.

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

Metodi

$().popover(għażliet)

Inizjalizza popovers għal ġabra ta' elementi.

.popover('show')

Tiżvela popover ta 'elementi.

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

.popover('hide')

Jaħbi popover ta' elementi.

$ ( '#element' ). popover ( 'ħbi' )

Demo

Hover għal popover

Il-plugin ta 'twissija huwa klassi super ċkejkna biex iżżid funzjonalità mill-qrib mat-twissijiet.

Niżżel

Bl-użu bootstrap-alerts.js

$ ( ".alert-messagg" ). twissija ()

Markup

Żid biss data-alertattribut mal-messaġġi ta' twissija tiegħek biex awtomatikament tagħtihom funzjonalità mill-qrib.

Għażliet

Isem	tip	default	deskrizzjoni
selettur	spag	'.agħlaq'	X'selettur għandu jimmira għall-għeluq ta' allert.

Metodi

$().alert()

Igeżwer it-twissijiet kollha b'funzjonalità mill-qrib. Biex it-twissijiet tiegħek janimaw meta jingħalqu, kun żgur li għandhom il- klassi .fadeu .indiġà applikati għalihom.

.alert('qrib')

Jagħlaq allert.

$ ( ".alert-messagg" ). allert ( 'qrib' )

Demo