JavaScript nga Pagsasao

Iyeg ti biag dagiti paset ti Bootstrap—ita nga addaan iti 13 a kostumbre a plugin ti jQuery.

Indibidual wenno naurnong

Dagiti plugin ket mabalin a mairaman a saggaysa (nupay dagiti dadduma ket addaan kadagiti kasapulan a panagpanpanunot), wenno amin a maminsan. Agpada a ti bootstrap.js ken bootstrap.min.js ket aglaon kadagiti amin a plugin iti maymaysa a file.

Dagiti kababalin ti datos

Mabalinmo nga usaren amin a plugin ti Bootstrap a puro babaen ti markup API a saan a mangisurat iti maymaysa a linia ti JavaScript. Daytoy ti umuna a klase nga API ti Bootstrap ken rumbeng nga umuna a konsiderasionmo no agus-usar iti plugin.

Kas naibaga, iti dadduma a kasasaad mabalin a matarigagayan nga iddepen daytoy a panagandar. Gapuna, mangipaaykami pay ti abilidad a mangbaldado ti API ti attribute ti datos babaen ti panangikkat kadagiti amin a pasamak iti bagi a namespaced babaen ti `'data-api'`. Kastoy ti langa daytoy:

  1. $ ( 'bagi' ). naiddep ( '.data-api' ) .

Saan laeng a dayta, tapno puntiriaen ti espesipiko a plugin, iraman laeng ti nagan ti plugin a kas maysa nga espasio ti nagan agraman ti espasio ti nagan ti data-api a kas iti daytoy:

  1. $ ('bagi').off ('.alerto.datos-api')( 'bagi' ). off ( '.alerto.datos-api' ) .

Programmatiko nga API

Patienmi pay a rumbeng a kabaelam nga usaren amin a plugin ti Bootstrap a puro babaen ti JavaScript API. Amin dagiti publiko nga API ket agmaymaysa, makadena a pamay-an, ken mangisubli ti koleksion a nagtignay.

  1. $ (".btn.peggad").buton ("ibalbaliw").addClass ("taba")( ".btn.peggad" ). buton ( "agbaliwbaliw" ). addKlase ( "taba" ) .

Amin a pamay-an ket rumbeng nga umawat ti maysa nga opsional a banag ti pagpilian, ti maysa a kuerdas a mangpuntiria ti partikular a pamay-an, wenno awan (a mangirugi ti plugin nga addaan iti kasisigud a kababalin):

  1. $("#myModal").modal () // nairugi kadagiti default( "#modalko" ). modal () // nairugi nga addaan kadagiti default
  2. $ ( "# ti Modalko" ). modal ({ teklado : palso }) // nairugi nga awan ti teklado
  3. $ ( "# ti Modalko" ). modal ( 'ipakita' ) // mangirugi ken mangawag ti ipakita a dagus

Tunggal plugin ket mangibutaktak pay ti raw a konstruktorna iti maysa a tagikua ti `Konstruktor`: $.fn.popover.Constructor. No kayatmo ti makaala ti partikular a pagarigan ti plugin, alaem a direkta manipud iti maysa nga elemento: $('[rel=popover]').data('popover').

Awan ti Panagsusupiat

No dadduma ket kasapulan nga agusar kadagiti plugin ti Bootstrap kadagiti dadduma a balangkas ti UI. Kadagitoy a kasasaad, dagiti panagdinnungpar ti namespace ket mabalin a sagpaminsan a mapasamak. No mapasamak daytoy, mabalinmo nga awagan .noConflictti plugin a kayatmo nga isublin ti pategna.

  1. var bootstrapButton = $.fn.button.noConflict() // isubli ti $.fn.button iti dati a naituding a pategbootstrapButon = $ nga . fn nga . buton ti . noConflict () // isubli ti $.fn.button iti dati a naituding a pateg
  2. $ nga . fn nga . bootstrapBtn = bootstrapButton // ited ti $().bootstrapBtn ti panagusar ti bootstrap

Dagiti Pasamak

Ti Bootstrap ket mangipaay kadagiti kostumbre a pasamak para kadagiti kaaduan a naisangayan nga aramid ti plugin. Sapasap, dagitoy ket umay iti maysa nga infinitibo ken napalabas a partisipio a porma - a ti infinitibo (ex. show) ket maitignay iti rugi ti maysa a pasamak, ken ti napalabas a partisipio a pormana (ex. shown) ket mangtignay iti pannakaileppas ti maysa nga aramid.

