Javascript rau Bootstrap

Nqa Bootstrap cov khoom rau lub neej-tam sim no nrog 12 kev cai jQuery plugins.

Cov qauv

Ib tug streamlined, tab sis saj zawg zog, coj nyob rau hauv ib txwm javascript modal plugin nrog tsuas yog qhov tsawg kawg nkaus yuav tsum functionality thiab ntse defaults.

Dropdowns

Ntxiv dropdown menus rau yuav luag txhua yam hauv Bootstrap nrog qhov yooj yim plugin no. Bootstrap nta tag nrho dropdown zaub mov txhawb nyob rau hauv lub navbar, tabs, thiab tshuaj.

Scrollspy

Siv scrollspy los hloov kho cov kev txuas hauv koj lub navbar los qhia qhov txuas tam sim no raws li txoj haujlwm scroll.

Togglable tabs

Siv cov plugin no los ua cov tabs thiab cov ntsiav tshuaj muaj txiaj ntsig zoo los ntawm kev tso cai rau lawv hloov mus los ntawm cov kab ntawv tabbable ntawm cov ntsiab lus hauv zos.

Cov lus qhia

Ib qho tshiab coj los ntawm jQuery Tipsy plugin, Tooltips tsis cia siab rau cov duab-lawv siv CSS3 rau cov animations thiab cov ntaub ntawv-tus cwj pwm rau cov npe hauv zos.

Popovers *

Ntxiv me me ntawm cov ntsiab lus, zoo li cov hauv iPad, rau txhua lub hauv paus rau cov ntaub ntawv thib ob hauv tsev.

* Yuav tsum muaj cov lus qhia kom suav nrog

Cov lus ceeb toom

Lub ceeb toom plugin yog chav kawm me me ntxiv rau kev ua haujlwm ze rau kev ceeb toom.

Khawm

Ua ntau nrog cov nyees khawm. Tswj khawm hais los yog tsim pab pawg ntawm cov nyees khawm rau ntau yam xws li toolbars.

Kaw

Tau txais cov qauv tsim thiab hloov pauv hloov pauv rau cov khoom sib tsoo zoo li accordions thiab navigation.

Carousel

Tsim kom muaj kev lom zem-mus-ncig ntawm cov ntsiab lus koj xav muab kev sib tham sib slideshow ntawm cov ntsiab lus.

Typeahead

Ib qho yooj yim, yooj yim txuas ntxiv plugin rau sai sai tsim elegant typeaheads nrog rau cov ntawv sau ntawv nkag.

Kev hloov pauv *

Rau kev hloov pauv yooj yim, suav nrog bootstrap-transition.js ib zaug kom xaub hauv cov qauv lossis ploj tawm cov lus ceeb toom.

* Yuav tsum muaj rau cov animation hauv plugins

Tau taub hau! Txhua javascript plugins xav tau qhov tseeb version ntawm jQuery.

Hais txog modals

Ib tug streamlined, tab sis saj zawg zog, coj nyob rau hauv ib txwm javascript modal plugin nrog tsuas yog qhov tsawg kawg nkaus yuav tsum functionality thiab ntse defaults.

Download tau ntaub ntawv

Piv txwv li

Hauv qab no yog statically rendered modal.

Nyob demo

Toggle ib modal ntawm javascript los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.

Tua tawm demo modal

Siv bootstrap-modal

Hu rau modal ntawm javascript:

  1. $ ( '#myModal' ). modal ( kev xaiv )

Kev xaiv

Lub npe hom ua ntej piav qhia
keeb kwm yav dhau boolean muaj tseeb Xws li ib qho modal-backdrop element. Xwb, qhia meej staticrau ib qho backdrop uas tsis kaw lub modal ntawm nias.
keyboard boolean muaj tseeb Kaw lub modal thaum khiav qhov tseem ceeb yog nias
ua yeeb yam boolean muaj tseeb Qhia cov modal thaum pib.

Markup

Koj tuaj yeem qhib modals ntawm koj nplooj ntawv yooj yim yam tsis tas yuav sau ib kab ntawm javascript. Tsuas yog teem caij data-toggle="modal"rau tus maub los lub caij nrog ib data-target="#foo"lossis href="#foo"uas sib haum mus rau ib qho qauv id, thiab thaum nias, nws yuav tso koj cov modal.

