JavaScript

E hoʻolaʻa i nā ʻāpana o Bootstrap—i kēia manawa me 13 mau plugins jQuery maʻamau.

Hoʻokahi a i hui pū ʻia

Hiki ke hoʻopili paʻa ʻia nā plugins (ʻoiai ua makemake kekahi i nā hilinaʻi), a i ʻole nā ​​​​mea āpau i ka manawa hoʻokahi. Loaʻa iā bootstrap.js a me bootstrap.min.js nā plugins āpau i hoʻokahi faila.

Nā hiʻohiʻona ʻikepili

Hiki iā ʻoe ke hoʻohana i nā plugins Bootstrap āpau ma o ka markup API me ka ʻole o ke kākau ʻana i hoʻokahi laina o JavaScript. ʻO kēia ka API papa mua o Bootstrap a pono ʻoe e noʻonoʻo mua i ka wā e hoʻohana ai i kahi plugin.

ʻO kēlā ʻōlelo, i kekahi mau kūlana makemake paha e hoʻopau i kēia hana. No laila, hāʻawi pū mākou i ka hiki ke hoʻopau i ka API waiwai ʻikepili ma ka wehe ʻana i nā hanana āpau ma ke kino i hoʻopaʻa ʻia me `'data-api'`. Ua like kēia me kēia:

  1. $ ( 'kino' ). paʻa ( ' .data -api' )

ʻO kahi ʻē aʻe, no ka huli ʻana i kahi plugin kikoʻī, e hoʻopili wale i ka inoa o ka plugin ma ke ʻano he inoa inoa me ka inoa data-api e like me kēia:

  1. $ ( 'kino' ). pio ( ' .alert.data -api' )

API papahana

Manaʻo mākou e hiki iā ʻoe ke hoʻohana i nā plugins Bootstrap āpau ma o ka JavaScript API. ʻO nā API lehulehu āpau he ʻano hoʻokahi, hiki ke hoʻopaʻa ʻia, a hoʻihoʻi i ka hōʻiliʻili i hana ʻia.

  1. $ ( ".btn.danger" ). pihi ( "hoʻololi" ). addClass ( "momona" )

Pono nā ala āpau e ʻae i kahi mea koho koho, kahi kaula e kuhikuhi ana i kahi ala kūikawā, a i ʻole ʻole (e hoʻomaka ana i kahi plugin me ka hana paʻamau):

  1. $ ( "#myModal" ). modal () // hoʻomaka me nā mea paʻamau
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // i hoʻomaka me ka ʻole o ka papa keyboard
  3. $ ( "#myModal" ). modal ( 'hōʻike' ) // hoʻomaka a kāhea koke i ka hōʻike

Hōʻike pū kēlā me kēia plugin i kāna mea kūkulu maka ma kahi waiwai ʻo `Constructor`: $.fn.popover.Constructor. Inā makemake ʻoe e kiʻi i kahi laʻana plugin, e kiʻi pololei iā ia mai kahi mea: $('[rel=popover]').data('popover').

ʻAʻohe paio

I kekahi manawa pono e hoʻohana i nā plugins Bootstrap me nā ʻōnaehana UI ʻē aʻe. I kēia mau kūlana, hiki i nā hui hoʻopaʻa inoa ke hiki i kekahi manawa. Inā hiki kēia, hiki iā ʻoe ke kelepona .noConflicti ka plugin āu e makemake ai e hoʻihoʻi i ka waiwai o.

  1. var bootstrapButton = $ . fn . pihi . noConflict () // hoʻihoʻi $.fn.button i ka waiwai i hāʻawi mua ʻia
  2. $ . fn . bootstrapBtn = bootstrapButton // hāʻawi $().bootstrapBtn i ka hana bootstrap

Nā hanana

Hāʻawi ʻo Bootstrap i nā hanana maʻamau no ka hapa nui o nā hana kūʻokoʻa o ka plugin. ʻO ka mea maʻamau, hele mai kēia ma kahi ʻano infinitive a me nā mea i hala - kahi i hoʻomaka ai ka infinitive (ex. show) i ka hoʻomaka ʻana o kahi hanana, a ʻo kona ʻano participle i hala (ex. shown) ke hoʻomaka i ka pau ʻana o kahi hana.

Hāʻawi nā hanana infinitive āpau i ka hana preventDefault. Hāʻawi kēia i ka hiki ke hoʻopau i ka hoʻokō ʻana i kahi hana ma mua o ka hoʻomaka ʻana.

  1. $ ( '#myModal' ). ma ( 'hōʻike' , hana ( e ) {
  2. inā (! ʻikepili ) hoʻihoʻi e . preventDefault () // ho'ōki i ka hōʻike ʻana i ka modal
  3. })

E pili ana i nā hoʻololi

