Javascript ji bo Bootstrap

Bi 12 pêvekên xwerû yên jQuery re, hêmanên Bootstrap-ê bidin jiyîn.

Modals

Pêvekek rêkûpêk, lê maqûl, pêveka modal a kevneşopî ya javascript-ê bi tenê fonksiyona hindiktirîn hewce û pêşnumayên hişmend digire.

Dropdowns

Bi vê pêveka sade menuyên dakêşanê li Bootstrap-ê hema hema li her tiştî zêde bikin. Bootstrap di navbar, tablo û heban de piştgirîya menuya dakêşanê ya tevahî vedigire.

Scrollspy

Scrollspy bikar bînin da ku zencîreyên di navbara xwe de bixweber nûve bikin da ku lînka çalak a heyî li ser bingeha pozîsyona gerokê nîşan bidin.

Tabloyên veguhêzbar

Vê pêvekê bikar bînin da ku tablo û hebên bikêrtir bikin û bihêlin ku ew bi navgîniya tabloyên naveroka herêmî veguhezînin.

Tooltips

Veguheztinek nû li ser pêveka jQuery Tipsy, Tooltips pişta xwe bi wêneyan nagirin - ew CSS3 ji bo anîmasyon û taybetmendiyên daneyê ji bo hilanîna sernavê herêmî bikar tînin.

Popovers *

Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, naverokên piçûk zêde bikin.

* Pêdivî ye ku Serişteyên Amûran werin nav kirin

Mesajên hişyar

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

Buttons

Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an jî ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.

Jiberhevketin

Ji bo pêkhateyên hilweşandî yên mîna akordeyon û navîgasyon şêwazên bingehîn û piştgirîya maqûl bistînin.

Carousel

Ji her naverokek ku hûn dixwazin slideshowek înteraktîf a naverokê peyda bikin, biafirînin.

Typeahead

Pêvekek bingehîn, bi hêsanî dirêjkirî ji bo afirandina zû tîpên spehî yên bi her têketina nivîsê.

Veguhertin *

Ji bo bandorên veguheztinê yên hêsan, carek bootstrap-transition.js têxin nav modalan an jî hişyariyan biqelînin.

* Ji bo anîmasyonê di pêvekan de pêdivî ye

Serê xwe! Hemî pêvekên javascript guhertoya herî dawî ya jQuery hewce dike.

Der barê modalan de

Pêvekek rêkûpêk, lê maqûl, pêveka modal a kevneşopî ya javascript-ê bi tenê fonksiyona hindiktirîn hewce û pêşnumayên hişmend digire.

Pelê dakêşin

Mînaka statîk

Li jêr modalek statîkî hatî çêkirin heye.

Demo zindî

Bi tikandina bişkoka li jêr modalek bi javascriptê vebikin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

Modala demo dest pê bikin

Bikaranîna bootstrap-modal

Bi javascriptê ve modalê telefon bikin:

  1. $ ( '#myModal' ). modal ( vebijark )

Vebijêrk

Nav awa destçûnî terîf
paşperdeya boolean rast Hêmanek modal-backdrop tê de ye. Wekî din, staticji bo paşnavek ku modalê li ser klîk negire diyar bikin.
kilawye boolean rast Dema ku bişkojka revê tê pêlkirin modalê digire
rêdan boolean rast Dema ku tê destpêkirin modalê nîşan dide.

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ê li data-toggle="modal"ser hêmanek kontrolkerek bi data-target="#foo"an href="#foo"ku bi nasnameya elementek modal re têkildar e saz bikin, û gava ku were klîk kirin, ew ê modala we bide destpêkirin.

Di heman demê de, ji bo ku vebijarkan li mînaka xweya modal zêde bikin, tenê wan wekî taybetmendiyên daneya zêde li ser hêmana kontrolê an jî nîşana modal bixwe têxin nav xwe.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Destpêkirina Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Sernivîsa modal </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Bedenek xweş… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Girtin </a>
  11. <a href = "#" class = "btn btn-primary" > Guhertin tomar bike </a>
  12. </div>
  13. </div>