Tsis tas li, txhawm rau ntxiv cov kev xaiv rau koj qhov piv txwv modal, tsuas yog suav nrog lawv ua cov ntaub ntawv ntxiv rau ntawm tus tswj lub caij lossis modal markup nws tus kheej.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Launch Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "kaw" data-dismiss = "modal" > × </button>
  4. <h3> Modal header </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ib lub cev zoo… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href="#" class="btn" data-dismiss = "modal"> Kaw </a> _ _ _ _ _
  11. <a href="#" class="btn btn-primary"> Txuag hloov pauv </a> _ _
  12. </div>
  13. </div>
Tau taub hau! Yog tias koj xav kom koj tus qauv ua kom muaj zog hauv thiab tawm, tsuas yog ntxiv cov .fadechav kawm rau lub .modalcaij (saib rau qhov demo kom pom qhov no hauv kev nqis tes ua) thiab suav nrog bootstrap-transition.js.

Cov txheej txheem

.modal(options)

Activates koj cov ntsiab lus raws li ib tug modal. Txais ib qho kev xaiv xaiv object.

  1. $ ( '#myModal' ). modal ({
  2. keyboard : cuav
  3. })

.modal('toggle')

Manually toggles ib modal.

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

.modal('qhia')

Manually qhib lub modal.

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

.modal('hide')

Manually hides ib modal.

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

Cov xwm txheej

Bootstrap's modal class exposes ob peb txheej xwm rau hooking rau hauv modal functionality.

Kev tshwm sim Kev piav qhia
ua yeeb yam Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
qhia Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tau ua kom pom rau tus neeg siv (yuav tos rau css kev hloov pauv kom tiav).
zais Qhov xwm txheej no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua piv txwv txoj kev.
zais cia Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub modal tiav lawm muab zais los ntawm tus neeg siv (yuav tos rau css hloov mus ua kom tiav).
  1. $ ( '#myModal' ). ntawm ( 'hidden' , function () {
  2. // ua ib yam dab tsi…
  3. })

Lub ScrollSpy plugin yog rau kev hloov kho nav lub hom phiaj raws li txoj haujlwm scroll.

Download tau ntaub ntawv

Piv txwv navbar nrog scrollspy

Scroll thaj chaw hauv qab no thiab saib qhov hloov tshiab navigation. Lub dropdown sub khoom yuav tsum highlighted thiab. Sim nws!

@fat

Ad leggings keytar, brunch id art party dolor laboure. Pitchfork yr enim lo-fi ua ntej lawv muag tawm qui. Tumblr ua liaj ua teb-rau- rooj tsheb kauj vab txoj cai txawm li cas los xij. Ntxim hlub cardigan. Velit seitan mcsweeney's photo booth 3 hma hli irure. Cosby sweater lomo jean luv, williamsburg hoodie minim qui koj tej zaum tsis tau hnov ​​​​txog lawv thiab cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork hwj txwv. Freegan hwj txwv aliqua cupidatat mcsweeney's vero. Cupidatat plaub loko nisi, ea helvetica nulla carles. Tattooed cosby sweater zaub mov tsheb, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles tsis zoo nkauj exercitation quis gentrify. Brooklyn adipisicing khoom siv tes ua npias vice keytar deserunt.

ib

Occaecat commodo aliqua delectus. Fap craft npias deserunt skateboard ea. Lomo tsheb kauj vab txoj cai adipisicing banh mi, velit ea sunt qib tom ntej locavore ib leeg-hauv paus kas fes hauv magna veniam. High life id vinyl, ncho park consequat quis aliquip banh mi pitchfork. Vero VHS yog adipisicing. Consectetur nisi DIY minim tub txib hnab. Cred ex nyob rau hauv, sustainable delectus consectetur fanny pob iphone.

ob

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 xijpeem delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats tej zaum koj tsis tau hnov ​​​​txog lawv ua rau hoodie gluten-dawb lo-fi fap aliquip. Labore elit placeat ua ntej lawv muag tawm, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft npias seitan readymade velit. VHS Chambray Laboris Tempor Veniam. Anim mollit minim commodo ullamco thundercats.


Siv bootstrap-scrollspy.js

Hu rau scrollspy ntawm javascript:

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

Markup