No nā hopena hoʻololi maʻalahi, e hoʻokomo i ka bootstrap-transition.js me nā faila JS ʻē aʻe. Inā ʻoe e hoʻohana nei i ka bootstrap.js i hōʻuluʻulu ʻia, ʻaʻohe pono e hoʻokomo i kēia—aia ma laila.

Hoʻohana i nā hihia

ʻO kekahi mau hiʻohiʻona o ka plugin transition:

  • Hehe a mae paha i nā modals
  • ʻO ka pau ʻana o nā papa
  • ʻO nā makaʻala e nalowale ana
  • ʻO nā ʻaoʻao carousel sliding

Nā laʻana

Hoʻopili ʻia nā modals, akā maʻalahi, nā kamaʻilio me ka liʻiliʻi o ka hana pono a me nā paʻamau akamai.

Laʻana paʻa

He ʻano hana i hāʻawi ʻia me ke poʻo, ke kino, a me nā ʻano hana ma ka wāwae.

  1. <div class = "ʻalo huna kālā" >
  2. <div class = "modal-header" >
  3. < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "modal" aria-huna = "ʻoiaʻiʻo" > & manawa; </ pihi>
  4. <h3> Ke poʻo kumu </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Hoʻokahi kino maikaʻi… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Pani </a>
  11. <a href = "#" class = "btn btn-primary" > E mālama i nā hoʻololi </a>
  12. </div>
  13. </div>

Demo ola

E hoʻololi i kahi modal ma o JavaScript ma ke kaomi ʻana i ke pihi ma lalo. E paheʻe ia i lalo a mae mai ka piko o ka ʻaoʻao.

  1. <!-- Pākuʻi e hoʻomaka i ke ʻano -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Hoʻokuʻu i ke ʻano demo </a>
  3.  
  4. <!-- Modal -->
  5. <div id = "myModal" class = "mode huna fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-huna = "ʻoiaʻiʻo" >
  6. <div class = "modal-header" >
  7. < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "modal" aria-huna = "ʻoiaʻiʻo" > × </ pihi>
  8. <h3 id = "myModalLabel" > Poʻomanaʻo kumu </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Hoʻokahi kino maikaʻi… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "ʻoiaʻiʻo" > pani </ pihi>
  15. <button class = "btn btn-primary" > E mālama i nā loli </button>
  16. </div>
  17. </div>

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

E ho'ā i kahi modal me ke kākau ʻole i ka JavaScript. Hoʻonoho ʻia data-toggle="modal"ma kahi mea hoʻoponopono, e like me ke pihi, me kahi data-target="#foo"a href="#foo"i ʻole e kuhikuhi i kahi ʻano kikoʻī e hoʻololi.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Launch modal </button>

Ma o JavaScript

Kāhea i kahi modal me ka id myModalme kahi laina o JavaScript:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-backdrop="".

inoa ʻano ʻano paʻamau wehewehe
kāʻei kua boolean ʻoiaʻiʻo Loaʻa i kahi ʻāpana modal-backdrop. ʻO kahi ʻē aʻe, e kuhikuhi statici kahi backdrop ʻaʻole i pani i ka modal ma ke kaomi.
keyboard boolean ʻoiaʻiʻo Pani i ka modal ke kaomi ʻia ke kī pakele
hōʻike boolean ʻoiaʻiʻo Hōʻike i ka modal i ka wā i hoʻomaka ai.
mamao alahele wahahee

Inā hāʻawi ʻia kahi url mamao, e hoʻouka ʻia ka ʻike ma o ke ʻano o jQuery loada hoʻokomo ʻia i loko o ka .modal-body. Inā ʻoe e hoʻohana nei i ka data api, hiki iā ʻoe ke hoʻohana i ka hrefhōʻailona e kuhikuhi i ke kumu mamao. Hōʻike ʻia kahi laʻana o kēia ma lalo.

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

Nā ʻano hana

.modal(koho)

Ho'ā i kāu ʻike ma ke ʻano he modal. ʻAe i kahi koho koho object.

  1. $ ( '#myModal' ). ʻano ({
  2. keyboard : wahahee
  3. })

.modal('hoʻololi')

Hoʻololi lima i kahi ʻano.

  1. $ ( '#myModal' ). modal ( 'hoʻololi' )

.modal('hōʻike')

Wehe lima ia i kahi modal.

  1. $ ( '#myModal' ). modal ( 'hōʻike' )

.modal('huna')

Hūnā lima ʻia kahi ʻano.

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

Nā hanana

Hōʻike ka papa modal Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana modal.

Hanana wehewehe
hōʻike Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai ka modal i ka mea hoʻohana (e kali no ka hoʻopau css e hoʻopau).
huna Hoʻopau koke ʻia kēia hanana i ka wā hidei kāhea ʻia ai ke ʻano hana.
hunaia Hoʻopau ʻia kēia hanana i ka pau ʻana o ka huna ʻana o ka modal mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o css).
  1. $ ( '#myModal' ). ma ( 'huna' , hana () {
  2. // hana i kekahi mea…
  3. })

