Nipa awọn awoṣe

Iṣatunṣe, ṣugbọn rọ, mu ohun itanna modal JavaScript ti aṣa pẹlu iṣẹ ṣiṣe ti o kere julọ ti o nilo ati awọn aseku ọlọgbọn.

Apẹẹrẹ aimi

Ni isalẹ jẹ modal ti a ṣe ni iṣiro.

Live demo

Yi modal pada nipasẹ JavaScript nipa titẹ bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.

Lilo bootstrap-modal

Pe modal nipasẹ JavaScript:

$ ( '#myModal' ). modal ( awọn aṣayan )

Awọn aṣayan

Siṣamisi

O le mu awọn modals ṣiṣẹ lori oju-iwe rẹ ni irọrun laisi nini lati kọ laini kan ti JavaScript. O kan ṣeto data-toggle="modal"lori eroja oludari pẹlu kan data-target="#foo"tabi href="#foo"eyiti o ni ibamu si id ano modal, ati nigbati o ba tẹ, yoo ṣe ifilọlẹ modal rẹ.

Paapaa, lati ṣafikun awọn aṣayan si apẹẹrẹ modal rẹ, kan ṣafikun wọn bi awọn abuda data afikun lori boya ipin iṣakoso tabi isamisi modal funrararẹ.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Ilana ifilọlẹ </a>    

<div class = "modal hide" id = "myModal" >  
  <div kilasi = "modal-akọsori" > 
    <bọtini iru = "bọtini" kilasi = "sunmọ" data-dismiss = "modal" > × </bọtini>   
    <h3> Akọsori awoṣe </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ara kan ti o dara… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" kilasi = "btn" data-dismiss = "modal" > Pade </a>   
    <a href = "#" kilasi = "btn btn-primary" > Fipamọ awọn ayipada </a>  
  </div>
</div>

Awọn ọna

.modal(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.

$ ( '#myModal' ). modal ({
  keyboard : eke 
})

.modal('yí')

Pẹlu ọwọ yipada modal kan.

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

.modal('ifihan')

Pẹlu ọwọ ṣii modal kan.

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

.modal('tọju')

Pẹlu ọwọ hides a modal.

$ ( '#myModal' ). modal ( 'tọju' )

Awọn iṣẹlẹ

Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal.

$ ( '#myModal' ). lori ( 'farasin' , iṣẹ () {   
  // se nkan…
})

Nipa dropdowns

Ṣafikun awọn akojọ aṣayan silẹ si fere ohunkohun ni Bootstrap pẹlu itanna ti o rọrun yii. Bootstrap ni atilẹyin akojọ aṣayan silẹ ni kikun lori navbar, awọn taabu, ati awọn oogun.

Awọn apẹẹrẹ

Tẹ lori awọn ọna asopọ nav dropdown ni navbar ati awọn ìşọmọbí ni isalẹ lati se idanwo dropdowns.

• Ọna asopọ deede
• Faa silẹ
  • Action
  • Another action
  • Something else here
  • Separated link
• Idasilẹ 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Idasilẹ 3
  • Action
  • Another action
  • Something else here
  • Separated link

Lilo bootstrap-dropdown.js

Pe awọn silẹ nipasẹ JavaScript:

$ ( '.dropdown-toggle' ). silẹ ()

Siṣamisi

Lati fi iṣẹ ṣiṣe silẹ ni kiakia si eyikeyi eroja kan ṣafikun data-toggle="dropdown"ati eyikeyi silẹ bootstrap to wulo yoo muu ṣiṣẹ laifọwọyi.

<ul kilasi = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Ọna asopọ deede </a></li>  
  <li kilasi = "silẹ silẹ" id = "akojọ aṣyn1" >  
    <a class = "dropdown-toggle" data-toggle = "silẹ silẹ" href = "#menu1" >   
      Faa silẹ
      <b kilasi = "abojuto" </b> 
    </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      <li><a href = "#" > Iṣẹ́ </a></li> 
      <li><a href = "#" > Iṣẹ́ míràn </a></li> 
      <li><a href = "#" > Nkankan miran nibi </a></li> 
      <li kilasi = "olupin" </li> 
      <li><a href = "#" > Ọna asopọ ti o ya sọtọ </a></li> 
    </ul>
  </li>
  ...
</ul>

Lati jẹ ki awọn URL wa titi, lo data-targetabuda dipo href="#".

<ul kilasi = "nav nav-pills" > 
  <li kilasi = "silẹ silẹ" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "pato/to/page.html" >    
      Faa silẹ
      <b kilasi = "abojuto" </b> 
    </a>
    <ul kilasi = "akojọ-silẹ silẹ" > 
      ...
    </ul>
  </li>
</ul>

Awọn ọna

$() silẹ()

Api eto kan fun ṣiṣiṣẹ awọn akojọ aṣayan fun navbar ti a fun tabi lilọ kiri taabu.

Ohun itanna ScrollSpy jẹ fun mimu dojuiwọn awọn ibi-afẹde nav laifọwọyi da lori ipo yi lọ.

Apeere navbar pẹlu scrollspy

Yi lọ si agbegbe ni isalẹ ki o wo imudojuiwọn lilọ kiri. Awọn nkan isọ silẹ yoo jẹ afihan bi daradara. Danwo!

Lilo bootstrap-scrollspy.js

Pe scrollspy nipasẹ JavaScript:

$ ( '#navbar' ). scrollspy ()

Siṣamisi

Lati fi awọn iṣọrọ scrollspy ihuwasi si rẹ topbar lilọ, o kan fi data-spy="scroll"si awọn ano ti o fẹ lati ṣe amí lori (julọ ojo melo yi yoo jẹ awọn ara).

<body data-spy = "yi lọ" > ... </body>  

Awọn ọna

.scrollspy('itura')

Nigbati o ba nlo scrollspy ni apapo pẹlu fifi kun tabi yiyọ awọn eroja kuro lati DOM, iwọ yoo nilo lati pe ọna isọdọtun bii bẹ:

$ ( '[data-spy="yilọ" ). kọọkan ( iṣẹ () {  
  var $ amí = $ ( eyi ). scrollspy ( 'itura' )
});