Amin nga infinitibo a pasamak ket mangipaay ti panagusar ti preventDefault. Daytoy ket mangipaay ti abilidad a mangpasardeng ti pannakaipatungpal ti maysa nga aramid sakbay a mangrugi daytoy.

  1. $ ('# myModal').on ('ipakita', trabaho (e) {( '#modalko' ). on ( 'ipakita' , trabaho ( e ) {
  2. no (! datos ) agsubli iti e . preventDefault () // pasardengen ti modal manipud iti pannakaipakita
  3. }) nga

Maipapan kadagiti panagbalbaliw

Para kadagiti simple nga epekto ti panagbalbaliw, iraman ti bootstrap-transition.js a maminsan a kadua dagiti dadduma a JS a papeles. No agus-usar ka ti naurnong (wenno napabassit) a bootstrap.js , saan a kasapulan nga iraman daytoy—addan dayta.

Usaren dagiti kaso

Sumagmamano a pagarigan ti plugin ti panagbalbaliw:

  • Panag-slide wenno panagkupas kadagiti modal
  • Agkupas dagiti tab
  • Agkupas dagiti alerto
  • Ag-slide kadagiti carousel a pane

Dagiti pagarigan

Dagiti modal ket naurnos, ngem nalaka a maibagay, dagiti dialogo a panagkiddaw nga addaan kadagiti kabassitan a kasapulan a panagusar ken dagiti nasirib a default.

Estatiko nga ehemplo

Maysa a naiparang a modal nga addaan iti ulo, bagi, ken grupo dagiti tignay iti footer.

  1. <div class = "panagkupas ti modal nga ilemmeng" >
  2. <div klase = "modal-nga-ulo" >
  3. < tipo ti buton = "buton" klase = "serraan" data-dismiss = "modal" aria-nailemmeng = "pudno" > × </button> nga
  4. <h3> Modal nga ulo </h3>
  5. </div>
  6. <div klase = "modal-a-bagi" >
  7. <p> Maysa a napino a bagi... </p>
  8. </div>
  9. <div klase = "modal-a-saka" >
  10. <a href = "#" klase = "btn" > Serraan </a>
  11. <a href = "#" class = "btn btn-primary" > Idulin dagiti panagbalbaliw </a>
  12. </div>
  13. </div>

Agbiag nga demo

I-toggle ti maysa a modal babaen ti JavaScript babaen ti panangi-klik ti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.

  1. <!-- Buton nga ag-trigger ti modal -->
  2. <a href = "#myModal" akem = "buton" klase = "btn" data-toggle = "modal" > Irugi ti modal ti demo </a>
  3.  
  4. <!-- Modal nga -->
  5. <div id = "myModal" klase = "modal nga ilemmeng agkupas" tabindex = "-1" akem = "dialogo" aria-labelledby = "myModalLabel" aria-nailemmeng = "pudno" >
  6. <div klase = "modal-nga-ulo" >
  7. < kita ti buton = "buton" klase = "serraan" data-dismiss = "modal" aria-nailemmeng = "pudno" > × </button>
  8. <h3 id = "myModalLabel" > Ulo ti modal </h3>
  9. </div>
  10. <div klase = "modal-a-bagi" >
  11. <p> Maysa a napino a bagi... </p>
  12. </div>
  13. <div klase = "modal-a-saka" >
  14. <buton klase = "btn" data-dismiss = "modal" aria-nailemmeng = "pudno" > Serraan </buton>
  15. <button class = "btn btn-primary" > Idulin dagiti panagbalbaliw </button>
  16. </div>
  17. </div>

Panagusar

Babaen kadagiti attribute ti datos

Aktiboen ti modal a saan nga agsurat iti JavaScript. Itakderan data-toggle="modal"iti maysa nga elemento ti kontrolador, a kas ti buton, agraman ti maysa data-target="#foo"wenno href="#foo"tapno puntiriaen ti espesipiko a modal tapno ag-toggle.

  1. < kita ti buton = "buton" data-toggle = "modal" data-target = "#myModal" > Irugi ti modal </button>

Babaen ti JavaScript

Awagan ti modal nga addaan iti id myModalnga addaan iti maymaysa a linia ti JavaScript:

  1. $ ( '# ti Modalko' ). modal ( dagiti pagpilian ) .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-backdrop="".

Nagan tipo default panangiladawan
backdrop ti likud boolean nga agpayso Iramanna ti modal-backdrop nga elemento. Saan laeng a dayta, ikeddeng staticpara iti backdrop a saan a mangiserra ti modal iti panagpidut.
teklado nga boolean nga agpayso Serraan ti modal no maipidut ti escape key
ipakita boolean nga agpayso Ipakita ti modal no mairugi.
nauneg dalan saan nga agpayso

No ti adayo nga url ket naited, ti linaon ket maikarga babaen ti loadpamay-an ti jQuery ken mai-inject iti .modal-body. No agus-usar ka ti data api, mabalinmo nga alternatibo nga usaren ti hrefetiketa tapno mangibaga ti adayo a taudan. Ti pagarigan iti daytoy ket naipakita iti baba:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Dagiti Pamay-an

.modal(dagiti pagpilian) .

Aktiboenna ti linaonmo kas modal. Awaten ti maysa nga opsional a pagpilian object.

  1. $ ( '# ti Modalko' ). modal nga ({
  2. teklado : palso nga
  3. }) nga

.modal ('agbalbaliw') .

Manual nga i-toggle ti maysa a modal.

  1. $ ( '# ti Modalko' ). modal ( 'agbaliwbaliw' ) .

.modal('ipakita') .

Manual a luktan ti maysa a modal.

  1. $ ( '# ti Modalko' ). modal ( 'ipakita' ) .

.modal('ilemmeng') .

Manual nga ilemmeng ti maysa a modal.

  1. $ ( '# ti Modalko' ). modal ( 'ilemmeng' ) .

Dagiti Pasamak

Ti modal a klase ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti modal a panagusar.

Pasamak Panangiladawan
ipakita Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita Daytoy a pasamak ket mapaputok no ti modal ket naaramiden a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
aglemmeng Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ti pagarigan ket naawagan.
naidulin Daytoy a pasamak ket mapaputok no ti modal ket nalpas a nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
  1. $ ( '# ti Modalko' ). on ( 'nalimed' , trabaho () {
  2. // aramiden ti maysa a banag...
  3. }) nga

Pagarigan iti navbar

Ti plugin ti ScrollSpy ket para iti automatiko a panangpabaro kadagiti puntiria ti nav a naibatay iti posision ti panag-scroll. I-scroll ti lugar iti baba ti navbar ken buyaen ti aktibo a panagbalbaliw ti klase. Mai-highlight met dagiti dropdown sub items.

@nalukmeg

Ad leggings keytar, brunch id arte partido dolor labore. Pitchfork yr enim lo-fi sakbay nga nailako da qui. Tumblr farm-to-table bisikleta karbengan aniaman. Anim keffiyeh ni carles nga cardigan. Velit seitan cabina ti retrato ni mcsweeney 3 lobo bulan irure. Cosby suéter lomo jean shorts, williamsburg hoodie minim qui nalabit saanmo a nangngeg dagitoy et cardigan pondo ti panagtalek culpa biodiesel wes anderson estetika. Nihil tattoo nga accusamus, cred ironia biodiesel keffiyeh artisano ullamco consequat.

@mdo nga

Veniam marfa bigote nga skateboard, adipisicing fugiat velit pitchfork barbas. Freegan barbas aliqua cupidatat nga vero ni mcsweeney. Cupidatat uppat a loko nisi, ea helvetica nulla carles. Tattooed cosby suéter trak ti taraon, mcsweeney ni mcsweeney nga quis non freegan vinyl. Lo-fi wes anderson +1 nga sartorial. Carles saan nga estetiko nga ehersisio quis gentrify. Brooklyn adipisicing craft nga serbesa bise keytar deserunt.

maysa

Occaecat nga komodo nga aliqua delectus. Fap craft serbesa deserunt nga skateboard ea. Lomo bisikleta karbengan adipisicing banh mi, velit ea sunt sumaruno a lebel locavore maymaysa ti nagtaudanna a kape iti magna veniam. Nangato nga biag id vinyl, echo parke consequat quis aliquip banh mi tinidor. Vero VHS nga adipisicing. Consectetur nisi DIY minim nga bag ti mensahero. Cred ex iti, natalged a delectus consectetur fanny pack iphone.

dua

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 mensahero bag marfa aniaman delectus trak ti taraon. Sapiente nga sinte nga id nga assumenda. Locavore sed helvetica cliche irony, thundercats nalabit dimo pay nangngeg ida consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat sakbay a nailakoda, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artisano. Cardigan nga craft nga serbesa seitan nga nakasagana velit. VHS chambray laboris nga apagbiit nga veniam. Anim mollit minim commodo ullamco nga mga pusa nga gurruod.


Panagusar

Babaen kadagiti attribute ti datos

Tapno nalaka a mainayon ti kababalin ti scrollspy iti nabigasionmo iti topbar, inayonmo data-spy="scroll"laeng ti elemento a kayatmo nga espia (kaaduan a gagangay a daytoy koma ti bagi) ken data-target=".navbar"tapno pilien no ania a nav ti usarem. Kayatmo nga usaren ti scrollspy nga addaan iti .navcomponent.

  1. <bagi a datos-espia = "ag-scroll" datos-a-puntiria = ".navbar" > ... </body>

Babaen ti JavaScript

Awagan ti scrollspy babaen ti JavaScript:

  1. $ ( '#navbar' ). scrollspy nga () .
Ulo nga agpangato! Dagiti silpo ti Navbar ket masapul nga addaan kadagiti masolbar nga id a puntiria. Kas pagarigan, <a href="#home">home</a>masapul a katupag ti maysa a banag iti dom a kas iti <div id="home"></div>.

Dagiti Pamay-an

.scrollspy ('agpabaro') .

No agus-usar ti scrollspy a maikuyog ti pananginayon wenno panangikkat kadagiti elemento manipud iti DOM, kasapulam nga awagan ti pamay-an ti panagpabaro a kas iti kasta:

  1. $ ( '[datos-espia="ag-scroll"]' ). tunggal ( function () { .
  2. var $ espia = $ ( daytoy ). scrollspy ( 'pabaro' ) .
  3. });

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset="".

Nagan tipo default panangiladawan
offset nga bilang 10 nga Pixels nga offset manipud iti ngato no kalkularen ti posision ti scroll.

Dagiti Pasamak

Pasamak Panangiladawan
aktiboen Daytoy a pasamak ket agputok tunggal ti baro a banag ket agbalin nga aktibo babaen ti scrollspy.

Pagarigan dagiti tab

Inayon ti napardas, dinamiko a panagusar ti tab iti panagbalbaliw babaen dagiti pane ti lokal a linaon, urayno babaen dagiti dropdown a menu.

Raw denim dimo la ketdi nangngeg ida jean shorts Austin. Nesciunt tofu stumptown aliqua, retro nga sintet nga maestro nga pagdalus. Bigote cliche tempor, williamsburg carles nga vegan nga helvetica. Reprehenderit ti agkarkarnero retro keffiyeh ti mangtiliw ti tagtagainep synth. Cosby suéter eu banh mi, qui irure terry richardson dati nga pusit. Aliquip lugarat salvia cillum nga iphone. Seitan aliquip quis cardigan nga amerikano nga kawes, karnisero 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.


Panagusar

Pagbalinen dagiti tabbable a tab babaen ti JavaScript (tunggal tab ket kasapulan a mapaaktibo a saggaysa):

  1. $ ( '# ti Tab ko a' ). i-click ti ( funsion ( e ) { .
  2. e . lapdan tiDefault ();
  3. $ ( daytoy ). tab ( 'ipakita' );
  4. }) nga

Mabalinmo nga aktiboen dagiti indibidual a tab iti sumagmamano a wagas:

  1. $ ( '# ti Tabko a[href="#profile"]' ). tab ( 'ipakita' ); // Pilien ti tab babaen ti nagan
  2. $ ( '# ti Tab ko a:umuna' ). tab ( 'ipakita' ); // Pilien ti umuna a tab
  3. $ ( '# ti Tab ko a: maudi' ). tab ( 'ipakita' ); // Pilien ti maudi a tab
  4. $ ( '# ti Tab ko li: eq (2) a' ). tab ( 'ipakita' ); // Pilien ti maikatlo a tab (0-indexed) .

Panagmarka

Mabalinmo nga aktiboen ti tab wenno pildoras a nabigasion a dika agsurat iti aniaman a JavaScript babaen ti basta panangidatag data-toggle="tab"wenno data-toggle="pill"iti maysa nga elemento. Ti pananginayon ti navken nav-tabsdagiti klase iti tab ulket mangyaplikar ti estilo ti tab ti Bootstrap.

  1. <ul klase = "nav nav-tabs" >
  2. <li><a href = "#pagtaengan" data-toggle = "tab" > Pagtaengan </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Pakasaritaan </a></li>
  4. <li><a href = "#mensahe" data-toggle = "tab" > Dagiti mensahe </a></li>
  5. <li><a href = "#dagiti panagitunos" data-toggle = "tab" > Dagiti panagitunos </a></li>
  6. </ul>

Dagiti Pamay-an

$().tab nga

Paaktiboenna ti elemento ti tab ken container ti linaon. Ti tab ket rumbeng nga addaan iti maysa data-targetwenno maysa a hrefmangpuntiria iti maysa a container node iti DOM.

  1. <ul klase = "nav nav-tabs" id = "tabko" >
  2. <li klase = "aktibo" ><a href = "#pagtaengan" > Pagtaengan </a></li>
  3. <li><a href = "#profile" > Pakasaritaan </a></li>
  4. <li><a href = "#mensahe" > Dagiti mensahe </a></li>
  5. <li><a href = "#dagiti panagitunos" > Dagiti panagitunos </a></li>
  6. </ul>
  7.  
  8. <div klase = "linaon-tab" >
  9. <div klase = "aktibo ti tab-pane" id = "pagtaengan" > ... </div>
  10. <div klase = "tab-pane" id = "profile" > ... </div>
  11. <div klase = "tab-pane" id = "dagiti mensahe" > ... </div>
  12. <div klase = "tab-pane" id = "dagiti panagitunos" > ... </div>
  13. </div>
  14.  
  15. <iskrip>
  16. $ ( trabaho () { .
  17. $ ( '# ti Tab ko a: maudi' ). tab ( 'ipakita' );
  18. }) nga
  19. </script>

Dagiti Pasamak

Pasamak Panangiladawan
ipakita Daytoy a pasamak ket agpuor iti tab show, ngem sakbay a naipakita ti baro a tab. Usaren ti event.targetken event.relatedTargettapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
naipakita Daytoy a pasamak ket agpuor iti tab show kalpasan a naipakita ti maysa a tab. Usaren ti event.targetken event.relatedTargettapno puntiriaen ti aktibo a tab ken ti napalabas nga aktibo a tab (no adda) a nagsasaruno.
  1. $ ( 'a [datos-a-panagbalbaliw = "tab"]' ). on ( 'naipakita' , trabaho ( e ) {
  2. e . target // na-activate nga tab
  3. e . mainaig a Target // napalabas a tab
  4. }) nga

Dagiti pagarigan

Napaltiingan babaen ti nagsayaat a jQuery.tipsy plugin nga insurat ni Jason Frame; Dagiti tip ti ramit ket maysa a napabaro a bersion, a saan nga agpannuray kadagiti ladawan, agus-usar ti CSS3 para kadagiti animasion, ken dagiti data-attribute para iti lokal a pagipempenan ti paulo.

Para kadagiti rason ti panagaramid, ti tooltip ken popover data-apis ket opt ​​in, kayatna a sawen a masapul nga irugim a mismo dagitoy .

I-hover dagiti link iti baba tapno makita dagiti toltips:

Tight pants next level keffiyeh dimo la ketdi nangngeg. Photo booth barbas hilaw nga denim nga letterpress vegan nga mensahero nga bag stumptown. Talon-agingga-lamisaan seitan, mcsweeney's fixie sustainable quinoa 8-bit american a kawes addaan iti terry richardson vinyl chambray. Barbas stumptown, cardigans banh mi lomo dagiti gurruod a pusa. Tofu biodiesel williamsburg marfa, uppat a loko mcsweeney ti dalusan ti vegan a chambray. A talaga nga ironic nga artisano aniaman ti keytar , scenester talon-agingga-iti-lamisaan banksy Austin twitter handle freegan cred hilaw denim maymaysa-origin a kape viral.

Uppat a direksion

Tooltips kadagiti grupo ti input

No agus-usar kadagiti tooltip ken popovers kadagiti grupo ti input ti Bootstrap, masapul nga ikeddengmo ti container(nadokumento iti baba) a pagpilian tapno maliklikan dagiti di matarigagayan nga epekto.


Panagusar

I-trigger ti tooltip babaen ti JavaScript:

  1. $ ( '#pagarigan' ). tooltip ( dagiti pagpilian ) .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Nagan tipo default panangiladawan
animasion nga boolean nga agpayso iyaplikar ti css fade a panagbalbaliw iti tooltip
html nga boolean nga saan nga agpayso Ikabil ti html iti tooltip. No palso, ti pamay-an ti jquery textket mausarto a mangikabil ti linaon iti dom. Usaren ti teksto no madanaganka kadagiti panangraut ti XSS.
pannakaikabil kuerdas nga | amad 'ngato' no kasano nga iposision ti tooltip - ngato | baba | kanigid | kusto
agpili nga kuerdas saan nga agpayso No ti maysa a mangpili ket naited, dagiti banag ti tooltip ket maitedto kadagiti naikeddeng a puntiria.
titulo kuerdas nga | amad '' . default a pateg ti paulo no awan ti etiketa ti `title`
kalbiten kuerdas 'hover nga pokus'. no kasano a mai-trigger ti tooltip - i-klik ti | ag-hover nga | pokus | giya. Paliiwenyo ti kaso lumabas trigger mutliple, espasyo naisina, trigger kita.
itantan numero | banag 0 nga

delay ti panangiparang ken panangilemmeng ti tooltip (ms) - saan nga agaplikar iti manual a kita ti trigger

No naited ti numero, maipakat ti delay agpadpada iti hide/show

Ti estruktura ti banag ket:delay: { show: 500, hide: 100 }

pagkargaan kuerdas nga | saan nga agpayso saan nga agpayso

Inayon ti tooltip iti espesipiko nga elementocontainer: 'body'

Ulo nga agpangato! Dagiti pagpilian para kadagiti indibidual a toltip ket mabalin a alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos.

Panagmarka

  1. <a href = "#" data-toggle = "tip ti ramit" title = "umuna a tip ti ramit" > ag-hover iti rabawko </a>

Dagiti Pamay-an

$ (). tip ti ramit (dagiti pagpilian) .

Ikapet ti tooltip handler iti maysa a koleksion ti elemento.

.tooltip ('ipakita') .

Ipalgakna ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tooltip ( 'ipakita' ) .

.tooltip ('ilemmeng') .

Ilemmeng ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tip ti ramit ( 'ilemmeng' ) .

.tooltip ('agbalbaliw') .

I-toggle ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tip ti ramit ( 'agbaliwbaliw' ) .

.tooltip ('dadaelen') .

Ilemmeng ken dadaelenna ti tooltip ti maysa nga elemento.

  1. $ ( '#elemento' ). tooltip ( 'dadaelen' ) .

Dagiti pagarigan

Inayon dagiti babassit nga overlay ti linaon, kas kadagidiay adda iti iPad, iti aniaman nga elemento para iti balay a segundario nga impormasion. I-hover ti buton tapno mai-trigger ti popover. Masapul a mairaman ti Tooltip .

Estatiko nga popover

Uppat a pagpilian ti magun-odan: ngato, kannawan, baba, ken kannigid a naitunos.

Popover nga tuktok

Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo ​​quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.

Popover nga husto

Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo ​​quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.

Popover nga baba

Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo ​​quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.

Pimmanaw ni Popover

Sed posuere nga consectetur est iti lobortis. Aenean nga eu leo ​​quam. Pellentesque nga arkos ti lacinia quam venenatis vestibulum.

Awan ti marka a naipakita a kas dagiti popover ket napataud manipud iti JavaScript ken linaon iti uneg ti maysa nga dataattribute.

Agbiag nga demo

Uppat a direksion


Panagusar

Pagbalinen dagiti popover babaen ti JavaScript:

  1. $ ( '#pagarigan' ). popover ( dagiti pagpilian ) .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-animation="".

Nagan tipo default panangiladawan
animasion nga boolean nga agpayso iyaplikar ti css fade a panagbalbaliw iti tooltip
html nga boolean nga saan nga agpayso Ikabil ti html iti popover. No palso, ti pamay-an ti jquery textket mausarto a mangikabil ti linaon iti dom. Usaren ti teksto no madanaganka kadagiti panangraut ti XSS.
pannakaikabil kuerdas nga | amad 'kusto' kasano nga iposision ti popover - top | baba | kanigid | kusto
agpili nga kuerdas saan nga agpayso no ti maysa a mangpili ket naited, dagiti banag ti tooltip ket maitalek kadagiti naikeddeng a puntiria
kalbiten kuerdas 'i-click'. no kasano a mai-trigger ti popover - i-click ti | ag-hover nga | pokus | giya
titulo kuerdas nga | amad '' . ti kasisigud a pateg ti paulo no ti kabileg ti `titulo` ket awan
linaon kuerdas nga | amad '' . ti kasisigud a pateg ti linaon no ti `data-content` a kababalin ket awan
itantan numero | banag 0 nga

delay ti panangiparang ken panangilemmeng ti popover (ms) - saan nga agaplikar iti manual a kita ti trigger

No naited ti numero, maipakat ti delay agpadpada iti hide/show

Ti estruktura ti banag ket:delay: { show: 500, hide: 100 }

pagkargaan kuerdas nga | saan nga agpayso saan nga agpayso

Inayon ti popover iti espesipiko nga elementocontainer: 'body'

Ulo nga agpangato! Dagiti pagpilian para kadagiti indibidual a popover ket mabalin nga alternatibo a maikeddeng babaen ti panagusar kadagiti kababalin ti datos.

Panagmarka

Para kadagiti rason ti panagaramid, ti Tooltip ken Popover data-apis ket ag-opt in. No kayatmo nga usaren dagitoy ket mangibaga laeng ti maysa a pagpilian ti agpili.

Dagiti Pamay-an

$ ().popover (dagiti pagpilian) .

Mangrugi kadagiti popovers para iti maysa a koleksion ti elemento.

.popover('ipakita') .

Ipalgakna ti maysa nga elemento popover.

  1. $ ( '#elemento' ). popover ( 'ipakita' ) .

.popover('ilemmeng') .

Ilemmeng ti maysa nga elemento popover.

  1. $ ( '#elemento' ). popover ( 'paglemmeng' ) .

.popover ('agbaliwbaliw') .

Toggles ti maysa nga elemento popover.

  1. $ ( '#elemento' ). popover ( 'agbaliwbaliw' ) .

.popover('dadaelen') .

Ilemmeng ken dadaelenna ti popover ti maysa nga elemento.

  1. $ ( '#elemento' ). popover ( 'dadaelen' ) .

Pagarigan dagiti alerto

Inayon ti panagusar ti panangilaksid kadagiti amin a mensahe ti alerto babaen daytoy a plugin.

Nasantuan a guacamole! Best check yo self, saan ka nga nasayaat unay ti langam.

Oh snap! Naalamon ti biddut!

Baliwam daytoy ken dayta ken padasem manen. Duis mollis, est non commodo luctus, nisi erat nga porttitor ligula, eget lacinia odio sem nec elit. Ti cras mattis consectetur purus ket agtugaw iti amet fermentum.

Aramidenyo daytoy nga aramid Wenno aramiden daytoy


Panagusar

Pagbalinen ti pannakaikkat ti maysa nga alerto babaen ti JavaScript:

  1. $ ( ".alerto" ). alerto () .

Panagmarka

Inayon data-dismiss="alert"laeng iti close button-mo tapno automatiko a mangted iti alerto close functionality.

  1. <a klase = "serraan" data-dismiss = "alerto" href = "#" > × </a>

Dagiti Pamay-an

$ ().alerto () .

Balkotenna amin nga alerto nga addaan iti asideg a panagandar. Tapno dagiti alertom ket ag-animate out no naserraan, siguraduem nga addaanda iti .fadeken .inklase a dati a naipakat kadakuada.

.alert('serraan') .

Serraan ti maysa nga alerto.

  1. $ ( ".alerto" ). alerto ( 'serraan' ) .

Dagiti Pasamak

Ti klase ti alerto ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti alerto.

Pasamak Panangiladawan
iserra Daytoy a pasamak ket agputok a dagus no ti closepamay-an ti pagarigan ket maawagan.
naserraan Daytoy a pasamak ket mapaputok no ti alerto ket naiserra (urayenna dagiti panagbalbaliw ti css a makompleto).
  1. $ ( '#ti-alertok' ). bind ( 'naserraan' , trabaho () {
  2. // aramiden ti maysa a banag...
  3. }) nga

Pagarigan nga usaren

Aramiden ti ad-adu pay babaen kadagiti buton. Ibaga ti buton ti kontrol wenno mangpartuat kadagiti grupo dagiti buton para kadagiti ad-adu a paset a kas dagiti toolbar.

Stateful nga

Inayon data-loading-text="Loading..."tapno agusar ti kasasaad ti panagkarga iti maysa a buton.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Agkarga..." > Kasasaad ti panagkarga </button>

Maymaysa nga toggle

Inayon data-toggle="button"tapno mapaandar ti toggling iti maymaysa a buton.

  1. < kita ti buton = "buton" klase = "btn btn-pangruna" data-toggle = "buton" > Agmaymaysa a Panagbalbaliw </button>

Kahon ti tsek

Inayon data-toggle="buttons-checkbox"para iti panag-toggling ti estilo ti kahon ti tsek iti btn-group.

  1. <div klase = "btn-grupo" data-toggle = "kahon ti tsek dagiti buton" >
  2. < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannigid </button>
  3. < kita ti buton = "buton" klase = "btn btn-pangruna" > Tengnga </button>
  4. < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannawan </button>
  5. </div>

Radio nga

Inayon data-toggle="buttons-radio"para iti panag-toggling ti estilo ti radio iti btn-group.

  1. <div klase = "btn-grupo" data-toggle = "dagiti buton-radio" >
  2. < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannigid </button>
  3. < kita ti buton = "buton" klase = "btn btn-pangruna" > Tengnga </button>
  4. < tipo ti buton = "buton" klase = "btn btn-pangruna" > Kannawan </button>
  5. </div>

Panagusar

Pagbalinen dagiti buton babaen ti JavaScript:

  1. $ ( '.nav-tab' ). buton () .

Panagmarka

Dagiti attribute ti datos ket napateg iti plugin ti buton. Kitaen ti pagarigan a kodigo iti baba para kadagiti nadumaduma a kita ti marka.

Dagiti Pagpilian

Awan

Dagiti Pamay-an

$ (). buton ('ag-toggle') .

Toggles ti estado ti iduron. Ikkan ti buton ti langa a na-activate dayta.

Ulo nga agpangato! Mabalinmo nga ipalubos ti auto toggling ti maysa a buton babaen ti panagusar ti data-toggleattribute.
  1. < tipo ti buton = "buton" klase = "btn" data-toggle = "buton" > ... </buton>

$ (). buton ( 'agkarga') .

Itakderanna ti estado ti buton iti panagkarga - balbaliwanna ti buton ken isukat ti teksto iti panagkarga ti teksto. Ti panagkarga ti teksto ket rumbeng a maipalawag iti elemento ti buton babaen ti panagusar ti kabileg ti datos data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "agkarga ti bambanag..." > ... </button>
Ulo nga agpangato! Ti Firefox ket agtultuloy ti nabaldado a kasasaad iti ballasiw dagiti panagkarga ti panid . Ti maysa a pangliklik iti daytoy ket ti panagusar iti autocomplete="off".

$ (). buton ('i-reset') .

Isubli ti estado ti buton - isukat ti teksto iti orihinal a teksto.

$ ().buton (kuerdas) .

Isubli ti estado ti buton - agsinnukat ti teksto iti ania man a datos a naikeddeng nga estado ti teksto.

  1. <button type = "button" class = "btn" datos-kompleto-a-teksto = "nalpasen!" > ... </buton> nga
  2. <iskrip>
  3. $ ( '.btn' nga ). buton ( 'kompleto' ) .
  4. </script>

Maipapan

Mangala kadagiti batayan nga estilo ken nalaka a maibagay a suporta para kadagiti mai-collapsible a paset a kas dagiti akordeon ken nabigasion.

* Kasapulan a mairaman ti Transitions plugin.

Pagarigan ti akordeon

Babaen ti panagusar ti collapse plugin, nangaramidkami ti simple a widget ti estilo ti akordeon:

Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada accusamus labore sustainable VHS.
  1. <div klase = "akordeon" id = "akordeon2" >
  2. <div klase = "grupo-akordeon" >
  3. <div class = "paulo ti akordeon" >
  4. <a klase = "acordion-toggle" data-toggle = "ag-collapse" data-nagannak = "#akordeon2" href = "#ag-collapseMaysa" >
  5. Mabalin nga i-collapsible nga Grupo nga Item #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "panag-collapse ti bagi ti akordeon iti" >
  9. <div klase = "akordeon-akin-uneg" >
  10. Anim pariatur nga cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div klase = "grupo-akordeon" >
  15. <div class = "paulo ti akordeon" >
  16. <a klase = "acordion-toggle" data-toggle = "ag-collapse" data-nagannak = "#akordeon2" href = "#ag-collapseDua" >
  17. Ma-collapsible nga Grupo nga Item #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "panag-collapse ti bagi ti akordeon" >
  21. <div klase = "akordeon-akin-uneg" >
  22. Anim pariatur nga cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Mabalinmo met nga usaren ti plugin nga awan ti accordion markup. Mangaramid ti maysa a buton a mangbalbaliw ti panagpalawa ken panagreggaay ti sabali nga elemento.

  1. < tipo ti buton = "buton" klase = "btn btn-peggad" data-toggle = "panag-collapse" data-target = "#demo" >
  2. simple nga collapsible
  3. </button> nga
  4.  
  5. <div id = "demo" klase = "agtinnag iti" > ... </div>

Panagusar

Babaen kadagiti attribute ti datos

Basta add data-toggle="collapse"ken a data-targetto element tapno automatiko a mangituding ti kontrol ti maysa a collapsible nga elemento. Ti data-targetattribute ket umawat ti css selector a pangipakat ti collapse. Siguraduen nga inayon ti klase collapseiti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase in.

Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a kontrol, inayon ti kabileg ti datos data-parent="#selector". Kitaen ti demo tapno makita daytoy nga agtigtignay.

Babaen ti JavaScript

Pagbalinen a manual babaen ti:

  1. $ ( ".ag-collapse" ). agrupsa () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-parent="".

Nagan tipo default panangiladawan
nagannak agpili nga saan nga agpayso No agpili kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kaasping ti tradisional a kababalin ti akordeon) .
ag-toggle nga boolean nga agpayso I-toggles ti collapsible nga elemento iti inbokasion

Dagiti Pamay-an

.collapse(dagiti pagpilian) .

Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object.

  1. $ ( '# ti Makollap-ko' ). marpuog ({
  2. toggle : palso nga
  3. }) nga

.collapse ('agbalbaliw') .

I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng.

.collapse ('ipakita') .

Ipakita ti maysa a collapsible nga elemento.

.collapse('ilemmeng') .

Ilemmengna ti maysa a collapsible nga elemento.

Dagiti Pasamak

Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.

Pasamak Panangiladawan
ipakita Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
aglemmeng Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
naidulin Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti css a makompleto).
  1. $ ( '# ti Makollap-ko' ). on ( 'nalimed' , trabaho () {
  2. // aramiden ti maysa a banag...
  3. }) nga