Laʻana ma navbar

ʻO ka plugin ScrollSpy no ka hoʻonui ʻokoʻa ʻana i nā pahuhopu nav e pili ana i ke kūlana scroll. E ʻōwili i ka ʻāpana ma lalo o ka navbar a nānā i ka loli o ka papa hana. E hōʻike ʻia nā mea kikoʻī i lalo.

@momona

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ma mua o ko lākou kūʻai ʻana aku. Tumblr farm-to-table bike rights i kēlā me kēia mea. Anim keffiyeh carles cardigan. ʻO ka pahu kiʻi a Velit seitan mcsweeney 3 wolf moon irure. ʻO Cosby sweater lomo jean shorts, williamsburg hoodie minim qui ʻaʻole paha ʻoe i lohe iā lākou a me ka 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 umiumi. ʻO ka ʻumiʻumi Aliqua cupidatat ka vero a mcsweeney. Cupidatat eha loko nisi, ea helvetica nulla carles. Kalaka meaʻai cosby sweater tattooed, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. ʻO Brooklyn adipisicing craft beer vice keytar deserunt.

ʻekahi

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Loaʻa nā kuleana paʻa paikikala ʻo Lomo i hoʻopaʻa ʻia i ka banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. ʻO Vero VHS ka hoʻololi. Consectetur kekahi ʻeke ʻelele liʻiliʻi DIY. Cred ex in, hoʻomau delectus consectetur fanny pack iphone.

ʻelua

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 whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats ʻaʻole paha ʻoe i lohe no lākou consequat hoodie gluten-free lo-fi fap aliquip. Ma mua o ke kūʻai ʻia ʻana aku, ʻo 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.


Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

No ka hoʻohui maʻalahi i ka hana scrollspy i kāu hoʻokele topbar, e hoʻohui wale data-spy="scroll"i ka mea āu e makemake ai e mākaʻikaʻi (ʻo ka mea maʻamau ʻo ia ke kino) a data-target=".navbar"koho i ka nav e hoʻohana ai. Makemake ʻoe e hoʻohana i ka scrollspy me kahi ʻāpana .nav.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Ma o JavaScript

Kāhea i ka scrollspy ma o JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Nā poʻo i luna! Pono nā loulou Navbar i nā pahuhopu id hiki ke hoʻoholo. No ka laʻana, <a href="#home">home</a>pono e pili i kekahi mea i loko o ka dom e like me <div id="home"></div>.

Nā ʻano hana

.scrollspy('refresh')

Ke hoʻohana nei i ka scrollspy me ka hoʻohui a wehe ʻana paha i nā mea mai ka DOM, pono ʻoe e kāhea i ke ʻano hoʻomaha e like me:

  1. $ ( '[data-spy="scroll"]' ). kēlā me kēia ( hana () {
  2. var $spy = $ ( keia ). scrollspy ( 'refresh' )
  3. });

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset="".

inoa ʻano ʻano paʻamau wehewehe
offset helu 10 Pikika e hoʻoneʻe mai luna mai ke helu ʻana i ke kūlana o ka ʻōwili.

Nā hanana

Hanana wehewehe
hoʻoikaika Hoʻomaka kēia hanana i ka wā e hoʻāla ʻia ai kahi mea hou e ka scrollspy.

Nā pahu laʻana

E hoʻohui i ka hana papa kuhikuhi wikiwiki a hoʻoikaika i ka hoʻololi ʻana ma nā pane o ka ʻike kūloko, ʻoiai ma o nā menus dropdown.

ʻAʻole paha ʻoe i lohe iā lākou ʻo Jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. ʻO ka ʻūhā cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan ʻaʻahu ʻAmelika, 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.


Hoʻohana

E hoʻā i nā ʻaoʻao papa ma o JavaScript (pono e hoʻāla ʻia kēlā me kēia ʻaoʻao):

  1. $ ( '#myTab a' ). kaomi ( hana ( e ) {
  2. e . preventDefault ();
  3. $ ( keia ). tab ( 'hōʻike' );
  4. })

Hiki iā ʻoe ke hoʻāla i nā pā pākahi ma nā ʻano he nui:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'hōʻike' ); // E koho i ka papa ma ka inoa
  2. $ ( '#myTab a:mua' ). tab ( 'hōʻike' ); // E koho i ka papa mua
  3. $ ( '#myTab a:hope' ). tab ( 'hōʻike' ); // E koho i ka papa hope
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'hōʻike' ); // Koho i ka papa ʻekolu (0-indexed)

Markup

Hiki iā ʻoe ke hoʻoikaika i ka ʻaoʻao a i ʻole ka hoʻokele pila me ka kākau ʻole ʻana i kekahi JavaScript ma ke kuhikuhi wale ʻana a i data-toggle="tab"ʻole data-toggle="pill"ma kahi mea. ʻO ka hoʻohui ʻana i nā papa nava me nav-tabsnā papa i ka pā ule hoʻopili i ke kāʻei Bootstrap tab.

  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" > Profile </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Nā memo </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Nā hoʻonohonoho </a></li>
  6. </ul>