Txhawm rau yooj yim ntxiv tus cwj pwm scrollspy rau koj qhov topbar navigation, tsuas yog ntxiv data-spy="scroll"rau lub caij koj xav soj ntsuam (feem ntau qhov no yuav yog lub cev).

  1. <body data-spy = "scroll" > ... </body>
Tau taub hau! Navbar txuas yuav tsum muaj lub hom phiaj id daws tau. Piv txwv li, ib tug <a href="#home">home</a>yuav tsum sib haum mus rau ib yam dab tsi nyob rau hauv lub dom zoo li <div id="home"></div>.

Cov txheej txheem

.scrollspy('refresh')

Thaum siv scrollspy ua ke nrog kev ntxiv lossis tshem tawm cov ntsiab lus los ntawm DOM, koj yuav tsum hu rau txoj kev hloov tshiab zoo li:

  1. $ ( '[data-spy="scroll"]' ). txhua ( function () {
  2. var $spy = $ ( this ). scrollspy ( 'tshiab' )
  3. });

Kev xaiv

Lub npe hom ua ntej piav qhia
offset tus lej 10 Pixels rau offset los ntawm sab saum toj thaum xam txoj hauj lwm ntawm scroll.

Cov xwm txheej

Kev tshwm sim Kev piav qhia
qhib Qhov xwm txheej no tua hluav taws thaum twg ib yam khoom tshiab tau qhib los ntawm scrollspy.

Cov plugin no ntxiv ceev, dynamic tab thiab ntsiav tshuaj ua haujlwm rau kev hloov pauv los ntawm cov ntsiab lus hauv zos.

Download tau ntaub ntawv

Piv txwv tabs

Nyem cov tabs hauv qab no kom toggle ntawm cov panes zais, txawm tias los ntawm cov ntawv qhia zaub mov.

Raw denim tej zaum koj tsis tau hnov ​​​​txog lawv cov ris tsho luv Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit neeg tua tsiaj retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, neeg tua tsiaj 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.


Siv bootstrap-tab.js

Qhib tabbable tabs ntawm javascript (txhua tab yuav tsum tau qhib ib tus zuj zus):

  1. $ ( '#myTab a' ). nyem ( function ( e ) {
  2. e . PreventDefault ();
  3. $ ( qhov no ). tab ( 'show' );
  4. })

Koj tuaj yeem qhib ib tus neeg tab hauv ntau txoj hauv kev:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Xaiv tab los ntawm lub npe
  2. $ ( '#myTab a: ua ntej' ). tab ( 'show' ); // Xaiv thawj tab
  3. $ ( '#myTab a:last' ). tab ( 'show' ); // Xaiv lub tab kawg
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Xaiv thib peb tab (0-indexed)

Markup

Koj tuaj yeem qhib lub tab lossis ntsiav tshuaj navigation yam tsis tau sau ib qho javascript los ntawm kev qhia yooj yim data-toggle="tab"lossis data-toggle="pill"ntawm lub ntsiab lus. Ntxiv cov navthiab nav-tabscov chav kawm rau lub tab ulyuav siv lub bootstrap tab styling.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab"> Tsev </a></li >
  3. <li><a href = "#profile" data-toggle = "tab"> Profile </a></li >
  4. <li><a href = "#messages" data-toggle = "tab"> Messages </a></li >
  5. <li><a href = "#settings" data-toggle = "tab"> Settings </a></li >
  6. </ul>

Cov txheej txheem

$().tab

Activates lub tab element thiab cov ntsiab lus ntim. Tab yuav tsum muaj ib data-targetlossis ib lub hrefhom phiaj rau lub thawv ntim hauv DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home"> Tsev </a></li >
  3. <li><a href = "#profile"> Profile </a> </li>
  4. <li><a href = "#messages"> Messages </a> </li>
  5. <li><a href = "#settings" > Settings </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </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 ( 'show' );
  18. })
  19. </script>

Cov xwm txheej

Kev tshwm sim Kev piav qhia
ua yeeb yam Qhov kev tshwm sim no tua hluav taws ntawm tab qhia, tab sis ua ntej tab tshiab tau tshwm sim. Siv event.targetthiab event.relatedTargettsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
qhia Qhov kev tshwm sim no tua hluav taws ntawm tab qhia tom qab tau pom tab. Siv event.targetthiab event.relatedTargettsom rau lub tab active thiab yav dhau los active tab (yog tias muaj) feem.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'qhia' , function ( e ) {
  2. e . phiaj // activated tab
  3. e . RelatedTarget // yav dhau los tab
  4. })

