Pêveka meya Modal li ser pêveka modal js ya kevneşopî vegirtinek pir zirav e, lênihêrînek taybetî digire da ku tenê fonksiyona tazî ya ku em li vir li ser twitter-ê hewce dikin vedihewîne.

Download

Bikaranîna bootstrap-modal

$ ( '#my-modal' ). modal ( vebijark )

Vebijêrk

Nav	awa	destçûnî	terîf
paşperdeya	boolean	şaş	Hêmanek modal-backdrop tê de ye
kilawye	boolean	şaş	Dema ku bişkojka revê tê pêlkirin modalê digire
rêdan	boolean	şaş	Li ser destpêkirina polê modal vedike

Markup

Hûn dikarin modalên li ser rûpela xwe bi hêsanî çalak bikin bêyî ku hûn yek rêzek javascriptê binivîsin. Tenê hêmanek data-controls-modaltaybetmendiyek ku bi nasnameya hêmanek modal re têkildar e bidin, û gava ku were klîk kirin, ew ê modala we bide destpêkirin. Ji bo ku vebijarkên modal zêde bikin, tenê wan wekî taybetmendiyên daneyê jî têxin nav xwe.

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

Hişyar bikin Heke hûn dixwazin modala we li hundur û derveyî anîmasyon bibe, tenê .fadeçînek li .modalhêmana xwe zêde bikin (ji bo dîtina vê di çalakiyê de serî li demo bidin).

Methods

.modal(vebijark)

Naveroka we wekî modal çalak dike. Vebijêrkek vebijarkî qebûl objectdike.

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

.modal('veguhertin')

Modalek bi destan diguhezîne.

$ ( '#my-modal' ). modal ( 'veguhertin' )

.modal('nîşan bide')

Bi destan modalek vedike.

$ ( '#my-modal' ). modal ( 'nîşandan' )

.modal('veşêre')

Bi destan modalek vedişêre.

$ ( '#my-modal' ). modal ( 'veşêre' )

.modal(rast)

Mînaka çîna modal a hêmanan vedigerîne.

$ ( '#my-modal' ). modal ( rast )

Hişyar bikin Alternatîf, ev dikare bi $().data('modal').

Events

Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike.

Bûyer	Terîf
rêdan	showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan	Dema ku modal ji bikarhênerê re xuya bû ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên css bimîne).
veşartin	hideDema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin .
veşartî	Dema ku modal ji bikarhênerê veşartî xilas bû ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên css biqede).

$ ( '#my-modal' ). girêdan ( 'veşartî' , fonksiyona () {   
  // tiştekî bike ...
})

Demo

Modal dest pê bikin

Ev pêvek ji bo lê zêdekirina danûstendina dakêşanê li barika jorîn a bootstrap an navîgasyonên tabloyê ye.

Download

Bikaranîna boostrap-dropdown.js

$ ( '#topbar' ). daket ()

Markup

Ji bo ku zû fonksiyona dakêşanê li her hêmanek navokê zêde bikin, data-dropdowntaybetmendiyê bikar bînin. Her dakêşana bootstrapê ya derbasdar dê bixweber were aktîf kirin.

<ul class = "tabs" > 
  <li class = "çalak" ><a href = "#" > Mal </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Girêdana duyemîn </a></li> 
      <li><a href = "#" > Tiştekî din li vir </a></li> 
      <li class = "divider" </li> 
      <li><a href = "#" > Girêdana din </a></li> 
    </ul>
  </li>
</ul>

Hişyar bikin Ger UI-ya we çend dakêşan hene, bifikirin ku data-dropdowntaybetmendiyê li hêmanek konteynerê girîngtir mîna .tabsan .topbar.

Methods

$().dropdown()

Api bernameyek ji bo çalakkirina menuyan ji bo barbarek jorîn an navîgasyonek tabelê.

Demo

Ev pêvek ji bo lê zêdekirina danûstendina scrollspy (navê nûvekirina otomatîkî) li barika jorîn a bootstrapê ye.

Download

Bikaranîna boostrap-scrollspy.js

$ ( '#topbar' ). daket ()

Markup

Ji bo ku bi hêsanî behreya scrollspy li nav xwe zêde bikin, tenê data-scrollspytaybetmendiyê li ser lê zêde bikin .topbar.

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

Methods

$().scrollspy()

Xweser bişkokên navîgasyonê ji hêla bikarhêneran ve pozîsyona gerokê çalak dike.

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

Bala xwe bidin etîketên lengerê yên Topbar divê xwedî armancên nasnameyê yên çareserker bin. Ji bo nimûne, <a href="#home">home</a>divê bi tiştekî di dom wek <div id="home"></div>.

.scrollspy('tezekirin')

Scrollspy bişkokên nav û hevrêzên beşê ji bo performansê vedişêre. Heke hûn hewce ne ku vê cache-ê nûve bikin (dibe ku heke we naveroka dînamîkî hebe) tenê vê rêbazê nûvekirinê bang bikin. Ger we taybetmendiya daneyê bikar anî da ku hûn scrollspy-ya xwe diyar bikin, tenê li ser laş refresh bang bikin.

$ ( 'laş' ). scrollspy ( 'nûkirina' )

Demo

Li ser vê rûpelê navîgasyon barika jorîn binihêrin.

Ev pêvek fonksiyona tablo û hebên bilez, dînamîkî zêde dike.

Download

Bikaranîna boostrap-tabs.js

$ ( '.tabs' ). tabloyên ()

Markup

Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina javascriptê bi tenê dayîna wan data-tabsan data-pillstaybetmendiyek çalak bikin.

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