Nā ʻano hana

$().tab

Ho'ā i ka ʻeleʻele tab a me ka ipu maʻiʻo. data-targetPono e loaʻa i ka Tab hrefkahi pahu pahu pahu ma ka DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profile </a></li>
  4. <li><a href = "#messages" > Nā memo </a></li>
  5. <li><a href = "#settings" > Nā hoʻonohonoho </a></li>
  6. </ul>
  7.  
  8. <div class = "ʻaoʻao-papa" >
  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 = "nā hoʻonohonoho" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( hana () {
  17. $ ( '#myTab a:hope' ). tab ( 'hōʻike' );
  18. })
  19. </script>

Nā hanana

Hanana wehewehe
hōʻike Hoʻomaka kēia hanana ma ka hōʻike pā, akā ma mua o ka hōʻike ʻia ʻana o ka pā hou. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
hōʻike ʻia Hoʻomaka kēia hanana ma ka hōʻike pā ma hope o ka hōʻike ʻia ʻana o kahi pā. E hoʻohana event.targeta event.relatedTargete hoʻopaʻa i ka pā hana a me ka pā hana mua (inā loaʻa).
  1. $ ( 'a[data-toggle="tab"]' ). ma ( 'hōʻike' , hana ( e ) {
  2. e . pahu hopu // i hoʻāla ʻia
  3. e . relatedTarget // tab mua
  4. })

Nā laʻana

Hoʻoulu ʻia e ka plugin jQuery.tipsy maikaʻi loa i kākau ʻia e Jason Frame; He mana hou ʻo Tooltips, ʻaʻole hilinaʻi i nā kiʻi, hoʻohana i ka CSS3 no nā animation, a me nā ʻano ʻikepili no ka mālama ʻana i nā poʻo inoa kūloko.

No nā kumu hana, ua koho ʻia ka tooltip a me ka popover data-apis, ʻo ia hoʻi , pono ʻoe e hoʻomaka iā ʻoe iho .

E kau ma luna o nā loulou ma lalo nei e ʻike i nā ʻōlelo kōkua:

ʻAʻole paha ʻoe i lohe iā lākou. Paʻi kiʻi umiumi maka denim letterpress vegan messenger bag stumptown. Loaʻa iā mcsweeney's fixie sustainable quinoa 8-bit ʻaʻahu ʻAmelika kahi terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, eha loko mcsweeney's cleanse vegan chambray. He kanaka hana hoʻohenehene i kēlā me kēia keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

ʻEhā kuhikuhi

Nā mea kōkua ma nā pūʻulu hoʻokomo

I ka hoʻohana ʻana i nā hāmeʻa a me nā popovers me nā pūʻulu komo Bootstrap, pono ʻoe e hoʻonohonoho i ke containerkoho (i kākau ʻia ma lalo) e pale i nā hopena ʻaoʻao makemake ʻole.


Hoʻohana

E hoʻomaka i ka mea hana ma o JavaScript:

  1. $ ( '#example' ). mea kōkua ( koho )

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-animation="".

inoa ʻano ʻano paʻamau wehewehe
hoʻouluulu boolean ʻoiaʻiʻo e hoʻopili i kahi hoʻololi css fade i ka mea hana
html boolean wahahee E hoʻokomo i ka html i loko o ka mea hana. Inā he wahaheʻe, e hoʻohana ʻia ke ʻano o jquery texte hoʻokomo i ka ʻike i loko o ka dom. E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS.
hoʻokomo kaula | hana 'luna' pehea e hoʻonoho ai i ka mea hana - top | lalo | waiho | akau
mea koho kaulahao wahahee Inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea hāmeʻa i nā pahuhopu i kuhikuhi ʻia.
inoa kaula | hana '' ka waiwai poʻo inoa paʻamau inā ʻaʻole i loaʻa ka tag `title`
hoʻomaka kaulahao 'hover focus' pehea e hoʻoulu ʻia ai ka mea hana - kaomi | e hoolana | makaikai | manual. E hoʻomaopopo iā ʻoe i ka hihia pass trigger mutliple, space seperated, trigger type.
lohi helu | mea 0

hoʻokaʻulua i ka hōʻike ʻana a hūnā i ka mea hana (ms) - ʻaʻole pili i ke ʻano hoʻoiho manual

Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua

ʻO ka hoʻolālā mea:delay: { show: 500, hide: 100 }

ipu kaula | wahahee wahahee

Hoʻopili i ka mea hana i kahi mea kikoʻīcontainer: 'body'

Nā poʻo i luna! Hiki ke koho ʻia nā koho no nā ʻōlelo aʻoaʻo hoʻokahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > lele ma luna oʻu </a>

