Javascript għal Bootstrap

Agħti l-ħajja lill-komponenti ta' Bootstrap—issa bi 12-il plugin jQuery apposta .

Modali

A simplifikata, iżda flessibbli, tieħu fuq il-plugin modali javascript tradizzjonali biss bil-funzjonalità minima meħtieġa u defaults intelliġenti.

Dropdowns

Żid menus dropdown għal kważi kull ħaġa f'Bootstrap b'dan il-plugin sempliċi. Bootstrap karatteristiċi appoġġ sħiħ dropdown menu fuq fin-navbar, tabs, u pilloli.

Scrollspy

Uża scrollspy biex taġġorna awtomatikament il-links fin-navbar tiegħek biex turi r-rabta attiva attwali bbażata fuq il-pożizzjoni tal-iscroll.

Tabs li jistgħu jinqalbu

Uża dan il-plugin biex tagħmel it-tabs u l-pilloli aktar utli billi tħallihom jaqilbu minn ħġieġa tabbable ta' kontenut lokali.

Tooltips

Ħarsa ġdida fuq il-plugin jQuery Tipsy, Tooltips ma jiddependux fuq immaġini—użaw CSS3 għal animazzjonijiet u attributi tad-dejta għall-ħażna tat-titlu lokali.

Popovers *

Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja.

* Jeħtieġ li jiġu inklużi Tooltips

Messaġġi ta' twissija

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

Buttuni

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Kollass

Ikseb stili bażi u appoġġ flessibbli għal komponenti kollassabbli bħal accordions u navigazzjoni.

Karużell

Oħloq merry-go-round ta' kwalunkwe kontenut li tixtieq tipprovdi slideshow interattiva tal-kontenut.

Typeahead

Plugin bażiku, estiż faċilment għall-ħolqien malajr ta 'typeaheads eleganti bi kwalunkwe input ta' test tal-forma.

Transizzjonijiet *

Għal effetti ta 'tranżizzjoni sempliċi, inkludi bootstrap-transition.js darba biex tiżżerżaq f'modali jew twissijiet li jisparixxu.

* Meħtieġa għall-animazzjoni fil-plugins

Irjus up! Il-plugins javascript kollha jeħtieġu l-aħħar verżjoni ta' jQuery.

Dwar modali

A simplifikata, iżda flessibbli, tieħu fuq il-plugin modali javascript tradizzjonali biss bil-funzjonalità minima meħtieġa u defaults intelliġenti.

Niżżel il-fajl

Eżempju statiku

Hawn taħt hemm modal mogħtija b'mod statiku.

Demo live

Aqleb modal permezz ta' javascript billi tikklikkja l-buttuna hawn taħt. Jiżżerżaq 'l isfel u jisparixxi mill-parti ta' fuq tal-paġna.

Tnedija demo modali

Bl-użu bootstrap-modal

Ċempel il-modal permezz ta' javascript:

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

Għażliet

Isem tip default deskrizzjoni
sfond boolean veru Jinkludi element ta' sfond modali. Inkella, speċifika staticgħal sfond li ma jagħlaqx il-modal mal-ikklikkja.
tastiera boolean veru Jagħlaq il-modal meta tingħafas iċ-ċavetta tal-ħarba
juru boolean veru Juri l-modal meta inizjalizzat.

Markup

Tista' tattiva l-modals fuq il-paġna tiegħek faċilment mingħajr ma jkollok tikteb linja waħda ta' javascript. Issettja biss data-toggle="modal"fuq element ta 'kontrollur b'jew data-target="#foo"li href="#foo"jikkorrispondi għal id element modali, u meta għafast, se tniedi l-modal tiegħek.

Ukoll, biex iżżid għażliet mal-istanza modali tiegħek, inkludihom biss bħala attributi tad-dejta addizzjonali jew fuq l-element ta 'kontroll jew fuq il-markup modali innifsu.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Tnedija Modali </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> Header modali </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Korp wieħed fin... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Agħlaq </a>
  11. <a href = "#" class = "btn btn-primary" > Issejvja l-bidliet </a>
  12. </div>
  13. </div>