Serê xwe! Heke hûn dixwazin modala we li hundur û derveyî anîmasyon bibe, tenê .fadeçînek li .modalhêmanê zêde bikin (ji bo dîtina vê di çalakiyê de li demoyê binihêrin) û bootstrap-transition.js têxin nav xwe.

Methods

.modal(vebijark)

Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl objectdike.

  1. $ ( '#myModal' ). modal ({
  2. klavye : derewîn
  3. })

.modal('veguhertin')

Modalek bi destan diguhezîne.

  1. $ ( '#myModal' ). modal ( 'veguhertin' )

.modal('nîşan bide')

Bi destan modalek vedike.

  1. $ ( '#myModal' ). modal ( 'nîşandan' )

.modal('veşêre')

Bi destan modalek vedişêre.

  1. $ ( '#myModal' ). modal ( 'veşêre' )

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).
  1. $ ( '#myModal' ). on ( 'veşartî' , fonksiyona () {
  2. // tiştekî bike…
  3. })

Pêveka ScrollSpy ji bo nûvekirina bixweber armancên nav li ser bingeha pozîsyona gerokê ye.

Pelê dakêşin

Mînak navbar bi scrollspy

Li qada jêrîn bigerin û nûvekirina navîgasyonê temaşe bikin. Dê jêr-tiştên daketî jî werin ronî kirin. Try it!

@rûn

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ber wan qui firotin. Tumblr farm-to-table mafên bisîkletan çi be. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui we belkî li ser wan nebihîstiye û fona pêbaweriya cardigan culpa biodiesel wes anderson estetîk. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork rih. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat çar loko nisi, ea helvetica nulla carles. Kamyona xwarinê ya cosby ya tattookirî, vinyl quis non freegan ya mcsweeney. Lo-fi wes anderson +1 sartorial. Karlês ne estetîk quis gentrify. Brooklyn adipisicing craft beer cîgirê keytar deserunt.

yek

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo mafên bisîkletan adipisicing banh mi, velit ea sunt asta next locavore yek-eslê qehwe li magna veniam. Vînyl id jiyana bilind, echo park consequat quis aliquip banh mi pitchfork. Vero VHS edipisicing. Consectetur nisi DIY minim qasid bag. Cred ex in, domdar delectus consectetur fanny pack iphone.

du

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa her tiştê ku kamyonek xwarinê delectus. Sapiente synth id assumenda. Locavore sed helvetica klîşeya îroniya, birûskên ku we belkî li ser wan nebihîstiye bi hoodie-free gluten lo-fi fap aliquip. Beriya ku wan bifroşin, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan amade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.


Bikaranîna bootstrap-scrollspy.js

Bi javascriptê bangî scrollspy bikin:

  1. $ ( '#navbar' ). scrollspy ()

Markup

Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-spy="scroll"bikin, tenê hêmana ku hûn dixwazin li ser sîxuriyê bikin zêde bikin (bi gelemperî ev dê laş be).

  1. <body data-spy = "scroll" > ... </body>
Serê xwe! Pêdivî ye ku girêdanên navbar xwedî armancên nasnameyê yên çareserkirî bin. Ji bo nimûne, <a href="#home">home</a>divê bi tiştekî di dom wek <div id="home"></div>.

Methods

.scrollspy('tezekirin')

Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:

  1. $ ( '[data-spy="scroll"]' ). her ( fonksîyon () {
  2. var $spy = $ ( ev ). scrollspy ( 'tezekirin' )
  3. });

Vebijêrk

Nav awa destçûnî terîf
offset jimare 10 Pixelên ku ji jor ve têne veqetandin dema ku pozîsyona gerokê hesab dikin.

Events

Bûyer Terîf
çalak bike Dema ku babetek nû ji hêla scrollspy ve tê çalak kirin ev bûyer dişewite.

Ev pêvek ji bo veguheztina naverokê ya herêmî fonksiyonên tablo û hebên bilez, dînamîkî zêde dike.

Pelê dakêşin