Nā ʻano hana

$().mea hana (koho)

Hoʻopili i kahi mea hoʻohana mea hana i kahi hōʻiliʻili mea.

.tooltip('hōʻike')

Hōʻike i ka ʻōlelo kōkua o kahi mea.

  1. $ ( '#element' ). mea kōkua ( 'hōʻike' )

.tooltip('huna')

Hūnā i ka ʻōlelo aʻoaʻo mea paahana.

  1. $ ( '#element' ). mea kōkua ( 'huna' )

.tooltip('hoʻololi')

Hoʻololi i ka ʻōlelo kōkua o kekahi mea.

  1. $ ( '#element' ). mea kōkua ( 'hoʻololi' )

.tooltip('destroy')

Hūnā a hoʻopau i ka mea paahana o kahi mea.

  1. $ ( '#element' ). mea hana ( 'hoʻopau' )

Nā laʻana

Hoʻohui i nā ʻāpana liʻiliʻi o ka ʻike, e like me nā mea ma ka iPad, i kekahi mea no ka ʻike lua hale. E kau ma luna o ke pihi e hoʻomaka i ka popover. Pono e hoʻokomo ʻia i ka Tooltip .

Paʻa popover

Loaʻa nā koho ʻehā: luna, ʻākau, lalo, a hema.

Popover luna

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover akau

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover lalo

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Ua haʻalele ʻo Popover

Hiki ke hoʻopaʻa ʻia ma ka lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

ʻAʻohe māka i hōʻike ʻia ma ke ʻano he popovers i hana ʻia mai JavaScript a me ka ʻike i loko o kahi dataʻano.

Demo ola

ʻEhā kuhikuhi


Hoʻohana

E ho'ā i nā popovers ma o JavaScript:

  1. $ ( '#example' ). popover ( koho )

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-animation="".

inoa ʻano ʻano paʻamau wehewehe
hoʻouluulu boolean ʻoiaʻiʻo e hoʻopili i kahi hoʻololi css fade i ka mea hana
html boolean wahahee E hoʻokomo i ka html i loko o ka popover. Inā he wahaheʻe, e hoʻohana ʻia ke ʻano o jquery texte hoʻokomo i ka ʻike i loko o ka dom. E hoʻohana i ka kikokikona inā hopohopo ʻoe e pili ana i ka hoʻouka kaua XSS.
hoʻokomo kaula | hana 'akau' pehea e hoʻonoho ai i ka popover - top | lalo | waiho | akau
mea koho kaulahao wahahee inā hāʻawi ʻia kahi mea koho, e hāʻawi ʻia nā mea hāmeʻa i nā pahuhopu i kuhikuhi ʻia
hoʻomaka kaulahao ' kaomi ' pehea e hoʻomaka ai ka popover - kaomi | e hoolana | makaikai | manual
inoa kaula | hana '' ka waiwai poʻo inoa paʻamau inā ʻaʻole i loaʻa ke ʻano `title`
maʻiʻo kaula | hana '' waiwai maʻiʻo paʻamau inā ʻaʻole i loaʻa ke ʻano `data-content`
lohi helu | mea 0

hoʻokaʻulua i ka hōʻike ʻana a hūnā i ka popover (ms) - ʻaʻole pili i ke ʻano hoʻoiho manual

Inā hāʻawi ʻia kahi helu, hoʻopili ʻia ka lohi i ka huna/hōʻike ʻelua

ʻO ka hoʻolālā mea:delay: { show: 500, hide: 100 }

ipu kaula | wahahee wahahee

Hoʻopili i ka popover i kahi mea kikoʻīcontainer: 'body'

Nā poʻo i luna! Hiki ke koho ʻia nā koho no nā popovers pākahi ma o ka hoʻohana ʻana i nā ʻano ʻikepili.

Markup

No nā kumu hana, ua koho ʻia ka Tooltip a me Popover data-apis.

Nā ʻano hana

$().popover(koho)

Hoʻomaka i nā popovers no kahi hōʻiliʻili mea.

.popover('hōʻike')

Hōʻike i kahi mea popover.

  1. $ ( '#element' ). popover ( 'hōʻike' )

.popover('huna')

Hūnā i ka popover element.

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

.popover('hoʻololi')

Hoʻololi i ka popover element.

  1. $ ( '#element' ). popover ( 'hoʻololi' )

.popover('destroy')

Huna a luku i ka popover o kekahi mea.

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

Hoʻolaha laʻana

Hoʻohui i nā hana hoʻokuʻu i nā memo makaʻala a pau me kēia plugin.

Guacamole hemolele! ʻO ka nānā maikaʻi iā ʻoe iho, ʻaʻole maikaʻi ʻoe.

ʻŌ! Loaʻa iā ʻoe kahi hewa!

E hoʻololi i kēia a me kēlā a hoʻāʻo hou. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus noho amet fermentum.

