E pili ana i nā modals

ʻO kahi maʻalahi, akā maʻalahi, e lawe i ka plugin javascript modal kuʻuna me ka liʻiliʻi o ka hana pono a me nā paʻamau akamai.

Laʻana paʻa

Aia ma lalo kahi ʻano hoʻohālike statically.

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.

Ke hoʻohana nei i ka bootstrap-modal

Kāhea i ka modal ma o javascript:

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

Nā koho

Markup

Hiki iā ʻoe ke hoʻoikaika i nā modals ma kāu ʻaoʻao me ka ʻole e kākau i hoʻokahi laina o javascript. Hoʻonoho wale ʻia data-toggle="modal"ma kahi mea hoʻoponopono me kahi a i data-target="#foo"ʻole href="#foo"e pili ana i kahi id element modal, a ke kaomi ʻia, e hoʻomaka ia i kāu modal.

Eia kekahi, no ka hoʻohui ʻana i nā koho i kāu laʻana modal, e hoʻopili wale iā lākou ma ke ʻano he ʻikepili ʻikepili hou aʻe ma ka mea mana a i ʻole ka markup modal ponoʻī.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Launch Modal </a>    

<div class = "huna huna" id = "myModal" >  
  <div class = "modal-header" > 
    < ʻano kī = "pāpā" papa = "kokoke" data-dismiss = "modal" > × </ pihi>   
    <h3> Ke poʻo kumu </h3>
  </div>
  <div class = "modal-body" > 
    <p> Hoʻokahi kino maikaʻi… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Pani </a>   
    <a href = "#" class = "btn btn-primary" > E mālama i nā hoʻololi </a>  
  </div>
</div>

Nā ʻano hana

.modal(koho)

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

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

.modal('hoʻololi')

Hoʻololi lima i kahi ʻano.

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

.modal('hōʻike')

Wehe lima ia i kahi modal.

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

.modal('huna')

Hūnā lima ʻia kahi ʻano.

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

Nā hanana

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

$ ( '#myModal' ). ma ( 'huna' , hana () {   
  // hana i kekahi mea…
})

E pili ana i nā hāʻule iho

Hoʻohui i nā menus dropdown i nā mea āpau ma Bootstrap me kēia plugin maʻalahi. Hāʻawi ʻo Bootstrap i ke kākoʻo papa kuhikuhi piha i ka navbar, tabs, a me nā pila.

Nā laʻana

Kaomi ma nā loulou nav dropdown ma ka navbar a me nā pila ma lalo e hoʻāʻo i nā hāʻule.

• loulou mau
• hāʻule iho
  • Action
  • Another action
  • Something else here
  • Separated link
• Hāʻule iho 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Hāʻule iho 3
  • Action
  • Another action
  • Something else here
  • Separated link

Ke hoʻohana nei i ka bootstrap-dropdown.js

Kāhea i nā hāʻule iho ma o javascript:

$ ( '.dropdown-toggle' ). hāʻule iho ()

Markup

No ka hoʻohui wikiwiki ʻana i ka hana hoʻokuʻu i kekahi mea e hoʻohui wale data-toggle="dropdown"ʻia a e hoʻāla ʻia nā hāʻule iho bootstrap kūpono.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Loulou mau </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      hāʻule iho
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Hana </a></li> 
      <li><a href = "#" > Hana hou </a></li> 
      <li><a href = "#" > He mea ʻē aʻe ma aneʻi </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > loulou kaʻawale </a></li> 
    </ul>
  </li>
  ...
</ul>

No ka mālama pono ʻana i nā URL, e hoʻohana i ke data-targetʻano ma kahi o href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      hāʻule iho
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Nā ʻano hana

$(). dropdown()

He polokalamu api no ka ho'āla ʻana i nā menus no kahi hoʻokele hoʻokele i hāʻawi ʻia.

ʻO ka plugin ScrollSpy no ka hoʻonui ʻokoʻa ʻana i nā pahuhopu nav e pili ana i ke kūlana scroll.