Irjus up! Jekk trid li l-modal tiegħek janima 'l ġewwa u 'l barra, żid .fadeklassi ma' l- .modalelement (irreferi għad-demo biex tara dan fl-azzjoni) u inkludi bootstrap-transition.js.

Metodi

.modal(għażliet)

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

  1. $ ( '#Modal tiegħi' ). modali ({
  2. tastiera : falza
  3. })

.modal('toggle')

Manwalment toggles modali.

  1. $ ( '#Modal tiegħi' ). modali ( 'toggle' )

.modal('show')

Manwalment tiftaħ modali.

  1. $ ( '#Modal tiegħi' ). modali ( 'turi' )

.modal('hide')

Manwalment jaħbi modali.

  1. $ ( '#Modal tiegħi' ). modali ( 'ħbi' )

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).
  1. $ ( '#Modal tiegħi' ). fuq ( 'moħbi' , funzjoni () {
  2. // agħmel xi ħaġa...
  3. })

Il-plugin ScrollSpy huwa għall-aġġornament awtomatiku tal-miri tan-nav ibbażati fuq il-pożizzjoni tal-iscroll.

Niżżel il-fajl

Eżempju ta 'navbar ma' scrollspy

Skrollja ż-żona hawn taħt u ara l-aġġornament tan-navigazzjoni. Is-sub-oġġetti dropdown se jiġu enfasizzati wkoll. Ippruvaha!

@xaħam

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi qabel ma jinbiegħu qui. Tumblr drittijiet tar-roti minn farm-to-mejda tkun xi tkun. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 lupu qamar irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui inti probabilment ma smajtx minnhom et cardigan trust fund culpa bijodiżil wes anderson estetika. Nihil tattooed accusamus, cred ironija bijodiżil keffiyeh artiġjanali ullamco consequat.

@mdo

Veniam marfa moustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Trakk ta 'l-ikel tas-sweeter cosby tatujat, vinil tal-mcsweeney's quis non freegan. Lo-fi wes anderson +1 sartorial. Carles mhux eżerċizzju estetiku quis gentrify. Brooklyn adipisicing craft birra viċi keytar deserunt.

waħda

Occaecat commodo aliqua delectus. Fap craft birra deserunt skateboard ea. Lomo drittijiet tar-roti adipisicing banh mi, velit ea sunt livell li jmiss locavore kafè ta 'oriġini waħda fil-magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS huwa adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

tnejn

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 kwalunkwe delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche ironija, thundercats inti probabilment ma smajtx minnhom consequat hoodie gluten free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Bl-użu bootstrap-scrollspy.js

Ċempel l-iscrollspy permezz ta' javascript:

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

Markup

Biex iżżid faċilment l-imġieba ta 'scrollspy man-navigazzjoni topbar tiegħek, żid biss data-spy="scroll"mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il-korp).

  1. <body data-spy = "scroll" > ... </body>
Irjus up! Ir-rabtiet tan-Navbar għandu jkollhom miri id risolvibbli. Per eżempju, <a href="#home">home</a>għandu jikkorrispondi għal xi ħaġa fil-dom bħal <div id="home"></div>.

Metodi

.scrollspy('aġġornament')

Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:

  1. $ ( '[data-spy="scroll"]' ). kull ( funzjoni () {
  2. var $spy = $ ( dan ). scrollspy ( 'aġġornament' )
  3. });

Għażliet

Isem tip default deskrizzjoni
offset numru 10 Pixels biex ipattu minn fuq meta tikkalkula l-pożizzjoni tal-iscroll.

Avvenimenti

Avveniment Deskrizzjoni
jattiva Dan l-avveniment jispara kull meta oġġett ġdid jiġi attivat mill-iscrollspy.