E lawe i kēia hana A i ʻole e hana i kēia


Hoʻohana

E ʻae i ka wehe ʻana i kahi makaʻala ma o JavaScript:

  1. $ ( ".alert" ). makaʻala ()

Markup

E hoʻohui wale data-dismiss="alert"i kāu pihi pani e hāʻawi ʻakomi i kahi hana kokoke.

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

Nā ʻano hana

$().alert()

Hoʻopili i nā mākaʻikaʻi āpau me ka hana kokoke. I mea e hoʻolalelale ai kāu mau makaʻala i ka wā i pani ʻia ai, e ʻike pono ua pili ka papa .fadea me .inka papa iā lākou.

.alert('kokoke')

Pani i kahi makaʻala.

  1. $ ( ".alert" ). makaʻala ( 'close' )

Nā hanana

Hōʻike ka papa makaʻala o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana makaʻala.

Hanana wehewehe
pili Hoʻomaka koke kēia hanana i ke closekāhea ʻia ʻana o ke ʻano hana.
pani ʻia Hoʻopau ʻia kēia hanana i ka wā i pani ʻia ai ka makaʻala (e kali no ka hoʻololi ʻana o css).
  1. $ ( '#my-alert' ). hoʻopaʻa ( 'pani ' , hana () {
  2. // hana i kekahi mea…
  3. })

Hoʻohana laʻana

E hana hou me nā pihi. Hōʻike ka pihi mana a i ʻole hana i nā pūʻulu o nā pihi no nā ʻāpana ʻē aʻe e like me nā hāmeʻa.

Stateful

Hoʻohui data-loading-text="Loading..."e hoʻohana i kahi kūlana hoʻouka ma kahi pihi.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Ke hoʻouka nei..." > Moku'āina hoʻouka </button>

Hoʻololi hoʻokahi

Pākuʻi data-toggle="button"e hoʻā i ka hoʻololi ʻana ma ke pihi hoʻokahi.

  1. <pākuʻi type = "kī" class = "btn btn-primary" data-toggle = "button" > Hoʻokahi Toggle </button>

Pahu koho

Pākuʻi data-toggle="buttons-checkbox"no ka hoʻololi ʻana i ke ʻano pahu pahu ma ka hui btn.

  1. <div class = "btn-group" data-toggle = "nā pihi-pahu" >
  2. < ʻano kī = "pākuʻi" papa = "btn btn-mua" > hema </ pihi>
  3. < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > Waena </ pihi>
  4. < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > ʻĀkau </ pihi>
  5. </div>

Lekiō

Hoʻohui data-toggle="buttons-radio"no ka hoʻololi ʻana i ke ʻano lekiō ma ka hui btn.

  1. <div class = "btn-group" data-toggle = "nā pihi-radio" >
  2. < ʻano kī = "pākuʻi" papa = "btn btn-mua" > hema </ pihi>
  3. < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > Waena </ pihi>
  4. < ʻano kī = "pākuʻi" papa = "btn btn-kumu mua" > ʻĀkau </ pihi>
  5. </div>

Hoʻohana

E ho'ā i nā pihi ma o JavaScript:

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

Markup

Hoʻohui ʻia nā ʻikepili ʻikepili i ka plugin pihi. E nānā i ka code code ma lalo no nā ʻano markup like ʻole.

Nā koho

ʻAʻohe

Nā ʻano hana

pihi $().('hoʻololi')

Hoʻololi i ke kūlana pana. Hāʻawi i ke pihi i ke ʻano ua hoʻāla ʻia.

Nā poʻo i luna! Hiki iā ʻoe ke hoʻololi i ke pihi ʻokoʻa me ka hoʻohana ʻana i ke data-toggleʻano.
  1. < ʻano kī = "pāpā" papa = "btn" data-toggle = "pāpā" > </ pihi>

pihi $().('hoʻouka')

Hoʻonohonoho i ke kūlana pihi i ka hoʻouka ʻana - hoʻopau i ke pihi a hoʻololi i ke kikokikona i ka hoʻouka ʻana i ke kikokikona. Pono e wehewehe ʻia ka hoʻouka ʻana i ke kikokikona ma ka ʻāpana pihi me ka hoʻohana ʻana i ke ʻano ʻikepili data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "hoʻouka mea..." > ... </ pihi>
Nā poʻo i luna! Ke hoʻomau nei ʻo Firefox i ka mokuʻāina kīnā ma nā hoʻouka ʻaoʻao . ʻO kahi hoʻoponopono no kēia ka hoʻohana ʻana autocomplete="off".

pihi $().('reset')

Hoʻoponopono hou i ke kūlana pihi - hoʻololi i ke kikokikona i ka kikokikona kumu.

$(). pihi(string)