Tabloyên nimûne

Li ser tabloyên jêrîn bikirtînin da ku di navbera pencereyên veşartî de, tewra bi navgîniya pêşekên dakêşanê veguhezînin.

Denim raw belkî we nebihîstiye ji wan jean shorts Austin. Nesciunt tofu stumptown aliqua, paqijkirina masterê synth retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip cîhê salvia cillum iphone. Seitan aliquip quis cardigan kincên amerîkî, qesab voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Bikaranîna bootstrap-tab.js

Bi javascriptê tabloyên tabloyê çalak bikin (pêdivî ye ku her tablo bi rengek kesane were çalak kirin):

  1. $ ( '#myTab a' ). bitikîne ( fonksiyona ( e ) {
  2. e . preventDefault ();
  3. $ ( ev ). tab ( 'nîşan bide' );
  4. })

Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'nîşan bide' ); // Bi navê tabê hilbijêre
  2. $ ( '#myTab a:first' ). tab ( 'nîşan bide' ); // Tabloya yekem hilbijêrin
  3. $ ( '#myTab a:last' ). tab ( 'nîşan bide' ); // Tabloya paşîn hilbijêrin
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'nîşan bide' ); // Tabloya sêyemîn hilbijêrin (0-indekskirî)

Markup

Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina javascriptê bi tenê diyar kirin data-toggle="tab"an data-toggle="pill"li ser hêmanek çalak bikin. Zêdekirina navû nav-tabsçînan li tabê uldê şêwaza tabloya bootstrap bicîh bîne.

  1. <ul class = "nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Mal </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profîl </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Peyam </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Mîhengan </a></li>
  6. </ul>

Methods

$().tab

Elementek tabê û konteynir naverokê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "çalak" ><a href = "#home" > Mal </a></li>
  3. <li><a href = "#profile" > Profîl </a></li>
  4. <li><a href = "#messages" > Peyam </a></li>
  5. <li><a href = "#settings" > Mîhengan </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-naveroka" >
  9. <div class = "tab-pane çalak" id = "mal" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( function () {
  17. $ ( '#myTab a:last' ). tab ( 'nîşan bide' );
  18. })
  19. </script>

Events

Bûyer Terîf
rêdan Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
nîşan dan Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). li ser ( 'nîşandan' , fonksiyona ( e ) {
  2. e . hedef // tabloya çalakkirî
  3. e . relatedTarget // tabloya berê
  4. })

Der barê Tooltips

Ji pêveka hêja ya jQuery.tipsy ku ji hêla Jason Frame ve hatî nivîsandin ve hatî îlhama kirin; Tooltips guhertoyek nûvekirî ye, ku xwe dispêre wêneyan, css3 ji bo anîmasyon, û taybetmendiyên daneyan ji bo hilanîna sernavên herêmî bikar tîne.

Pelê dakêşin

Mînak bikaranîna Tooltips

Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:

Pantorên teng ên asta din keffiyeh dibe ku we ji wan nebihîstiye. Bûka wêneyan rîh denim raw letterpress vegan qasid bag stumptown. Cil û bergên Amerîkî yên 8-bit quinoa domdar a mcsweeney ji çandiniyê-to-maseyê, xwedan şamek vinyl a terry richardson e. Stûpê rîh, kardigan banh mi lomo birûskên. Tofu biodiesel williamsburg marfa, çar loko mcsweeney's chambray vegan paqij dike. A artisan bi rastî îronîk çi keytar , dîmendera farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Bikaranîna bootstrap-tooltip.js

Bi javascriptê şîreta amûrê bişopînin:

  1. $ ( '#mînak' ). tooltip ( vebijark )

Vebijêrk

Nav awa destçûnî terîf
jayandarî boolean rast veguherînek fade ya css-ê li ser tooltip bicîh bikin
danîn string|fonksî 'lûtik' meriv çawa şîreta amûrê bi cih dike - top | binê | çep | rast
hilbijêr ben şaş Ger hilbijarkek were peyda kirin, dê tiştên şîreta amûrê ji armancên diyarkirî re werin şandin.
nav string | karî '' nirxa sernavê ya xwerû eger etîketa `sernav` tune be
kişok ben 'livîn' tooltip çawa tê derxistin - hover | fokus | destî
derengxistin hejmar | tişt 0

