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, string	şaş	Hêmanek modal-backdrop tê de ye. "static"Ger hûn naxwazin modal girtî be dema ku paşnav tê klîk kirin, paşnavê bicîh bikin .
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 = "static" > 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. Vebijarkek vebijarkî qebûl objectdike.

$ ( '#my-modal' ). modal ({
  klavye : 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 barbara jorîn a bootstrap an navîgasyonên tabloyê ye.

Download

Bikaranîna bootstrap-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 bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Markup

Ji bo ku bi hêsanî behreya scrollspy li navika 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('nûvekirin')

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ûvekirin' )

Demo

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

Ev pêvek ji bo birêvebirina dewleta bişkojkê fonksiyonek zêde pêşkêşî dike.

Download

Bikaranîna bootstrap-buttons.js

$ ( '.tabs' ). bişkojka ()

Methods

$().button('veguhertin')

Rewşa pushê vedike. Awirek dide btn ku ew çalak bûye.

Nîşedata-toggle Hûn dikarin bi karanîna taybetmendiyê veguheztina otomatîkî ya bişkokekê çalak bikin .

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

$().button('barkirin')

Rewşa bişkojkê ji bo barkirinê destnîşan dike - bişkojka neçalak dike û nivîsê bi nivîsa barkirinê re diguherîne. Divê nivîsa barkirinê li ser hêmana bişkojê bi karanîna taybetmendiya daneyê were destnîşankirin data-loading-text.

<button class = "btn" data-loading-text = "barkirina tiştan..." > ... </button>   

$().button('reset')

Rewşa bişkojkê ji nû ve vedike - nivîsê bi nivîsa orîjînal diguhezîne.

$().button(string)

Rewşa bişkojkê ji nû ve vedike - nivîsê li her rewşa nivîs�� ya diyarkirî diguhezîne.

<button class = "btn" data-complete-text = "qediya!" > ... </button>   
<script>
  $('.btn').button('temam')
</scrip>

Demo

Barkirina Demo Veguhertina Demo

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

Download

Bikaranîna bootstrap-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 id-ya 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> 
</div>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). tabloyên ()
  })
</script>

Events

Bûyer	Terîf
gûherrandinî	Ev bûyer li ser guherîna tabê dişewite. Bi rêzdarî tabloya çalak û tabloya çalak a berê bikar bînin event.targetû bikin armanc.event.relatedTarget

$ ( '#.tabs' ). bind ( 'guhertin' , fonksiyona ( e ) {   
  e . hedef // tabloya çalakkirî
  e . relatedTarget // tabloya berê
})

Demo

• Xane
• Tengal
• Messages
• Settings
• Dropdown
  • @rûn
  • @mdo

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 ku sernavê 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, fonksiyon	'nav'	taybetmendî an rêbazek ji bo wergirtina nivîsa sernavê
kişok	ben	'livîn'	tooltip çawa tê derxistin - hover | fokus | destî
şablon	ben	[nîşana xwerû]	Şablona html-ê ji bo pêşkêşkirina twipsy tê bikar anîn.

Hişyar bikin Vebijarkên nimûneyên twipsy yên takekesî dikarin wekî din bi karanîna taybetmendiyên daneyê ve bêne diyar kirin.

<a href = "#" data-placement = "li jêr" rel = 'twipsy' title = 'Hin nivîsara sernavê' > nivîs </a>    

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)

Mînakek çîna twipsy ya hêmanan 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 bootstrap-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!

Hişyarî Divê hûn pelê bootstrap-twipsy.js berî bootstrap-popover.js vekin.

Download

Bikaranîna bootstrap-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 ku sernavê 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, fonksiyon	'nav'	taybetmendî an rêbazek ji bo wergirtina nivîsa sernavê
dilşad	string, fonksiyon	'naveroka daneyê'	rêzek an rêbazek ji bo wergirtina nivîsa naverokê. heke yek neyê peyda kirin, naverok dê ji taybetmendiyek dane-naveroka çavkaniyê were girtin.
kişok	ben	'livîn'	tooltip çawa tê derxistin - hover | fokus | destî
şablon	ben	[nîşana xwerû]	Şablona html-ê ji bo pêşkêşkirina popoverek tê bikar anîn.

Hişyar bikin Vebijarkên mînaka popover-ê ya takekesî dikare wekî alternatîf bi karanîna taybetmendiyên daneyê ve were destnîşankirin.

<a data-placement = "below" href = "#" class = "btn xeter" rel = "popover" > nivîs </a>    

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.

Vebijêrk

Nav	awa	destçûnî	terîf
hilbijêr	ben	'.nêzîkî'	Çi hilbijêr ji bo girtina hişyariyek armanc dike.

Methods

$().alert()

Hemî hişyariyan bi fonksiyonek nêzîk dipêçe. Ji bo ku gava girtî hişyariyên we zindî bibin, 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