Awọn aṣayan

Awọn iṣẹlẹ

Ohun itanna yii ṣe afikun iyara, taabu ti o ni agbara ati iṣẹ ṣiṣe egbogi fun iyipada nipasẹ akoonu agbegbe.

Awọn taabu apẹẹrẹ

Tẹ awọn taabu ti o wa ni isalẹ lati yi laarin awọn pane ti o farapamọ, paapaa nipasẹ awọn akojọ aṣayan silẹ.

• Ile
• Profaili
• Faa silẹ
  • @fat
  • @mdo

Lilo bootstrap-tab.js

Mu awọn taabu taabu ṣiṣẹ nipasẹ JavaScript (taabu kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

$ ( '#myTab a' ). tẹ ( iṣẹ ( e ) {  
  e . idilọwọ Aiyipada ();
  $ ( eyi ). taabu ( 'ifihan' );
})

O le mu awọn taabu kọọkan ṣiṣẹ ni awọn ọna pupọ:

$ ( '#myTab a[href="#profaili"]' ). taabu ( 'ifihan' ); // Yan taabu nipa orukọ 
$ ( '#myTab a: akọkọ' ). taabu ( 'ifihan' ); // Yan taabu akọkọ 
$ ( '#myTab a: kẹhin' ). taabu ( 'ifihan' ); // Yan kẹhin taabu 
$ ( '#myTab li: eq(2) a' ). taabu ( 'ifihan' ); // Yan taabu kẹta (0-itọkasi) 

Siṣamisi

O le mu taabu kan ṣiṣẹ tabi lilọ kiri egbogi laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="tab"tabi data-toggle="pill"lori eroja kan. Ṣafikun navati nav-tabsawọn kilasi si taabu ulyoo lo iselona taabu bootstrap.

<ul kilasi = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "taabu" > Ile </a></li>  
  <li><a href = "#profile" data-toggle = "taabu" > Profaili </a></li>  
  <li><a href = "#messages" data-toggle = "taabu" > Awọn ifiranṣẹ </a></li>  
  <li><a href = "#settings" data-toggle = "taabu" > Eto </a></li>  
</ul>

Awọn ọna

$().taabu

Mu eroja taabu ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-targettabi hrefifọkansi oju ipade apoti kan ninu DOM.

<ul kilasi = "nav nav-tabs" id = "myTab" >  
  <li class = "lọwọ" ><a href = "#ile" > Ile </a></li>  
  <li > <a href = "#profaili"> Profaili </a></li> 
  <li><a href = "#messages" > Awọn ifiranṣẹ </a></li> 
  <li><a href = "#eto" > Eto </a></li> 
</ul>
 
<div class = "akoonu-taabu" > 
  <div class = "tab-pane active" id = "ile" > ... </div>  
  <div class = "tab-pane" id = "profaili" > ... </div>  
  <div class = "tab-pane" id = "awọn ifiranṣẹ" > ... </div>  
  <div class = "tab-pane" id = "awọn eto" > ... </div>  
</div>
 
<akosile>
  $ ( iṣẹ () {  
    $ ( '#myTab a: kẹhin' ). taabu ( 'ifihan' );
  })
</script>

Awọn iṣẹlẹ

$ ( 'a[data-toggle = "taabu"]' ). lori ( 'fi han' , iṣẹ ( e ) {   
  e . afojusun // mu ṣiṣẹ taabu
  e . jẹmọTarget // ti tẹlẹ taabu
})

About Tooltips

Atilẹyin nipasẹ ohun itanna jQuery.tipsy ti o dara julọ ti a kọ nipasẹ Jason Frame; Awọn imọran irinṣẹ jẹ ẹya imudojuiwọn, eyiti ko gbẹkẹle awọn aworan, lo css3 fun awọn ohun idanilaraya, ati awọn abuda data fun ibi ipamọ akọle agbegbe.

Apeere lilo awọn Italolobo Irinṣẹ

Raba lori awọn ọna asopọ ni isalẹ lati wo awọn imọran irinṣẹ:

Lilo bootstrap-tooltip.js

Ṣe okunfa ohun elo irinṣẹ nipasẹ JavaScript:

$ ( '#apẹẹrẹ' ). ohun elo ( awọn aṣayan )

Awọn aṣayan

Siṣamisi

Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati Agbejade data-apis n wọle. Ti o ba fẹ lati lo wọn kan pato aṣayan yiyan.

<a href = "#" rel = "tooltip" akọle = "irinṣẹ irinṣẹ akọkọ" > rababa lori mi </a>   

Awọn ọna

$() ohun elo (awọn aṣayan)

So oluṣakoso ohun elo irinṣẹ si ikojọpọ eroja.

.tooltip('ifihan')

Ṣe afihan ohun elo irinṣẹ eroja kan.

$ ( '# ano' ). ọpa irinṣẹ ( 'ifihan' )

.tooltip('tọju')

Ìbòmọlẹ ohun ano ká irinṣẹ.

$ ( '# ano' ). ọpa irinṣẹ ( 'tọju' )

.tooltip('yí')

Yipada ohun elo itọsi irinṣẹ.

$ ( '# ano' ). ọpa irinṣẹ ( 'bayi' )

Nipa popovers

Ṣafikun awọn agbekọja kekere ti akoonu, bii awọn ti o wa lori iPad, si eyikeyi ipin fun alaye Atẹle ile.

* Nilo Italolobo Irinṣẹ lati wa pẹlu

Apeere rababa popover

Raba lori bọtini lati ma nfa popover naa.

Lilo bootstrap-popover.js

Mu popovers ṣiṣẹ nipasẹ JavaScript:

$ ( '#apẹẹrẹ' ). popover ( awọn aṣayan )

Awọn aṣayan

Siṣamisi

Fun awọn idi iṣẹ ṣiṣe, Ohun elo irinṣẹ ati Agbejade data-apis n wọle. Ti o ba fẹ lati lo wọn kan pato aṣayan yiyan.

Awọn ọna

$().popover(awọn aṣayan)

Initializes popovers fun ohun akojọpọ eroja.

.popover('ifihan')

Ṣe afihan awọn eroja popover.

$ ( '# ano' ). popover ( 'ifihan' )

.popover('tọju')

Ìbòmọlẹ ohun eroja popover.

$ ( '# ano' ). popover ( 'tọju' )

.popover('toggle')

Yipada awọn eroja agbejade.

$ ( '# ano' ). popover ( 'yii' )

Nipa titaniji

Ohun itanna gbigbọn jẹ kilasi kekere fun fifi iṣẹ ṣiṣe to sunmọ si awọn titaniji.

Awọn itaniji apẹẹrẹ

Ohun itanna titaniji ṣiṣẹ lori awọn ifiranṣẹ itaniji deede, ati dina awọn ifiranṣẹ.

Lilo bootstrap-alert.js

Jeki yiyọ kuro ti itaniji nipasẹ JavaScript:

$ ( "titaniji" ). gbigbọn ()

Siṣamisi

Kan ṣafikun data-dismiss="alert"si bọtini isunmọ rẹ lati funni ni iṣẹ ṣiṣe isunmọ titaniji laifọwọyi.

<a class = "sunmọ" data-dismiss = "titaniji" href = "#" > & igba; </a>   

Awọn ọna

$() titaniji()

Murasilẹ gbogbo awọn titaniji pẹlu iṣẹ ṣiṣe to sunmọ. Lati jẹ ki awọn titaniji rẹ gbe jade nigba pipade, rii daju pe wọn ni .fadeati .inkilasi ti lo tẹlẹ si wọn.

.titaniji('sunmọ')

Tilekun itaniji.

$ ( "titaniji" ). Itaniji ( 'sunmọ' )

Awọn iṣẹlẹ

Kilasi gbigbọn Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe titaniji.

$ ( '#mi-ititaniji' ). dè ( 'ni pipade' , iṣẹ () {   
  // se nkan…
})

Nipa

Ṣe diẹ sii pẹlu awọn bọtini. Awọn ipinlẹ bọtini iṣakoso tabi ṣẹda awọn ẹgbẹ ti awọn bọtini fun awọn paati diẹ sii bi awọn ọpa irinṣẹ.

Awọn lilo apẹẹrẹ

Lo awọn bọtini itanna fun awọn ipinlẹ ati awọn iyipada.

Lilo bootstrap-button.js

Mu awọn bọtini ṣiṣẹ nipasẹ JavaScript:

$ ( '.nav-tabs' ). bọtini ()

Siṣamisi

Awọn abuda data jẹ pataki si ohun itanna bọtini. Ṣayẹwo koodu apẹẹrẹ ni isalẹ fun awọn oriṣi isamisi oriṣiriṣi.

<!-- Ṣafikun data-toggle="bọtini" lati mu toggling ṣiṣẹ lori bọtini ẹyọkan -->
<bọtini kilasi = "btn" data-toggle = "bọtini" > Yiyi Nikan </button>  
 
<!-- Ṣafikun data-toggle="buttons-checkbox" fun aṣa aṣayẹwo apoti lori btn-group -->
<div class = "btn-group" data-toggle = "bọtini-checkbox" >  
  <bọtini kilasi = "btn" > Osi </bọtini> 
  <bọtini kilasi = "btn" > Aarin </bọtini> 
  <bọtini kilasi = "btn" > Ọtun </bọtini> 
</div>
 
<!-- Ṣafikun data-toggle="buttons-radio" fun aṣa aṣa redio lori btn-ẹgbẹ -->
<div class = "btn-group" data-toggle = "awọn bọtini-redio" >  
  <bọtini kilasi = "btn" > Osi </bọtini> 
  <bọtini kilasi = "btn" > Aarin </bọtini> 
  <bọtini kilasi = "btn" > Ọtun </bọtini> 
</div>

Awọn ọna

$()bọtini ('yipo')

Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.

<bọtini kilasi = "btn" data-toggle = "bọtini" > … </bọtini>   

$().bọtini('ikojọpọ')

Ṣeto ipo bọtini si ikojọpọ - mu bọtini ṣiṣẹ ati yi ọrọ pada si ọrọ ikojọpọ. Ọrọ ikojọpọ yẹ ki o ṣalaye lori bọtini bọtini ni lilo abuda data data-loading-text.

<button class = "btn" data-loading-text = "ikojọpọ nkan..." > ... </button>   

$().bọtini('tunto')

Tun ipo bọtini atunto - yi ọrọ pada si ọrọ atilẹba.

$().bọtini (okun)

Tun ipo bọtini atunto - yi ọrọ pada si eyikeyi ipo ọrọ asọye data.

<button class = "btn" data-complete-text = "pari!" > ... </bọtini>   
<akosile>
  $ ( '.btn' ). bọtini ( 'pari' )
</script>

Nipa

Gba awọn aza ipilẹ ati atilẹyin to rọ fun awọn paati ikojọpọ bi accordions ati lilọ kiri.

* Nilo ohun itanna Awọn iyipada lati wa pẹlu.

Accordion apẹẹrẹ

Lilo ohun itanna idapọ, a kọ ẹrọ ailorukọ ara accordion ti o rọrun:

Lilo bootstrap-collapse.js

Mu ṣiṣẹ nipasẹ JavaScript:

$ ( ".collapse" ). ṣubu ()

Awọn aṣayan

Siṣamisi

Kan ṣafikun data-toggle="collapse"ati ipin data-targetkan lati fi iṣakoso laifọwọyi ti nkan kan ti o le kọlu. Ẹya naa data-targetgba oluyan css kan lati lo iṣubu si. Rii daju lati ṣafikun kilasi collapsenaa si nkan ti o le ṣubu. Ti o ba fẹ ki o ṣii aiyipada, ṣafikun afikun kilasi in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  o rọrun collapsible
</bọtini>
 
<div id = "demo" kilasi = "kolula sinu" > … </div>  

Awọn ọna

.collapse(awọn aṣayan)

Mu akoonu rẹ ṣiṣẹ bi eroja ti o le kolu. Gba awọn aṣayan iyan object.

$ ( '#myCollapsible' ). ṣubu ({
  toggle : iro 
})

.kolapse('yii')

Yipada eroja ti o le kolu lati ṣafihan tabi pamọ.

.kolapse('ifihan')

Ṣe afihan eroja ti o le ṣubu.

.kolapse('tọju')

Ìbòmọlẹ ohun kan collapsible.

Awọn iṣẹlẹ

Kilasi Collapse Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe iṣubu.

$ ( '#myCollapsible' ). lori ( 'farasin' , iṣẹ () {   
  // se nkan…
})

Nipa

Ohun itanna jeneriki fun gigun kẹkẹ nipasẹ awọn eroja. Ayọ-lọ-yika.

Apeere carousel

Wo agbelera ni isalẹ.

Aami eekanna atanpako akọkọ

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

Aami eekanna atanpako keji

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

Aami eekanna atanpako kẹta

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

‹ ›

Lilo bootstrap-carousel.js

Pe nipasẹ JavaScript:

$ ( '.carousel' ). carousel ()

Awọn aṣayan

Siṣamisi

Awọn abuda data ni a lo fun iṣaaju ati awọn idari atẹle. Ṣayẹwo apẹẹrẹ apẹẹrẹ ni isalẹ.

<div id = "myCarousel" kilasi = " ifaworanhan carousel " >  
  <!-- Awọn nkan Carousel -->
  <div class = "carousel-inner" > 
    <div class = "ohun ti nṣiṣe lọwọ" > … </div> 
    <div class = "ohun kan" > … </div> 
    <div class = "ohun kan" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control osi" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "tókàn" > & rsaquo; </a>   
</div>

Awọn ọna

.carousel(awọn aṣayan)

Ti bẹrẹ carousel pẹlu awọn aṣayan iyan objectati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.

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

.carousel('cycle')

Yiyipo nipasẹ awọn ohun carousel lati osi si otun.

.carousel('daduro')

Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.

.carousel(nọmba)

Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun).

.carousel('tẹlẹ')

Awọn iyipo si nkan ti tẹlẹ.

.carousel('tókàn')

Awọn iyipo si nkan atẹle.

Awọn iṣẹlẹ

Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel.

Nipa

Ipilẹ kan, ohun itanna ti o gbooro ni irọrun fun ṣiṣẹda ni iyara awọn oriṣi ti o wuyi pẹlu titẹ ọrọ fọọmu eyikeyi.

Apeere

Bẹrẹ titẹ ni aaye ti o wa ni isalẹ lati fi awọn abajade iruwe han.

Lilo bootstrap-typeahead.js

Pe typeahead nipasẹ JavaScript:

$ ( '.typehead' ). oriṣi ori ()

Awọn aṣayan

Siṣamisi

Ṣafikun awọn abuda data lati forukọsilẹ nkan kan pẹlu iṣẹ ṣiṣe oriṣi.

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

Awọn ọna

.typehead(awọn aṣayan)

Ti bẹrẹ titẹ sii pẹlu ori oriṣi.