dereng nîşankirin û veşartina şîreta amûrê (ms) - ji bo celebê destavêtina destan derbas nabe

Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin

Struktura objektê ev e:delay: { show: 500, hide: 100 }

Serê xwe! Vebijarkên ji bo serişteyên amûran ên takekesî dikarin wekî din bi karanîna taybetmendiyên daneyê bêne diyar kirin.

Markup

Ji ber sedemên performansê, Tooltip û Popover data-apis têne hilbijartin. Heke hûn dixwazin wan bikar bînin tenê vebijarkek hilbijêr diyar bikin.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > li ser min bihêle </a>

Methods

$().tooltip(vebijark)

Pêşkêşkarek amûrek bi berhevokek elementê ve girêdide.

.tooltip('nîşan bide')

Tîpa amûrek hêmanek eşkere dike.

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

.tooltip('veşêre')

Tîpa amûrekê vedişêre.

  1. $ ( '#element' ). tooltip ( 'veşêre' )

.tooltip('veguhertin')

Destûra amûrek hêmanek vedike.

  1. $ ( '#element' ). tooltip ( 'veguhertin' )

Der barê popovers

Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, naverokên piçûk zêde bikin.

* Pêdivî ye ku Tooltip were nav kirin

Pelê dakêşin

Mînak hover popover

Li ser bişkokê bizivirin da ku popoverê vekin.


Bikaranîna bootstrap-popover.js

Bi javascript popovers çalak bikin:

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

Vebijêrk

Nav awa destçûnî terîf
jayandarî boolean rast veguherînek fade ya css-ê li ser tooltip bicîh bikin
danîn string|fonksî 'rast' meriv çawa popoverê bi cih dike - top | binê | çep | rast
hilbijêr ben şaş heke hilbijarkek were peyda kirin, dê tiştên şîreta amûrê ji armancên diyarkirî re werin veguheztin
kişok ben 'livîn' tooltip çawa tê derxistin - hover | fokus | destî
nav string | karî '' nirxa sernavê ya xwerû eger taybetmendiya `sernav` tune be
dilşad string | karî '' nirxa naverokê ya xwerû eger taybetmendiya `data-naveroka` tune be
derengxistin hejmar | tişt 0

dereng nîşankirin û veşartina popoverê (ms) - ji bo celebê destkêşana destan nayê sepandin

Ger jimarek were peyda kirin, dereng hem ji bo veşêrin/nîşandanê tê sepandin

Struktura objektê ev e:delay: { show: 500, hide: 100 }

Serê xwe! Vebijarkên ji bo popoverên takekesî dikarin wekî din bi karanîna taybetmendiyên daneyê ve bêne diyar kirin.

Markup

Ji ber sedemên performansê, Tooltip û Popover data-apis têne hilbijartin. Heke hûn dixwazin wan bikar bînin tenê vebijarkek hilbijêr diyar bikin.

Methods

$().popover(vebijark)

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

.popover('show')

Elementek popover eşkere dike.

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

.popover('veşêre')

Hêmanek popover vedişêre.

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

.popover('toggle')

Hêmanek popover vedike.

  1. $ ( '#element' ). popover ( 'veguhertin' )

Der barê alerts

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

Download

Mînak alerts

Pêveka hişyariyê li ser peyamên hişyariya birêkûpêk dixebite, û peyaman asteng dike.

Guacamole pîroz! Baştirîn xwe kontrol bikin, hûn pir baş xuya nakin.

Oh snap! Te xeletiyek girt!

Vê û wê biguherînin û dîsa biceribînin. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Vê çalakiyê bikin An jî vê bikin


Bikaranîna bootstrap-alert.js

Betalkirina hişyariyek bi javascript çalak bike:

  1. $ ( ".alert" ). hişyar ()