Hais txog Tooltips

Kev tshoov siab los ntawm qhov zoo tshaj plaws jQuery.tipsy plugin sau los ntawm Jason Frame; Cov lus qhia yog qhov hloov kho tshiab, uas tsis tso siab rau cov duab, siv css3 rau cov duab, thiab cov ntaub ntawv-tus cwj pwm rau cov npe hauv zos.

Download tau ntaub ntawv

Piv txwv li siv Tooltips

Hover tshaj qhov txuas hauv qab no kom pom cov lus qhia:

Tight ris tom ntej no keffiyeh tej zaum koj yuav tsis tau hnov ​​txog lawv. Diam duab lub rooj muag zaub beard raw denim letterpress vegan tub txib hnab stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-ntsis american apparel muaj terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, plaub loko mcsweeney's cleanse vegan chambray. Ib tus kws txawj ntse tiag tiag txawm li cas los xij keytar , scenester ua liaj ua teb-rau- rooj banksy Austin twitter tuav freegan cred nyoos denim ib leeg-hauv paus kas fes kis.


Siv bootstrap-tooltip.js

Tig lub tooltip ntawm javascript:

  1. $ ( '#example' ). tooltip ( Options )

Kev xaiv

Lub npe hom ua ntej piav qhia
animation boolean muaj tseeb siv css ploj mus rau cov lus qhia
tso chaw txoj hlua | ua haujlwm 'sab saum toj' yuav ua li cas rau position lub tooltip - sab saum toj | hauv qab | sab laug | txoj cai
xaiv txoj hlua cuav Yog hais tias muaj ib tug selector, tooltip cov khoom yuav raug delegated rau lub hom phiaj teev.
lub npe hlua | muaj nuj nqi '' default title value yog 'title' tag tsis nyob
ua rau txoj hlua 'hover' yuav ua li cas tooltip yog triggered - hover | tsom | phau ntawv
ncua tus lej | khoom 0

ncua kev qhia thiab zais cov lus qhia (ms) - tsis siv rau phau ntawv txhais hom

Yog tias muaj tus lej nkag, ncua sijhawm yog siv rau ob qho tib si zais / qhia

Object structure yog:delay: { show: 500, hide: 100 }

Tau taub hau! Cov kev xaiv rau tus kheej cov lus qhia tuaj yeem hloov pauv tau los ntawm kev siv cov ntaub ntawv cwj pwm.

Markup

Rau kev ua tau zoo vim li cas, Tooltip thiab Popover cov ntaub ntawv-apis yog xaiv rau hauv. Yog tias koj xav siv lawv tsuas yog qhia qhov kev xaiv xaiv.

  1. <a href="#" rel = "tooltip" title = "thawj tooltip" > hover over me </a>

Cov txheej txheem

$().tooltip(options)

Txuas tus tooltip handler rau ib qho khoom sau.

.tooltip('show')

Qhia ib lub ntsiab lus qhia.

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

.tooltip('hide')

Hide ib lub ntsiab lus qhia.

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

.tooltip('toggle')

Toggles ib lub ntsiab lus qhia.

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

Hais txog popovers

Ntxiv me me ntawm cov ntsiab lus, zoo li cov hauv iPad, rau txhua lub hauv paus rau cov ntaub ntawv thib ob hauv tsev.

* Yuav tsum muaj Tooltip kom suav nrog

Download tau ntaub ntawv

Piv txwv hover popover

Hover tshaj lub khawm kom ua rau lub popover.


Siv bootstrap-popover.js

Qhib popovers ntawm javascript:

  1. $ ( '#example' ). popover ( kev xaiv )

Kev xaiv