Dan il-plugin iżid tab veloċi, dinamiku u funzjonalità tal-pilloli għat-tranżizzjoni permezz tal-kontenut lokali.

Niżżel il-fajl

Eżempji tabs

Ikklikkja t-tabs hawn taħt biex taqleb bejn panewijiet moħbija, anke permezz ta' menus dropdown.

Denim mhux maħdum x'aktarx ma smajtx bihom jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master jitnaddaf. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex klamari. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.


Bl-użu bootstrap-tab.js

Ippermetti tabs tabbable permezz ta' javascript (kull tab trid tiġi attivata individwalment):

  1. $ ( '#Tab tiegħi a' ). ikklikkja ( funzjoni ( e ) {
  2. e . preventDefault ();
  3. $ ( dan ). tab ( 'juru' );
  4. })

Tista' tattiva tabs individwali b'diversi modi:

  1. $ ( '#myTab a[href="#profil"]' ). tab ( 'juru' ); // Agħżel tab bl-isem
  2. $ ( '#Tab tiegħi a:l-ewwel' ). tab ( 'juru' ); // Agħżel l-ewwel tab
  3. $ ( '#Tab tiegħi a:l-aħħar' ). tab ( 'juru' ); // Agħżel l-aħħar tab
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'juru' ); // Agħżel it-tielet tab (0-indiċi)

Markup

Tista' tattiva tab jew navigazzjoni ta' pillola mingħajr ma tikteb xi javascript billi sempliċement tispeċifika data-toggle="tab"jew data-toggle="pill"fuq element. Iż-żieda tal- navu nav-tabsklassijiet mat-tab ulse tapplika l-istil tat-tab bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messaġġi </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Settings </a></li>
  6. </ul>

Metodi

$().tab

Jattiva element tab u kontenitur tal-kontenut. Tab għandu jkollha jew a data-targetjew hrefnode ta 'kontenitur fil-mira fid-DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Dar </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Messaġġi </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 = "dar" > ... </div>
  10. <div class = "tab-pane" id = "profil" > ... </div>
  11. <div class = "tab-pane" id = "messaġġi" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <kitba>
  16. $ ( funzjoni () {
  17. $ ( '#Tab tiegħi a:l-aħħar' ). tab ( 'juru' );
  18. })
  19. </script>

Avvenimenti

Avveniment Deskrizzjoni
juru Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
murija Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
  1. $ ( 'a[data-toggle="tab"]' ). fuq ( 'muri' , funzjoni ( e ) {
  2. e . mira // tab attivata
  3. e . relatedTarget // tab preċedenti
  4. })

Dwar Tooltips

Ispirat mill-plugin eċċellenti jQuery.tipsy miktub minn Jason Frame; Tooltips huma verżjoni aġġornata, li ma jiddependux fuq immaġini, jużaw css3 għall-animazzjonijiet, u data-attributi għall-ħażna tat-titlu lokali.

Niżżel il-fajl

Eżempju ta' użu ta' Tooltips

Passa fuq il-links hawn taħt biex tara l-għodda:

Qliezet stretti livell li jmiss keffiyeh inti probabilment ma smajthom. Photo booth beard raw denim letterpress vegan messaġġier borża stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american ilbies għandhom terri richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A verament ironiku artiġjan kwalunkwe keytar , scenester farm-to-table banksy Austin twitter manku freegan cred raw denim kafè ta 'oriġini waħda virali.


Bl-użu bootstrap-tooltip.js

Agħmel it-tooltip permezz tal-javascript:

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

Għażliet

Isem tip default deskrizzjoni
animazzjoni boolean veru applika transizzjoni fade css għall-tooltip
tqegħid spag|funzjoni 'fuq' kif tpoġġi l-tooltip - top | qiegħ | xellug | dritt
selettur spag falza Jekk jiġi pprovdut selettur, l-oġġetti tat-tooltip jiġu delegati lill-miri speċifikati.
titolu spag | funzjoni '' valur tat-titlu default jekk it-tikketta "titolu" ma tkunx preżenti
grillu spag 'jiċċaqlaq' kif tooltip huwa attivat - imbagħad jerġgħu | tiffoka | manwal
dewmien numru | oġġett 0