Markup

Tenê data-dismiss="alert"li bişkoka xweya nêzîk zêde bikin da ku bixweber fonksiyonek girtina hişyariyê bidin.

  1. <a class = "close" data-dismiss = "hişyar" href = "#" > × </a>

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.

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

Events

Dersa hişyariyê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hişyariyê eşkere dike.

Bûyer Terîf
nêzîkî closeDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
girtî Dema ku hişyar hat girtin ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên css bimîne).
  1. $ ( '#my-alert' ). bind ( 'girtî' , fonksiyona () {
  2. // tiştekî bike…
  3. })

Ji dor

Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an jî ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.

Pelê dakêşin

Nimûne bikar tîne

Pêveka bişkokan ji bo dewlet û guheztinê bikar bînin.

Dewletî
Veguheztina yekane
Checkbox
Radyo

Bikaranîna bootstrap-button.js

Bişkokên bi Javascript çalak bikin:

  1. $ ( '.nav-tabs' ). bişkojka ()

Markup

Taybetmendiyên daneyê ji pêveka bişkojê re yekpare ne. Ji bo cûrbecûr celebên nîşankirinê koda nimûneya jêrîn binihêrin.

  1. <!-- Data-toggle="button" lê zêde bike da ku guheztina li ser bişkokek yekane çalak bike -->
  2. <button class = "btn" data-toggle = "button" > Veguheztina Yekane </button>
  3.  
  4. <!-- Data-toggle="buttons-checkbox" lê zêde bike ji bo guheztina şêwaza qutiyê li ser btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Çep </button>
  7. <button class = "btn" > Navîn </button>
  8. <button class = "btn" > Rast </button>
  9. </div>
  10.  
  11. <!-- Data-toggle="buttons-radio" lê zêde bike ji bo guheztina şêwaza radyoyê li ser btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Çep </button>
  14. <button class = "btn" > Navîn </button>
  15. <button class = "btn" > Rast </button>
  16. </div>

Methods

$().button('veguhertin')

Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye.

Serê xwe! data-toggleHûn dikarin bi karanîna taybetmendiyê veguheztina otomatîkî ya bişkokek çalak bikin .
  1. <button class = "btn" data-toggle = "button" > </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.

  1. <button class = "btn" data-loading-text = "barkirina tiştan..." > ... </button>
Serê xwe! Firefox di nav barkirina rûpelan de rewşa neçalak didomîne . Rêbazek ji bo vê yekê karanîna autocomplete="off"ye.

$().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.

  1. <button class = "btn" data-complete-text = "qediya!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). bişkojka ( 'temam' )
  4. </script>

Ji dor

Ji bo pêkhateyên hilweşandî yên mîna akordeyon û navîgasyon şêwazên bingehîn û piştgirîya maqûl bistînin.

Pelê dakêşin

* Pêdivî ye ku pêveka Transitions were nav kirin.

Mînak accordion

Bi karanîna pêveka hilweşandinê, me widgetek şêwaza akordonê ya hêsan çêkir:

Anim paratur klîşeya reprehenderit, enim eiusmod jiyana bilind accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyona xwarinê quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua teyrek danî ser wê squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur butcher cîgirê lomo. Leggings occaecat craft beer farm-to-sef, denim raw estetîk synth nesciunt we belkî li ser wan nebihîstiye accusamus labore domdar VHS.
Anim paratur klîşeya reprehenderit, enim eiusmod jiyana bilind accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyona xwarinê quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua teyrek danî ser wê squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur butcher cîgirê lomo. Leggings occaecat craft beer farm-to-sef, denim raw estetîk synth nesciunt we belkî li ser wan nebihîstiye accusamus labore domdar VHS.
Anim paratur klîşeya reprehenderit, enim eiusmod jiyana bilind accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyona xwarinê quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua teyrek danî ser wê squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur butcher cîgirê lomo. Leggings occaecat craft beer farm-to-sef, denim raw estetîk synth nesciunt we belkî li ser wan nebihîstiye accusamus labore domdar VHS.