Pagwadan

Maysa a batayan, nalaka a mapalawa a plugin para iti napardas a panagpartuat kadagiti elegante a typeahead nga addaan iti ania man a panagserrek ti teksto ti porma.

  1. < tipo ti panagserrek = "teksto" data-provide = "typeahead" >

Kayatmo nga ikeddeng autocomplete="off"tapno malapdan ti panagparang dagiti default a menu ti browser iti rabaw ti Bootstrap typeahead dropdown.


Panagusar

Babaen kadagiti attribute ti datos

Inayon dagiti kababalin ti datos tapno mangirehistro ti maysa nga elemento nga addaan iti panagusar ti typeahead a kas naipakita iti pagarigan iti ngato.

Babaen ti JavaScript

Awagan ti typeahead a manual babaen ti:

  1. $ ( '.ag-typeahead' ). i- typeahead () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-source="".

Nagan tipo default panangiladawan
pammataudan array, trabaho [ ] . Ti gubuayan ti datos a pagsaludsodan a maibusor. Mabalin a maysa nga array dagiti kuerdas wenno maysa a function. Ti panagandar ket maipasa ti dua nga argumento, ti querypateg iti tay-ak ti panagserrek ken ti processpanagayab manen. Ti panagandar ket mabalin a mausar a sinkrono babaen ti panangisubli ti taudan ti datos a direkta wenno asynchronous babaen ti processmaymaysa nga argumento ti panagayab manen.
dagiti banag bilang 8 nga Ti max a bilang dagiti banag a maiparang iti dropdown.
minKaatiddog bilang 1 nga Ti kabassitan a kaatiddog ​​ti karakter a kasapulan sakbay a mangtignay kadagiti singasing ti autocomplete
matcher nga amad di sensitibo iti kaso Ti pamay-an a maus-usar a mangikeddeng no ti maysa a saludsod ket maitunos iti maysa a banag. Awaten ti maymaysa nga argumento, ti itemkontra a pangsubok ti saludsod. Aksesen ti agdama a saludsod babaen ti this.query. Isubli ti boolean trueno ti saludsod ket maysa a panagtunos.
agsort nga amad eksakto a panagtunos,
sensitibo iti dakkel a letra, saan a
sensitibo iti dakkel a letra
Pamay-an a nausar a mangurnos kadagiti autocomplete a resulta. Awaten ti maymaysa nga argumento itemsken addaan ti sakop ti typeahead nga instansia. Reperensiaan ti agdama a saludsod babaen ti this.query.
updater nga amad isublina ti napili a banag Ti pamay-an a nausar a mangisubli iti napili a banag. Awaten ti maymaysa nga argumento, ti itemken addaan ti sakop ti typeahead nga instansia.
highlighter nga amad itampokna amin a default a panagtunos Pamay-an a nausar a mangitag-ay kadagiti autocomplete a resulta. Awaten ti maymaysa nga argumento itemken addaan ti sakop ti typeahead nga instansia. Rumbeng nga isublin ti html.