dewmien biex juri u jaħbi l-tooltip (ms) - ma japplikax għat-tip ta' grillu manwali

Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm għall-ħbi/turi

L-istruttura tal-oġġett hija:delay: { show: 500, hide: 100 }

Irjus up! Għażliet għal tooltips individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta.

Markup

Għal raġunijiet ta' prestazzjoni, it-Tooltip u l-Popover data-apis huma opt in. Jekk tixtieq tużahom, speċifika għażla ta' selezzjoni.

  1. <a href = "#" rel = "tooltip" title = "l-ewwel tooltip" > iddur fuqi </a>

Metodi

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

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

.tooltip('show')

Tiżvela tooltip ta' element.

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

.tooltip('hide')

Jaħbi tooltip ta' element.

  1. $ ( '#element' ). tooltip ( 'ħbi' )

.tooltip('toggle')

Jiddawwar l-għodda ta' element.

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

Dwar popovers

Żid overlays żgħar ta 'kontenut, bħal dawk fuq l-iPad, ma' kwalunkwe element għall-akkomodazzjoni ta 'informazzjoni sekondarja.

* Jeħtieġ li tiġi inkluża Tooltip

Niżżel il-fajl

Eżempju hover popover

Passa fuq il-buttuna biex tiskatta l-popover.


Bl-użu bootstrap-popover.js

Ippermetti popovers permezz ta' javascript:

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

Għażliet

Isem tip default deskrizzjoni
animazzjoni boolean veru applika transizzjoni fade css għall-tooltip
tqegħid spag|funzjoni 'dritt' kif tpoġġi l-popover - top | qiegħ | xellug | dritt
selettur spag falza jekk jiġi pprovdut selettur, l-oġġetti tat-tooltip jiġu delegati lill-miri speċifikati
grillu spag 'jiċċaqlaq' kif tooltip huwa attivat - imbagħad jerġgħu | tiffoka | manwal
titolu spag | funzjoni '' valur tat-titlu default jekk l-attribut "titolu" ma jkunx preżenti
kontenut spag | funzjoni '' valur tal-kontenut default jekk l-attribut `data-content` ma jkunx preżenti
dewmien numru | oġġett 0

dewmien li juri u jaħbi l-popover (ms) - ma japplikax għat-tip ta 'grillu manwali

Jekk jiġi fornut numru, id-dewmien jiġi applikat kemm għall-ħbi/turi

L-istruttura tal-oġġett hija:delay: { show: 500, hide: 100 }

Irjus up! Għażliet għal popovers individwali jistgħu alternattivament jiġu speċifikati permezz tal-użu tal-attributi tad-dejta.

Markup

Għal raġunijiet ta' prestazzjoni, it-Tooltip u l-Popover data-apis huma opt in. Jekk tixtieq tużahom, speċifika għażla ta' selezzjoni.

Metodi

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

Inizjalizza popovers għal ġabra ta' elementi.

.popover('show')

Tiżvela popover ta 'elementi.

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

.popover('hide')

Jaħbi popover ta' elementi.

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

.popover('toggle')

Tiddawwar popover tal-elementi.

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

Dwar twissijiet

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

Niżżel

Eżempji ta' twissijiet

Il-plugin ta 'twissijiet jaħdem fuq messaġġi ta' twissija regolari, u jimblokka messaġġi.

Qaddis guacamole! L-aħjar iċċekkja lilek innifsek, m'intix qed tfittex wisq tajjeb.

Oh snap! Ghandek żball!

Ibdel dan u dak u erġa' pprova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Ħu din l-azzjoni Jew tagħmel dan


Bl-użu bootstrap-alert.js

Ippermetti t-tkeċċija ta' twissija permezz ta' javascript:

  1. $ ( ".twissija" ). twissija ()