Bikaranîna bootstrap-collapse.js

Bi javascript çalak bike:

  1. $ ( ".collapse" ). hilweşîn ()

Vebijêrk

Nav awa destçûnî terîf
dê û bav hilbijêr şaş Ger hilbijêr wê hingê hemî hêmanên dakêşan ên di binê dêûbavê diyarkirî de dê werin girtin dema ku ev tişta hilavêtinê were xuyang kirin. (wek behreya akordionê ya kevneşopî)
toggle boolean rast Hêmana hilavêtinê ya li ser bangkirinê vedike

Markup

Tenê data-toggle="collapse"û data-targethêmanek lê zêde bikin da ku bixweber kontrola hêmanek hilweşandî destnîşan bikin. Taybetmendî data-targethilbijêrek css-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapseli hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. sade hilweşîner
  3. </button>
  4.  
  5. <div id = "demo" class = "hilweşîn" > </div>
Serê xwe! Ji bo ku rêveberiya komê ya mîna akordeyonê li kontrolek dagirtî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector". Ji bo dîtina vê di çalakiyê de, serî li demo bidin.

Methods

.collapse(vebijark)

Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

  1. $ ( '#myCollapsible' ). hilweşîn ({
  2. guheztin : derewîn
  3. })

.collapse('veguhertin')

Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire.

.collapse('nîşan bide')

Elementeke davekirî nîşan dide.

.collapse('veşêre')

Hêmanek hilweşandî vedişêre.

Events

Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê 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 hêmanek hilweşandî ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên css temam bibin).
veşartin hideDema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin .
veşartî Ev bûyer dema ku hêmanek hilweşandî ji bikarhêner ve hatî veşartin tê şewitandin (dê li bendê bimîne ku veguheztinên css biqede).
  1. $ ( '#myCollapsible' ). on ( 'veşartî' , fonksiyona () {
  2. // tiştekî bike…
  3. })

Ji dor

Pêvekek bingehîn, bi hêsanî dirêjkirî ji bo afirandina zû tîpên spehî yên bi her têketina nivîsê.

Pelê dakêşin

Mînak

Di qada jêrîn de dest bi nivîsandinê bikin da ku encamên tîpa pêşîn nîşan bidin.


Bikaranîna bootstrap-typeahead.js

Bi rêya javascriptê bangî tîpan bikin:

  1. $ ( '.typeahead' ). tîpa pêş ()

Vebijêrk

Nav awa destçûnî terîf
kanî rêzî [ ] Çavkaniya daneyê ya ku li dijî lêpirsînê ye.
tiştên jimare 8 Hejmara herî zêde ya hêmanan ku di peldankê de têne xuyang kirin.
matcher karî doza bêhesas Rêbaza ku tê bikar anîn da ku diyar bike ka pirsek bi babetekê re têkildar e. Argumanek yekane qebûl dike, ku itemli hember ceribandina pirsê ye. Gihîştina pirsa heyî bi this.query. trueGer pirs lihevhatinek e , booleanek vegerîne .
sorter karî tam lihevhatin,
bi halê hesas,
nehesasiya dozê
Rêbaza ku ji bo birêkûpêkkirina encamên xweser tê bikar anîn. Argumanek yekane qebûl dike itemsû xwedan çarçoveya nimûneya tîpa pêşîn e. Lêgerîna heyî bi this.query.
highlighter karî hemî maçên xwerû ronî dike Rêbaza ku ji bo ronîkirina encamên temamkirina otomatîkî tê bikar anîn. Argumanek yekane qebûl dike itemû xwedan çarçoveya nimûneya tîpa pêşîn e. Divê html vegere.

Markup

Taybetmendiyên daneyê lê zêde bikin da ku hêmanek bi fonksiyona tîpa pêşîn tomar bikin.

  1. <input type = "text" data- provide = "typeahead" >

Methods

.typeahead(vebijark)

Inputek bi tîpek pêşîn dest pê dike.