Lub npe hom ua ntej piav qhia
animation boolean muaj tseeb siv css ploj mus rau cov lus qhia
tso chaw txoj hlua | ua haujlwm 'txoj cai' yuav ua li cas tso lub popover - saum | hauv qab | sab laug | txoj cai
xaiv txoj hlua cuav Yog hais tias muaj ib tug selector, tooltip cov khoom yuav raug delegated rau lub hom phiaj
ua rau txoj hlua 'hover' yuav ua li cas tooltip yog triggered - hover | tsom | phau ntawv
lub npe hlua | muaj nuj nqi '' default title value yog 'title' attribute tsis nyob
cov ntsiab lus hlua | muaj nuj nqi '' default ntsiab lus tus nqi yog 'cov ntaub ntawv-cov ntsiab lus' tus cwj pwm tsis nyob
ncua tus lej | khoom 0

ncua kev qhia thiab zais qhov popover (ms) - tsis siv rau phau ntawv txhais hom

Yog tias muaj tus lej nkag, ncua sijhawm yog siv rau ob qho tib si zais / qhia

Object structure yog:delay: { show: 500, hide: 100 }

Tau taub hau! Cov kev xaiv rau ib tus neeg popovers tuaj yeem hloov tau los ntawm kev siv cov ntaub ntawv cwj pwm.

Markup

Rau kev ua tau zoo vim li cas, Tooltip thiab Popover cov ntaub ntawv-apis yog xaiv rau hauv. Yog tias koj xav siv lawv tsuas yog qhia qhov kev xaiv xaiv.

Cov txheej txheem

$().popover(options)

Initializes popovers rau ib qho khoom sau.

.popover('show')

Tshaj tawm cov ntsiab lus popover.

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

.popover('hide')

Hide cov ntsiab lus popover.

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

.popover('toggle')

Toggles lub ntsiab lus popover.

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

Hais txog kev ceeb toom

Lub ceeb toom plugin yog chav kawm me me ntxiv rau kev ua haujlwm ze rau kev ceeb toom.

Download tau

Piv txwv ceeb toom

Cov lus ceeb toom plugin ua haujlwm ntawm cov lus ceeb toom tsis tu ncua, thiab thaiv cov lus.

Dawb huv guacamole! Qhov zoo tshaj plaws xyuas koj tus kheej, koj tsis zoo heev.

Aw snap! Koj tau qhov yuam kev!

Hloov qhov no thiab qhov ntawd thiab sim dua. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus zaum amet fermentum.

Ua qhov no Los yog ua qhov no


Siv bootstrap-alert.js

Pab kom tshem tawm ntawm kev ceeb toom ntawm javascript:

  1. $ ( ".alert" ). ceeb toom ( )

Markup

Tsuas yog ntxiv data-dismiss="alert"rau koj lub khawm kaw kom tau txais kev ceeb toom kaw ua haujlwm.

  1. <a class = "kaw" data-dismiss = "alert" href = "#" > × </a>

Cov txheej txheem

$().alert()

Wraps tag nrho cov lus ceeb toom nrog ze functionality. Txhawm rau kom koj cov lus ceeb toom tawm thaum kaw, xyuas kom lawv muaj cov chav kawm .fadethiab .incov chav kawm twb tau thov rau lawv.

.alert('kaw')

Kaw ceeb toom.

  1. $ ( ".alert" ). ceeb toom ( 'kaw' )

Cov xwm txheej

Bootstrap's alert class exposes ob peb txheej xwm rau hooking rau hauv alert functionality.

Kev tshwm sim Kev piav qhia
kaw Qhov xwm txheej no tua hluav taws tam sim ntawd thaum closehu ua piv txwv.
kaw Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub ceeb toom tau raug kaw (yuav tos rau css kev hloov pauv kom tiav).
  1. $ ( '#my-alert' ). khi ( 'kaw' , ua haujlwm () {
  2. // ua ib yam dab tsi…
  3. })

Txog

Ua ntau nrog cov nyees khawm. Tswj khawm hais los yog tsim pab pawg ntawm cov nyees khawm rau ntau yam xws li toolbars.

Download tau ntaub ntawv

Piv txwv siv

Siv cov nyees khawm plugin rau cov xeev thiab toggles.

Xeev
Ib leeg toggle
Checkbox
Xov tooj cua

Siv bootstrap-button.js

Qhib cov nyees khawm ntawm javascript:

  1. $ ( '.nav-tabs' ). khawm ( )

Markup