Markup

Żid biss data-dismiss="alert"mal-buttuna ta 'qrib tiegħek biex awtomatikament tagħti funzjonalità ta' twissija mill-qrib.

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

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.

  1. $ ( ".twissija" ). allert ( 'qrib' )

Avvenimenti

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

Avveniment Deskrizzjoni
qrib Dan l-avveniment jispara immedjatament meta closejissejjaħ il-metodu tal-istanza.
magħluqa Dan l-avveniment jiġi sparat meta t-twissija tkun ingħalaq (se tistenna li jitlestew it-tranżizzjonijiet css).
  1. $ ( '#twissija tiegħi' ). bind ( 'magħluq' , funzjoni () {
  2. // agħmel xi ħaġa...
  3. })

Dwar

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Niżżel il-fajl

Eżempju użi

Uża l-plugin tal-buttuni għal stati u toggles.

Stateful
Toggle wieħed
Checkbox
Radju

Bl-użu bootstrap-button.js

Ippermetti buttuni permezz ta' javascript:

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

Markup

L-attributi tad-dejta huma integrali għall-plugin tal-buttuna. Iċċekkja l-kodiċi eżempju hawn taħt għad-diversi tipi ta 'markup.

  1. <!-- Żid data-toggle="button" biex tattiva t-toggling fuq buttuna waħda -->
  2. <button class = "btn" data-toggle = "button" > Toggle Uniku </button>
  3.  
  4. <!-- Żid data-toggle="buttons-checkbox" għat-toggling tal-istil tal-kaxxa tal-kontroll fuq btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Xellug </button>
  7. <button class = "btn" > Nofsani </button>
  8. <button class = "btn" > Dritt </button>
  9. </div>
  10.  
  11. <!-- Żid data-toggle="buttons-radio" għal toggling stil tar-radju fuq btn-group -->
  12. <div class = "btn-group" data-toggle = "buttuni-radju" >
  13. <button class = "btn" > Xellug </button>
  14. <button class = "btn" > Nofsani </button>
  15. <button class = "btn" > Dritt </button>
  16. </div>

Metodi

$().button('toggle')

Toggles push state. Jagħti lill-buttuna id-dehra li ġiet attivata.

Irjus up! Tista 'tippermetti t-toggling awtomatiku ta' buttuna billi tuża l- data-toggleattribut.
  1. <button class = "btn" data-toggle = "buttuna" > </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.

  1. <button class = "btn" data-loading-text = "jitgħabbi l-affarijiet..." > ... </button>
Irjus up! Firefox jippersisti l-istat diżattivat tul il-paġni tagħbijiet . Soluzzjoni għal dan huwa l-użu autocomplete="off".

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

  1. <button class = "btn" data-complete-text = "lest!" > ... </button>
  2. <kitba>
  3. $ ( '.btn' ). buttuna ( 'kompleta' )
  4. </script>

Dwar

Ikseb stili bażi u appoġġ flessibbli għal komponenti kollassabbli bħal accordions u navigazzjoni.

Niżżel il-fajl

* Jeħtieġ li l-plugin Transitions jiġi inkluż.

Eżempju accordion

Bl-użu tal-plugin tal-kollass, bnejna widget sempliċi stil accordion:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad klamari. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupu qamar tempor, sunt aliqua poġġi għasfur fuqu klamari ta 'oriġini waħda kafè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur biċċier viċi lomo. Leggings occaecat craft birra farm-to-table, raw denim aesthetic synth nesciunt inti probabilment ma smajtx minnhom accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad klamari. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupu qamar tempor, sunt aliqua poġġi għasfur fuqu klamari ta 'oriġini waħda kafè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur biċċier viċi lomo. Leggings occaecat craft birra farm-to-table, raw denim aesthetic synth nesciunt inti probabilment ma smajtx minnhom accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad klamari. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupu qamar tempor, sunt aliqua poġġi għasfur fuqu klamari ta 'oriġini waħda kafè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur biċċier viċi lomo. Leggings occaecat craft birra farm-to-table, raw denim aesthetic synth nesciunt inti probabilment ma smajtx minnhom accusamus labore sustainable VHS.