Dagiti Pamay-an

.typeahead(dagiti pagpilian) .

Mangrugi ti maysa nga input babaen ti typeahead.

Pagwadan

Ti subnabigasion iti kannigid ket maysa a live demo ti affix plugin.


Panagusar

Babaen kadagiti attribute ti datos

Tapno nalaka a mainayon ti affix behavior iti ania man nga elemento, basta inayon data-spy="affix"ti elemento a kayatmo nga espia. Kalpasanna agusar kadagiti offset tapno mangikeddeng no kaano nga i-toggle ti panag-pinning ti maysa nga elemento nga on ken off.

  1. <div datos-espia = "ikapet" datos-offset-ngato = "200" > ... </div>
Ulo nga agpangato! Masapul nga imaneharmo ti posision ti naipit nga elemento ken ti kababalin ti asideg a nagannakna. Ti posision ket kontrolado babaen ti affix, affix-top, ken affix-bottom. Laglagipem a kitaen ti mabalin a narba a nagannak no agkick in ti affix bayat nga ikkatenna ti linaon manipud iti normal nga ayus ti panid.

Babaen ti JavaScript

Awagan ti affix plugin babaen ti JavaScript:

  1. $ ( '#navbar' ). affix nga () .

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-offset-top="200".

Nagan tipo default panangiladawan
offset nga numero | trabaho | banag 10 nga Pixels nga offset manipud iti iskrin no kalkularen ti posision ti scroll. No maited ti maymaysa a numero, maipakat ti offset agpadpada iti ngato ken kannigid a direksion. Tapno dumngeg iti maymaysa a direksion, wenno adu a naisangsangayan nga offset, mangipaay laeng iti maysa a banag offset: { x: 10 }. Usaren ti maysa a panagandar no kasapulam ti dinamiko a mangipaay ti offset (mausar para kadagiti sumagmamano a makasungbat a disenio).