Laʻana navbar me scrollspy

E ʻōwili i ka ʻāpana ma lalo a e nānā i ka hōʻano hou o ka hoʻokele. E hōʻike ʻia nā mea kikoʻī i lalo. E ho'āʻo!

Ke hoʻohana nei i ka bootstrap-scrollspy.js

Kāhea i ka scrollspy ma o javascript:

$ ( '#navbar' ). scrollspy ()

Markup

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 kiu (ʻo ka mea maʻamau ʻo ia ke kino).

<body data-spy = "scroll" > ... </body>  

Nā ʻano hana

.scrollspy('refresh')

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

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

Nā koho

Nā hanana

Hoʻohui kēia plugin i ka wikiwiki, dynamic tab a me ka hana pila no ka hoʻololi ʻana ma o ka ʻike kūloko.

Nā pahu laʻana

Kaomi i nā ʻaoʻao ma lalo nei e hoʻololi i waena o nā pane huna, ʻoiai ma o nā papa kuhikuhi.

• Home
• Pilikino
• hāʻule iho
  • @fat
  • @mdo

Ke hoʻohana nei i ka bootstrap-tab.js

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

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

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'hōʻike' ); // E koho i ka papa ma ka inoa 
$ ( '#myTab a:mua' ). tab ( 'hōʻike' ); // E koho i ka papa mua 
$ ( '#myTab a:hope' ). tab ( 'hōʻike' ); // E koho i ka papa hope 
$ ( '#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 ai i ke kāʻei ʻana i ka bootstrap tab.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Nā memo </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nā hoʻonohonoho </a></li>  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Nā memo </a></li> 
  <li><a href = "#settings" > Nā hoʻonohonoho </a></li> 
</ul>
 
<div class = "ʻaoʻao-papa" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "nā hoʻonohonoho" > ... </div>  
</div>
 
<script>
  $ ( hana () {  
    $ ( '#myTab a:hope' ). tab ( 'hōʻike' );
  })
</script>

Nā hanana

$ ( 'a[data-toggle="tab"]' ). ma ( 'hōʻike' , hana ( e ) {   
  e . pahu hopu // i hoʻāla ʻia
  e . relatedTarget // tab mua
})

E pili ana i nā mea kōkua

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ā inoa kūloko.

Laʻana hoʻohana ʻana i Tooltips

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

Ke hoʻohana nei i ka bootstrap-tooltip.js

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

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

Nā koho

Markup

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

<a href = "#" rel = "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.

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

.tooltip('huna')

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

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

.tooltip('hoʻololi')

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

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

E pili ana i nā popovers

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.

* Pono e hoʻokomo ʻia ka mea hana

Laʻana hover popover

E kau ma luna o ke pihi e hoʻomaka i ka popover.

Ke hoʻohana nei i ka bootstrap-popover.js

E hoʻā i nā popovers ma o javascript:

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

Nā koho

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.

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

.popover('huna')

Hūnā i ka popover element.

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

.popover('hoʻololi')

Hoʻololi i ka popover element.

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

E pili ana i nā makaʻala

ʻO ka plugin alert kahi papa liʻiliʻi no ka hoʻohui ʻana i nā hana kokoke i nā makaʻala.

Hoʻolaha laʻana

Hoʻohana ka plugin alerts i nā memo makaʻala maʻamau, a poloka i nā memo.

Ke hoʻohana nei i ka bootstrap-alert.js

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

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

Markup

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

<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.

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

$ ( '#my-alert' ). hoʻopaʻa ( 'pani ' , hana () {   
  // hana i kekahi mea…
})

E pili ana

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

Hoʻohana laʻana

E hoʻohana i nā pihi pihi no nā mokuʻāina a me nā hoʻololi.

Ke hoʻohana nei i ka bootstrap-button.js

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

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

<!-- Hoʻohui i ka data-toggle="button" no ka hoʻāla ʻana i ke pihi hoʻokahi -->
<pāpā pāʻani = " btn" data-toggle = "pākuʻi" > Hoʻololi hoʻokahi </ pihi>  
 
<!-- Hoʻohui i ka data-toggle="buttons-checkbox" no ke kaila pahu pahu e huli ana ma ka btn-group -->
<div class = "btn-group" data-toggle = "nā pihi-pahu" >  
  <Pōʻihi papa = "btn" > Hema </ pihi> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Akau </ pihi> 
</div>
 
<!-- Hoʻohui i ka data-toggle="buttons-radio" no ka hoʻololi ʻana i ke ʻano lekiō ma btn-group -->
<div class = "btn-group" data-toggle = "nā pihi-radio" >  
  <Pōʻihi papa = "btn" > Hema </ pihi> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Akau </ pihi> 
</div>

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.

<pāpāpāpāpāho = " btn" data-toggle = "pihi" > … </ 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 nā kikokikona ma ka ʻāpana pihi me ka hoʻohana ʻana i ke ʻano ʻikepili data-loading-text.

<button class = "btn" data-loading-text = "hoʻouka mea..." > ... </ pihi>   

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.

<button class = "btn" data-complete-text = "ua pau!" > ... </ pihi>   
<script>
  $ ( '.btn' ). pihi ( 'complete' )
</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:

Ke hoʻohana nei i ka bootstrap-collapse.js

E ho'ā ma o javascript:

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

Nā koho

Markup

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.

<pāpā pāʻani = " btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  maʻalahi hiki ke collapsible
</ pihi>
 
<div id = "demo" class = "collapse in" > … </div>  

Nā ʻano hana

.collapse(koho)

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

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

.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.

$ ( '#myCollapsible' ). ma ( 'huna' , hana () {   
  // hana i kekahi mea…
})

E pili ana

ʻO kahi plugin maʻamau no ka holo kaʻa ʻana ma waena o nā mea. He kaapuni lealea.

Laʻana carousel

E nānā i ka slideshow ma lalo nei.

Lepili liʻiliʻi mua

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lepili kiʻi liʻiliʻi lua

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Lepili Thumbnail ʻekolu

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Ke hoʻohana nei i ka bootstrap-carousel.js

Kāhea ma javascript:

$ ( '.carousel' ). carousel ()

Nā koho

Markup

Hoʻohana ʻia nā hiʻohiʻona ʻikepili no nā mana mua a me nā mea aʻe. E nānā i ka hōʻailona hōʻailona ma lalo nei.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Nā mea Carousel -->
  <div class = "carousel-inner" > 
    <div class = "mea hana" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Nā ʻano hana

.carousel(koho)

Hoʻomaka ka carousel me nā koho koho objecta hoʻomaka i ka holo kaʻa i nā mea.

$ ( '.carousel' ). carousel ({
  kaawale : 2000 
})

.carousel('cycle')

Kaʻapuni i nā mea carousel mai ka hema a i ka ʻākau.

.carousel('pause')

Hoʻopau i ka carousel mai ka holo paikikala ma nā mea.

.carousel(helu)

Hoʻololi i ka carousel i kahi kiʻi kikoʻī (ma muli o 0, e like me kahi array).

.carousel('prev')

Hoʻoholo i ka mea mua.

.carousel('next')

Hoʻoholo i ka mea aʻe.

Nā hanana

Hōʻike ka papa carousel o Bootstrap i ʻelua hanana no ka hoʻopili ʻana i ka hana carousel.

E pili ana

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

Laʻana

E hoʻomaka i ka paʻi ʻana ma ke kahua ma lalo nei e hōʻike i nā hualoaʻa typeahead.

Ke hoʻohana nei i ka bootstrap-typeahead.js

Kāhea i ka typeahead ma o javascript:

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

Nā koho

Markup

Hoʻohui i nā hiʻohiʻona ʻikepili e hoʻopaʻa inoa i kahi mea me ka hana typeahead.

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

Nā ʻano hana

.typeahead(koho)

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