Cov ntaub ntawv tus cwj pwm yog ib qho tseem ceeb rau lub khawm plugin. Txheeb xyuas qhov piv txwv hauv qab no rau ntau hom cim.

  1. <!-- Ntxiv cov ntaub ntawv-toggle="button" kom qhib toggling ntawm ib lub pob -->
  2. <button class = "btn" data-toggle = "button" > Ib Leeg Toggle </button>
  3.  
  4. <!-- Ntxiv data-toggle="buttons-checkbox" rau checkbox style toggling ntawm btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > laug </button>
  7. <button class = "btn" > nruab nrab </button>
  8. <button class = "btn" > Txoj Cai </button>
  9. </div>
  10.  
  11. <!-- Ntxiv data-toggle="buttons-radio" rau xov tooj cua style toggling ntawm btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > laug </button>
  14. <button class = "btn" > nruab nrab </button>
  15. <button class = "btn" > Txoj Cai </button>
  16. </div>

Cov txheej txheem

$().button('toggle')

Toggles thawb lub xeev. Muab lub pob kom pom tias nws tau qhib.

Tau taub hau! Koj tuaj yeem ua kom nws pib toggling ntawm lub pob los ntawm kev siv tus data-togglecwj pwm.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

Teem khawm lub xeev rau kev thauj khoom - disables khawm thiab swaps ntawv rau loading ntawv. Loading ntawv yuav tsum tau txhais nyob rau hauv lub khawm caij siv cov ntaub ntawv attribute data-loading-text.

  1. <button class = "btn" data-loading-text = "loading khoom..." > ... </button>
Tau taub hau! Firefox ua rau lub xeev neeg xiam oob khab hla nplooj ntawv thauj khoom . Ib qho kev daws teeb meem rau qhov no yog siv autocomplete="off".

$().button('reset')

Resets khawm lub xeev - swaps ntawv rau cov ntawv qub.

$().button(string)

Resets khawm lub xeev - swaps cov ntawv mus rau cov ntaub ntawv teev cov ntawv hauv xeev.

  1. <button class = "btn" data-complete-text = "finished!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). khawm ( 'ua tiav' )
  4. </script>

Txog

Tau txais cov qauv tsim thiab hloov pauv hloov pauv rau cov khoom sib tsoo zoo li accordions thiab navigation.

Download tau ntaub ntawv

* Yuav tsum muaj Transitions plugin kom suav nrog.

Piv txwv accordion

Siv lub cev qhuav dej, peb tsim ib qho yooj yim accordion style widget:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 hma hli official aute, non cupidatat skateboard dolor brunch. Khoom noj khoom haus tsheb quinoa nesciunt lab eiusmod. Brunch 3 hma hli tempor, sunt aliqua muab ib tug noog rau nws squid ib leeg-hauv paus kas fes nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur neeg tua tsiaj vice lomo. Leggings occaecat khoom siv tes ua npias ua liaj ua teb-rau- rooj, nyoos denim aesthetic synth nesciunt tej zaum koj tsis tau hnov ​​​​txog lawv accusamus ua haujlwm ruaj khov VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 hma hli official aute, non cupidatat skateboard dolor brunch. Khoom noj khoom haus tsheb quinoa nesciunt lab eiusmod. Brunch 3 hma hli tempor, sunt aliqua muab ib tug noog rau nws squid ib leeg-hauv paus kas fes nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur neeg tua tsiaj vice lomo. Leggings occaecat khoom siv tes ua npias ua liaj ua teb-rau- rooj, nyoos denim aesthetic synth nesciunt tej zaum koj tsis tau hnov ​​​​txog lawv accusamus ua haujlwm ruaj khov VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 hma hli official aute, non cupidatat skateboard dolor brunch. Khoom noj khoom haus tsheb quinoa nesciunt lab eiusmod. Brunch 3 hma hli tempor, sunt aliqua muab ib tug noog rau nws squid ib leeg-hauv paus kas fes nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur neeg tua tsiaj vice lomo. Leggings occaecat khoom siv tes ua npias ua liaj ua teb-rau- rooj, nyoos denim aesthetic synth nesciunt tej zaum koj tsis tau hnov ​​​​txog lawv accusamus ua haujlwm ruaj khov VHS.

Siv bootstrap-collapse.js

Enable ntawm javascript:

  1. $ ( ".collapse" ). poob ( )

Kev xaiv