Hoʻihoʻi hou i ke kūlana pihi - hoʻololi i ke kikokikona i kekahi kūlana kikokikona i wehewehe ʻia.

  1. < ʻano kī = "kī" papa = "btn" data-complete-text = "ua pau!" > ... </ pihi>
  2. <script>
  3. $ ( '.btn' ). pihi ( 'complete' )
  4. </script>

E pili ana

E kiʻi i nā ʻano kumu a me ke kākoʻo maʻalahi no nā mea hiki ke hoʻoheheʻe ʻia e like me nā accordions a me ka hoʻokele.

* Pono e hoʻokomo i ka plugin Transitions.

Laʻana accordion

Ke hoʻohana nei i ka collapse plugin, kūkulu mākou i kahi widget style accordion maʻalahi:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kaʻa meaʻai quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kau i ka manu ma luna o ka hee hoʻokahi kumu kope nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ʻaʻole paha ʻoe i lohe iā lākou accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kaʻa meaʻai quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kau i ka manu ma luna o ka hee hoʻokahi kumu kope nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ʻaʻole paha ʻoe i lohe iā lākou accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kaʻa meaʻai quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kau i ka manu ma luna o ka hee hoʻokahi kumu kope nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt ʻaʻole paha ʻoe i lohe iā lākou accusamus labore sustainable VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. ʻImimi hui hiki ke ʻohi ʻia #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur cliche...
  11. </div>
  12. </div>
  13. </div>
  14. <div papa = "accordion-group" >
  15. <div papa = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. ʻImimi hui hiki ke hoʻopili ʻia #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body collapse" >
  21. <div papa = "accordion-inner" >
  22. Anim pariatur cliche...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Hiki iā ʻoe ke hoʻohana i ka plugin me ka ʻole o ka accordion markup. E hana i kahi pihi hoʻololi i ka hoʻonui ʻana a me ka hāʻule ʻana o kekahi mea ʻē aʻe.

  1. < ʻano kī = "pāpā" papa = "btn btn-pilikia" data- toggle = "hōʻuluʻulu " data-target = "#demo" >
  2. maʻalahi hiki ke collapsible
  3. </ pihi>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

E hoʻohui wale data-toggle="collapse"a me ka mea data-targeti ka mea e hoʻonoho ʻakomi i ka mana o kahi mea hiki ke collapsible. ʻAe ke data-targetʻano i kahi koho css e hoʻopili ai i ka hāʻule. E hōʻoia e hoʻohui i ka papa collapsei ka mea hiki ke collapsible. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou in.

No ka hoʻohui ʻana i ka hoʻokele hui e like me ka accordion i kahi mana collapsible, e hoʻohui i ke ʻano ʻikepili data-parent="#selector". E nānā i ka demo e ʻike i kēia i ka hana.

Ma o JavaScript

E ho'ā me ka lima me:

  1. $ ( ".collapse" ). hāʻule ()

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-parent="".

inoa ʻano ʻano paʻamau wehewehe
makua mea koho wahahee Inā koho ʻia, e pani ʻia nā mea hiki ke hoʻoheheʻe ʻia ma lalo o ka makua i ʻōlelo ʻia ke hōʻike ʻia kēia mea hiki. (e like me ka hana accordion kuʻuna)
hoʻololi boolean ʻoiaʻiʻo Hoʻololi i ka mea hiki ke collapsible ma ke kāhea ʻana

Nā ʻano hana

.collapse(koho)

Ho'ā i kāu ʻike ma ke ʻano he mea hiki ke collapsible. ʻAe i kahi koho koho object.

  1. $ ( '#myCollapsible' ). hāʻule ({
  2. hoololi : wahahee
  3. })

.collapse('toggle')

Hoʻololi i kahi mea hiki ke hōʻike ʻia a hūnā ʻia paha.

.collapse('hōʻike')

Hōʻike i kahi mea hiki ke collapsible.

.collapse('huna')

Hūnā i kahi mea hiki ke collapsible.

Nā hanana

Hōʻike ka papa hāʻule o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana hāʻule.

Hanana wehewehe
hōʻike Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai kahi mea hāʻule i ka mea hoʻohana (e kali no ka pau ʻana o nā hoʻololi css).
huna Hoʻopau koke ʻia kēia hanana ke hidekāhea ʻia ke ʻano.
hunaia Hoʻopau ʻia kēia hanana i ka wā i hūnā ʻia ai kahi mea hāʻule mai ka mea hoʻohana (e kali i ka hoʻololi ʻana o css).
  1. $ ( '#myCollapsible' ). ma ( 'huna' , hana () {
  2. // hana i kekahi mea…
  3. })

Laʻana

ʻO kahi plugin maʻalahi i hoʻonui ʻia no ka hana wikiwiki ʻana i nā typeaheads nani me nā ʻano kikokikona.

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