Bl-użu bootstrap-collapse.js

Ippermetti permezz ta' javascript:

  1. $ ( ". kollass" ). kollass ()

Għażliet

Isem tip default deskrizzjoni
ġenitur selettur falza Jekk selettur allura l-elementi kollha kollassabbli taħt il-ġenitur speċifikat se jingħalqu meta dan l-oġġett kollassabbli jintwera. (simili għall-imġieba tradizzjonali tal-accordion)
toggle boolean veru Jiddawwar l-element kollassabbli fuq l-invokazzjoni

Markup

Żid biss data-toggle="collapse"u a data-targetgħall-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli. L- data-targetattribut jaċċetta selettur css biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali in.

  1. <button class = "btn btn-danger" data-toggle = "kollass" data-target = "#demo" >
  2. sempliċi kollassabbli
  3. </button>
  4.  
  5. <div id = "demo" class = "kollass fi" > </div>
Irjus up! Biex iżżid ġestjoni tal-gruppi bħal accordion ma 'kontroll kollassabbli, żid l-attribut tad-data data-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.

Metodi

.kollass(għażliet)

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

  1. $ ( '#myCollapsible' ). kollass ({
  2. toggle : falza
  3. })

.kollapse('toggle')

Jitbiddel element kollassabbli biex jintwera jew moħbi.

.kollass('turi')

Juri element kollassabbli.

. kollass('ħbi')

Jaħbi element kollassabbli.

Avvenimenti

Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.

Avveniment Deskrizzjoni
juru Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
murija Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li jitlestew it-transizzjonijiet css).
ħabi Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu jkun ġie msejjaħ.
moħbija Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet css).
  1. $ ( '#myCollapsible' ). fuq ( 'moħbi' , funzjoni () {
  2. // agħmel xi ħaġa...
  3. })

Dwar

Plugin bażiku, estiż faċilment għall-ħolqien malajr ta 'typeaheads eleganti bi kwalunkwe input ta' test tal-forma.

Niżżel il-fajl

Eżempju

Ibda ittajpja fil-qasam hawn taħt biex turi r-riżultati typeahead.


Bl-użu bootstrap-typeahead.js

Ċempel it-typeahead permezz ta' javascript:

  1. $ ( '.typeahead' ). ittajpja ()

Għażliet

Isem tip default deskrizzjoni
sors firxa [ ] Is-sors tad-dejta li għalih jista' jsir mistoqsija.
oġġetti numru 8 In-numru massimu ta' oġġetti li għandhom jintwerew fil-dropdown.
matcher funzjoni insensittiv għall-każ Il-metodu użat biex jiddetermina jekk mistoqsija taqbilx ma' oġġett. Jaċċetta argument wieħed, itemli kontrih tittestja l-mistoqsija. Aċċessa l-mistoqsija attwali b' this.query. Irritorna boolean truejekk il-mistoqsija hija taqbila.
issortjar funzjoni taqbila eżatta,
sensittiva għall-
każ, insensittiv għall-każ
Metodu użat biex issolvi r-riżultati awtokompleti. Jaċċetta argument wieħed itemsu għandu l-ambitu tal-istanza typeahead. Irreferi għall-mistoqsija attwali b' this.query.
highlighter funzjoni jenfasizza l-logħbiet default kollha Metodu użat biex jenfasizza r-riżultati awtokompleti. Jaċċetta argument wieħed itemu għandu l-ambitu tal-istanza typeahead. Għandu jirritorna html.

Markup

Żid attributi tad-dejta biex tirreġistra element b'funzjonalità typeahead.

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

Metodi

.typeahead(għażliet)

Inizjalizza input b'typeahead.