Lub npe hom ua ntej piav qhia
niam txiv xaiv cuav Yog tias selector ces tag nrho cov ntsiab lus collapsible nyob rau hauv cov niam txiv uas tau teev tseg yuav raug kaw thaum cov khoom no collapsible tshwm sim. (zoo ib yam li kev coj cwj pwm accordion)
toggle boolean muaj tseeb Toggles lub caij collapsible ntawm invocation

Markup

Tsuas yog ntxiv data-toggle="collapse"thiab ib qho data-targetrau lub caij kom tau txais kev tswj hwm ntawm lub caij collapsible. Tus data-targetcwj pwm lees txais css xaiv los siv lub cev qhuav dej rau. Nco ntsoov ntxiv cov chav kawm collapserau lub caij collapsible. Yog tias koj xav kom nws qhib lub neej ntawd, ntxiv cov chav kawm ntxiv in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. yooj yim collapsible
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Tau taub hau! Txhawm rau ntxiv accordion-zoo li pab pawg tswj hwm rau kev tswj hwm, ntxiv cov ntaub ntawv tus cwj pwm data-parent="#selector". Xa mus rau qhov demo kom pom qhov no hauv kev nqis tes ua.

Cov txheej txheem

.collapse(options)

Activates koj cov ntsiab lus raws li ib tug collapsible caij. Txais ib qho kev xaiv xaiv object.

  1. $ ( '#myCollapsible' ). ploj ({
  2. toggle : cuav
  3. })

.collapse('toggle')

Toggles lub caij collapsible kom pom los yog zais.

.collapse('show')

Qhia ib lub caij collapsible.

.collapse('hide')

Hide ib lub caij collapsible.

Cov xwm txheej

Bootstrap's collapse class exposes ob peb txheej xwm rau hooking mus rau hauv vau functionality.

Kev tshwm sim Kev piav qhia
ua yeeb yam Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
qhia Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij sib tsoo tau ua kom pom rau tus neeg siv (yuav tos rau css kev hloov pauv kom tiav).
zais Qhov kev tshwm sim no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua txoj kev.
zais cia Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij sib tsoo tau muab zais los ntawm tus neeg siv (yuav tos rau css kev hloov pauv kom tiav).
  1. $ ( '#myCollapsible' ). ntawm ( 'hidden' , function () {
  2. // ua ib yam dab tsi…
  3. })

Txog

Ib qho yooj yim, yooj yim txuas ntxiv plugin rau sai sai tsim elegant typeaheads nrog rau cov ntawv sau ntawv nkag.

Download tau ntaub ntawv

Piv txwv

Pib ntaus ntawv hauv daim teb hauv qab no kom pom cov txiaj ntsig typeahead.


Siv bootstrap-typeahead.js

Hu rau typeahead ntawm javascript:

  1. $ ( '.typeahead' ). ntaus ntawv ( )

Kev xaiv

Lub npe hom ua ntej piav qhia
qhov chaw array [] Cov ntaub ntawv los nug tawm tsam.
cov khoom tus lej 8 Tus naj npawb max ntawm cov khoom los tso saib hauv qhov poob.
tus sib tw muaj nuj nqi cas insensitive Txoj kev siv los txiav txim siab seb qhov lus nug puas phim ib yam khoom. Txais ib qho kev sib cav, qhov itemtawm tsam uas yuav sim cov lus nug. Nkag mus rau cov lus nug tam sim no nrog this.query. Rov qab ib qho boolean trueyog tias cov lus nug yog qhov sib tw.
tus txheej txheem muaj nuj nqi qhov tseeb match,
case sensitive,
case insensitive
Txoj kev siv los txheeb cov txiaj ntsig autocomplete. lees txais ib qho kev sib cav itemsthiab muaj lub luag haujlwm ntawm qhov piv txwv typeahead. Siv cov lus nug tam sim no nrog this.query.
highlighter muaj nuj nqi highlights tag nrho cov default match Txoj kev siv los qhia txog cov txiaj ntsig autocomplete. lees txais ib qho kev sib cav itemthiab muaj lub luag haujlwm ntawm qhov piv txwv typeahead. Yuav tsum rov html.

Markup

Ntxiv cov ntaub ntawv tus cwj pwm los sau npe ib lub caij nrog typeahead functionality.

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

Cov txheej txheem

.typeahead(options)

Initializes ib tug input nrog ib tug typeahead.