Makemake ʻoe e hoʻonohonoho autocomplete="off"i ka pale ʻana i nā menus browser paʻamau mai ka ʻike ʻia ʻana ma luna o ka hāʻule ʻana o Bootstrap typeahead.


Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui i nā hiʻohiʻona ʻikepili e hoʻopaʻa inoa i kahi mea me ka hana typeahead e like me ka hōʻike ʻana ma ka laʻana ma luna.

Ma o JavaScript

Kāhea lima ʻia ke poʻo kikokiko me:

  1. $ ( '.typeahead' ). poʻomanaʻo ()

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-source="".

inoa ʻano ʻano paʻamau wehewehe
kumu laha, hana [ ] ʻO ke kumu ʻikepili e nīnau ai. He ʻano laina a i ʻole kahi hana. Hoʻoholo ʻia ka hana i ʻelua hoʻopaʻapaʻa, ka querywaiwai ma ke kahua hoʻokomo a me ka processcallback. Hiki ke hoʻohana like ʻia ka hana ma ka hoʻihoʻi pololei ʻana i ke kumu ʻikepili a i ʻole asynchronously ma o ka processhoʻopaʻapaʻa hoʻokahi o ka callback.
mau mea helu 8 Ka helu kiʻekiʻe o nā mea e hōʻike ʻia ma ka hāʻule iho.
minLength helu 1 Pono ka lōʻihi liʻiliʻi ma mua o ka hoʻomaka ʻana i nā manaʻo hoʻopiha piha
mea hoʻokūkū hana hihia ʻole ʻO ke ala i hoʻohana ʻia e hoʻoholo ai inā pili kekahi nīnau i kahi mea. ʻAe ʻo ia i kahi hoʻopaʻapaʻa hoʻokahi, ʻo itemia ka mea e hoʻāʻo ai i ka nīnau. E komo i ka nīnau o kēia manawa me this.query. E hoʻihoʻi i kahi boolean trueinā pili ka nīnau.
mea hoʻokaʻawale hana kūlike pololei,
hihia pili,
hihia ʻole
Hoʻohana ʻia no ka hoʻokaʻawale ʻana i nā hopena autocomplete. E ʻae i kahi hoʻopaʻapaʻa hoʻokahi itemsa loaʻa iā ia ka laulā o ka laʻana typeahead. E kuhikuhi i ka nīnau o kēia manawa me this.query.
mea hoʻopuka hou hana hoʻihoʻi i ka mea i koho ʻia ʻO ke ala i hoʻohana ʻia e hoʻihoʻi i ka mea i koho ʻia. E ʻae i kahi hoʻopaʻapaʻa hoʻokahi, ʻo ka itema loaʻa ka laulā o ka laʻana typeahead.
mea hōʻailona hana hōʻike i nā pāʻani paʻamau a pau Hoʻohana ʻia ke ʻano no ka hōʻike ʻana i nā hopena autocomplete. E ʻae i kahi hoʻopaʻapaʻa hoʻokahi itema loaʻa iā ia ka laulā o ka laʻana typeahead. Pono e hoʻihoʻi i ka html.

Nā ʻano hana

.typeahead(koho)

Hoʻomaka i kahi hoʻokomo me kahi poʻo kikokiko.

Laʻana

ʻO ka subnavigation ma ka hema he demo ola o ka plugin affix.


Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

No ka hoʻohui maʻalahi i ka hana affix i kekahi mea, e hoʻohui wale data-spy="affix"i ka mea āu e makemake ai e kiu. A laila e hoʻohana i nā offsets e wehewehe i ka wā e hoʻololi ai i ka paʻi ʻana o kahi mea a i ʻole.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Nā poʻo i luna! Pono ʻoe e hoʻokele i ke kūlana o kahi mea i hoʻopaʻa ʻia a me ke ʻano o kona makua. Hoʻomalu ʻia ke kūlana e affix, affix-top, a affix-bottom . E hoʻomanaʻo i ka nānā ʻana i kahi makua hāʻule paha i ka wā e hoʻomaka ai ka affix i kona wehe ʻana i ka ʻike mai ke kahe maʻamau o ka ʻaoʻao.

Ma o JavaScript

Kāhea i ka plugin affix ma o JavaScript:

  1. $ ( '#navbar' ). hoʻopili ()

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-offset-top="200".

inoa ʻano ʻano paʻamau wehewehe
offset helu | hana | mea 10 E hoʻopau ʻia nā Pixels mai ka pale ke helu ʻana i ke kūlana o ka ʻōwili. Inā hāʻawi ʻia kahi helu hoʻokahi, e hoʻohana ʻia ka offset ma nā ʻaoʻao luna a hema. No ka hoʻolohe ʻana i kahi kuhikuhi hoʻokahi, a i ʻole nā ​​offset kūʻokoʻa he nui, e hāʻawi wale i kahi mea offset: { x: 10 }. E hoʻohana i kahi hana inā pono ʻoe e hāʻawi i kahi offset (pono no kekahi mau hoʻolālā pane).