Methods

$().tabs an jî $().pills

Ji bo konteynirek diyar fonksiyona tablo û heban çalak dike. Girêdanên tabloyê divê di belgeyê de nasnameyên referansê bikin.

<ul class = "tabs" > 
  <li class = "çalak" ><a href = "#home" > Mal </a></li>  
  <li><a href = "#profile" > Profîl </a></li> 
  <li><a href = "#messages" > Peyam </a></li> 
  <li><a href = "#settings" > Mîhengan </a></li> 
</ul>
 
<div class = "naveroka heban" > 
  <div class = "active" id = "mal" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). tabloyên ()
  })
</script>

Demo

• Xane
• Tengal
• Messages
• Settings

Li ser bingeha pêveka hêja ya jQuery.tipsy ku ji hêla Jason Frame ve hatî nivîsandin; twipsy guhertoyek nûvekirî ye, ku xwe dispêre wêneyan, css3 ji bo anîmasyon, û taybetmendiyên daneyan ji bo hilanîna sernavê bikar tîne!

Download

Bikaranîna bootstrap-twipsy.js

$ ( '#mînak' ). twipsy ( vebijark )

Vebijêrk

Nav	awa	destçûnî	terîf
jîyandan	boolean	rast	veguherînek fade ya css-ê li ser tooltip bicîh bikin
derengIn	jimare	0	derengmayîn berî nîşandana şîreta amûrê (ms)
delayOut	jimare	0	derengmayîn berî veşartina şîreta amûrê (ms)
fallback	ben	''	nivîsa ku dema sernavê sernivîsa amûrê tune be bikar bîne
danîn	ben	'ser'	meriv çawa şîreta amûrê bi cih dike - jorîn | jêr | çep | rast
html	boolean	şaş	destûrê dide naveroka html di nav tooltip de
jîyan	boolean	şaş	Delegasyona bûyerê li şûna rêvebirên bûyerê yên takekesî bikar bînin
offset	jimare	0	Pîxel veqetandina amûrê ji hêmana armancê
nav	string | karî	'nav'	taybetmendî an rêbazek ji bo wergirtina nivîsa sernavê
kişok	ben	'livîn'	tooltip çawa tê derxistin - hover | fokus | destî

Methods

$().twipsy(vebijark)

Rêvekerek twipsy bi berhevokek elementê ve girêdide.

.twipsy('nîşan bide')

Hêmanek twipsy eşkere dike.

$ ( '#element' ). twipsy ( 'nîşan bide' )

.twipsy('veşêre')

Hêmanek twipsy vedişêre.

$ ( '#element' ). twipsy ( 'veşêre' )

.twipsy (rast)

Elementek mînakek çîna twipsy vedigerîne.

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

Hişyar bikin Alternatîf, ev dikare bi $().data('twipsy').

Demo

Pêveka popover ji bo lêzêdekirina popoveran li serîlêdana xwe navgînek hêsan peyda dike. Ew pêveka boostrap-twipsy.js dirêj dike , ji ber vê yekê gava ku popoveran di projeya xwe de vedihewînin, pê ewle bin ku hûn wê pelê jî bigirin!

Download

Bikaranîna boostrap-popover.js

$ ( '#mînak' ). popover ( vebijark )

Vebijêrk

Nav	awa	destçûnî	terîf
jîyandan	boolean	rast	veguherînek fade ya css-ê li ser tooltip bicîh bikin
derengIn	jimare	0	derengmayîn berî nîşandana şîreta amûrê (ms)
delayOut	jimare	0	derengmayîn berî veşartina şîreta amûrê (ms)
fallback	ben	''	nivîsa ku dema sernavê sernivîsa amûrê tune be bikar bîne
danîn	ben	'rast'	meriv çawa şîreta amûrê bi cih dike - jorîn | jêr | çep | rast
html	boolean	şaş	destûrê dide naveroka html di nav tooltip de
jîyan	boolean	şaş	Delegasyona bûyerê li şûna rêvebirên bûyerê yên takekesî bikar bînin
offset	jimare	0	Pîxel veqetandina amûrê ji hêmana armancê
nav	string | karî	'nav'	taybetmendî an rêbazek ji bo wergirtina nivîsa sernavê
dilşad	string | karî	'naveroka daneyê'	taybetmendî an rêbazek ji bo wergirtina nivîsa naverokê
kişok	ben	'livîn'	tooltip çawa tê derxistin - hover | fokus | destî

Methods

$().popover(vebijark)

Ji bo berhevokek hêmanan popoveran dide destpêkirin.

.popover('show')

Elementek popover eşkere dike.

$ ( '#element' ). popover ( 'nîşandan' )

.popover('veşêre')

Hêmanek popover vedişêre.

$ ( '#element' ). popover ( 'veşêre' )

Demo

hover bo popover

Pêveka hişyariyê ji bo zêdekirina fonksiyonên nêzîk li hişyariyan çînek pir piçûk e.

Download

Bikaranîna bootstrap-alerts.js

$ ( ".alert-message" ). hişyar ()

Markup

Tenê data-alerttaybetmendiyek li peyamên hişyariya xwe zêde bikin da ku bixweber fonksiyonên nêzîk bidin wan.

Methods

$().alert()

Hemî hişyariyan bi fonksiyonek nêzîk dipêçe. Ji bo ku hişyariyên we dema girtî werin zindî kirin, pê ewle bin ku ew jixwe .fadeû .inpola li wan hatine sepandin.

.alert('nêzîkî')

Hişyariyek digire.

$ ( ".alert-message" ). hişyar ( 'nêzîkî' )

Demo