Modallar hakda

Düzgünli, ýöne çeýe, adaty iň az talap edilýän funksiýa we akylly başlangyçlar bilen adaty javascript modal pluginini alyň.

Statik mysal

Aşakda statiki taýdan görkezilen modal.

Göni görkeziş

Aşakdaky düwmä basyp, javascript arkaly modaly üýtgediň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

Bootstrap-modal ulanmak

Javascript arkaly modala jaň ediň:

$ ( '#myModal' ). modal ( opsiýalar )

Görnüş

Bellik

Javascriptiň bir setirini ýazman, sahypaňyzdaky modallary aňsatlyk bilen işjeňleşdirip bilersiňiz. Diňe modal element idine gabat gelýän ýa-da data-toggle="modal"kontrol elementini düzüň we basylanda modalyňyzy işe girizer.data-target="#foo"href="#foo"

Mundan başga-da, modal meseläňize opsiýalary goşmak üçin, dolandyryş elementine ýa-da modal belligiň özünde goşmaça maglumat atributlary hökmünde goşuň.

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

<div class = "modal gizlemek" id = "myModal" >  
  <div class = "modal-sözbaşy" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modal sözbaşy </h3>
  </div>
  <div class = "modal-body" > 
    <p> Bir gowy beden… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal"> Closeapyň </a> _   
    <a href = "#" class = "btn btn-primary"> Üýtgeşmeleri ýatda saklaň </a>  
  </div>
</div>

Usullar

.modal (opsiýalar)

Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

$ ( '#myModal' ). modal ({
  klawiatura : ýalan 
})

.modal ('üýtgetmek')

Modal bilen el bilen çalşyň.

$ ( '#myModal' ). modal ( 'üýtgetmek' )

.modal ('görkezmek')

Modal bilen el bilen açýar.

$ ( '#myModal' ). modal ( 'görkezmek' )

.modal ('gizlemek')

Modaly el bilen gizleýär.

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

Wakalar

“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär.

$ ( '#myModal' ). üstünde ( 'gizlenen' , funksiýa () {   
  // bir zatlar et…
})

Açylýan ýerler hakda

Bu ýönekeý plugin bilen Bootstrap-daky islendik zat üçin açylýan menýulary goşuň. “Bootstrap” deňiz panelinde, goýmalarda we dermanlarda doly açylýan menýu goldawyny görkezýär.

Mysallar

Aşakdakylary synamak üçin deňiz panelindäki açylýan nav baglanyşyklaryna we aşakdaky dermanlara basyň.

• Yzygiderli baglanyşyk
• Aşak
  • Action
  • Another action
  • Something else here
  • Separated link
• 2-nji aşak düşme
  • Action
  • Another action
  • Something else here
  • Separated link
• Aşak 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js ulanmak

Javascript arkaly açylanlara jaň ediň:

$ ( '.dropdown-toggle' ). aşak düşmek ()

Bellik

Islendik elemente çaltlyk bilen işlemek funksiýasyny goşmak üçin diňe goşuň data-toggle="dropdown"we islendik dogry ýükleme awtomatiki usulda işjeňleşdiriler.

<ul class = "nav nav-pills" > 
  <li class = "işjeň" > <a href = "#"> Adaty baglanyşyk </a> </li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Aşak
      <b class = "caret" > </b> 
    </a>
    <ul class = "drop-menu" > 
      <li> <a href = "#"> Hereket </a> </li> 
      <li> <a href = "#"> Başga bir hereket </a> </li> 
      <li> <a href = "#"> Bu ýerde başga bir zat </a> </li> 
      <li class = "bölüji" > </li> 
      <li> <a href = "#"> Aýrylan baglanyşyk </a> </li> 
    </ul>
  </li>
  ...
</ul>

URL-lerini saklamak üçin, data-targetýerine atribut ulanyň href="#".

<ul class = "nav nav-pills" > 
  <li class = "aşak gaçmak" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Aşak
      <b class = "caret" > </b> 
    </a>
    <ul class = "drop-menu" > 
      ...
    </ul>
  </li>
</ul>

Usullar

aşak düşmek ()

Berlen deňiz paneli ýa-da bellikli nawigasiýa üçin menýulary işjeňleşdirmek üçin programma api.

“ScrollSpy” plugin, aýlaw pozisiýasyna esaslanyp nav nyşanlaryny awtomatiki täzelemek üçin.

Scrollspy bilen navbar

Aşakdaky meýdany aýlaň we nawigasiýa täzelenmesine tomaşa ediň. Açylýan aşaky elementler hem görkeziler. Synap görüň!

Bootstrap-scrollspy.js ulanmak

Javascript arkaly scrollspy jaň ediň:

$ ( '#navbar' ). scrollspy ()

Bellik

Topbar nawigasiýaňyza scrollspy häsiýetini aňsatlyk bilen goşmak data-spy="scroll"üçin içalyçylyk etmek isleýän elementiňize goşuň (köplenç bu beden bolar).

<body data-spy = "aýlamak" > ... </body>  

Usullar

.scrollspy ('täzele')

DOM-dan elementleri goşmak ýa-da aýyrmak bilen bilelikde scrollspy ulananyňyzda, täzeleniş usulyna şeýle jaň etmeli bolarsyňyz:

$ ( '[data-spy = "aýlamak"]' ). hersi ( funksiýa () {  
  var $ içaly = $ ( bu ). scrollspy ( 'täzele' )
});

Görnüş

Wakalar

Bu plugin ýerli mazmuna geçmek üçin çalt, dinamiki tab we tabletka funksiýasyny goşýar.

Mysal bellikleri

Aşakdaky menýu arkaly hem gizlin panelleriň arasynda geçmek üçin aşakdaky goýmalara basyň.

• Öý
• Profil
• Aşak
  • @fat
  • @mdo

Bootstrap-tab.js ulanmak

Javascript arkaly tablisa tablisalaryny açyň (her tab aýratynlykda işjeňleşdirilmeli):

$ ( '#myTab a' ). basyň ( funksiýa ( e ) {  
  e . öňüni almak ();
  $ ( bu ). tab ( 'görkezmek' );
})

Aýry-aýry bellikleri birnäçe usul bilen işjeňleşdirip bilersiňiz:

$ ( '#myTab a [href = "# profil"]' ). tab ( 'görkezmek' ); // Ady boýunça tab saýlaň 
$ ( '#myTab a: ilki' ). tab ( 'görkezmek' ); // Birinji goýmany saýlaň 
$ ( '#myTab a: soňky' ). tab ( 'görkezmek' ); // Soňky goýmany saýlaň 
$ ( '#myTab li: eq (2) a' ). tab ( 'görkezmek' ); // Üçünji goýmany saýlaň (0-indekslenen) 

Bellik

Diňe bir elementi görkezip data-toggle="tab"ýa -da haýsydyr bir javascript ýazmazdan, tab ýa-da tabletka nawigasiýasyny işjeňleşdirip bilersiňiz . Salgylara we synplary data-toggle="pill"goşmak, bootstrap goýmasynyň stilini ulanar.navnav-tabsul

<ul class = "nav nav-tabs" > 
  <li> <a href = "#home" data-toggle = "tab"> Baş sahypa </a> </li >  
  <li> <a href = "#profile" data-toggle = "tab"> Profil </a> </li >  
  <li> <a href = "#messages" data-toggle = "tab"> Habarlar </a> </li >  
  <li> <a href = "#settings" data-toggle = "tab"> Sazlamalar </a> </li >  
</ul>

Usullar

$ () goýmasy

Salgy elementini we mazmun gapyny işjeňleşdirýär. Salgyda ýa data-target-da hrefDOM-da konteýner düwünini nyşana alýan bolmaly.

<ul class = "nav nav- tabs" id = "myTab" >  
  <li class = "işjeň" > <a href = "#home"> Öý </a> </li>  
  <li> <a href = "#profile"> Profil </a> </li> 
  <li> <a href = "#messages"> Habarlar </a> </li> 
  <li> <a href = "#settings"> Sazlamalar </a> </li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane işjeň" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "habarlar" > ... </div>  
  <div class = "tab-pane" id = "sazlamalar" > ... </div>  
</div>
 
<script>
  $ ( funksiýa () {  
    $ ( '#myTab a: soňky' ). tab ( 'görkezmek' );
  })
</script>

Wakalar

$ ( 'a [data-toggle = "tab"]' ). ( 'görkezilen ' , funksiýa ( e ) {   
  e . nyşan // işjeňleşdirilen goýma
  e . baglanyşyklyTarget // öňki goýma
})

Gurallar barada

Jeýson Frame tarapyndan ýazylan ajaýyp jQuery.tipsy plugininden ylham aldy; Gurallar, şekillere bil baglamaýan, animasiýa üçin css3-i we ýerli at saklamak üçin maglumat atributlaryny ulanmaýan täzelenen wersiýa.

Gurallar üçin mysal

Gural görkezmelerini görmek üçin aşakdaky baglanyşyklara basyň:

Bootstrap-tooltip.js ulanmak

Gurallar maslahatyny javascript arkaly işlediň:

$ ( '# mysal' ). gurallar ( opsiýalar )

Görnüş

Bellik

Iş öndürijiligi sebäpli, “Tooltip” we “Popover data-apis” saýlanýar. Olary ulanmak isleseňiz, saýlaýjy opsiýasyny görkeziň.

<a href = "#" rel = "tooltip" title = "birinji tooltip"> üstümden aýlan </a>   

Usullar

$ (). gurallar maslahaty (opsiýalar)

Gurallar işleýjisini elementler ýygyndysyna dakýar.

.tooltip ('görkezmek')

Bir elementiň gural görkezmesini açýar.

$ ( '#element' ). gural görkezmesi ( 'görkezmek' )

.tooltip ('gizlemek')

Bir elementiň gural görkezmesini gizleýär.

$ ( '#element' ). gural görkezmesi ( 'gizlemek' )

.tooltip ('üýtgetmek')

Bir elementiň gurallar maslahatyny üýtgedýär.

$ ( '#element' ). gural görkezmesi ( 'üýtgetmek' )

Açyjylar hakda

Ikinji derejeli maglumat üçin islendik elemente, “iPad” -daky ýaly mazmunyň kiçi gatlaklaryny goşuň.

* Tooltip -iň goşulmagyny talap edýär

Mysal üçin, popover

Açylýan düwmäni açmak üçin düwmä basyň.

Bootstrap-popover.js ulanmak

Javascript arkaly açylanlary açyň:

$ ( '# mysal' ). popover ( opsiýalar )

Görnüş

Bellik

Iş öndürijiligi sebäpli, “Tooltip” we “Popover data-apis” saýlanýar. Olary ulanmak isleseňiz, saýlaýjy opsiýasyny görkeziň.

Usullar

$ (). popover (opsiýalar)

Element ýygnamak üçin açylanlary başlaýar.

.popover ('görkezmek')

Bir elementiň açylmagyny açýar.

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

.popover ('gizlemek')

Bir elementi açýar.

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

.popover ('üýtgetmek')

Bir elementi açýar.

$ ( '#element' ). popover ( 'üýtgetmek' )

Duýduryşlar barada

Duýduryş plugin duýduryşlara ýakyn işlemek üçin kiçijik synpdyr.

Mysal duýduryşlary

Duýduryşlar plugin yzygiderli duýduryş habarlarynda işleýär we habarlary bloklaýar.

Bootstrap-alert.js ulanmak

Javascript arkaly duýduryşy ýatyrmaga mümkinçilik beriň:

$ ( ".alert" ). duýduryş ()

Bellik

data-dismiss="alert"Duýduryşyň ýakyn işlemegini awtomatiki bermek üçin diňe ýakyn düwmäňize goşuň .

<a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>   

Usullar

$ () duýduryş ()

Allhli duýduryşlary ýakyn işlemek bilen örtýär. Closedapylanda duýduryşlaryňyzy janlandyrmak üçin, synpyň .fadewe .insynpyň eýýäm ulanylandygyna göz ýetiriň.

.alert ('ýakyn')

Duýduryşy ýapýar.

$ ( ".alert" ). duýduryş ( 'ýap' )

Wakalar

“Bootstrap” -yň duýduryş synpy duýduryş funksiýasyna girmek üçin birnäçe wakany paş edýär.

$ ( '# meniň duýduryşym' ). daňmak ( 'ýapyk' , funksiýa () {   
  // bir zatlar et…
})

Takmynan

Düwmeler bilen has köp iş ediň. Dolandyryş düwmesi gurallar paneli ýaly has köp komponentler üçin düwmeler toparyny döredýär ýa-da döredýär.

Mysal ulanylyşy

Döwletler we üýtgetmek üçin düwmeler pluginini ulanyň.

Bootstrap-button.js ulanmak

Javascript arkaly düwmeleri işlediň:

$ ( '.nav-tabs' ). düwmesi ()

Bellik

Maglumat atributlary düwme plugininiň aýrylmaz bölegidir. Dürli bellik görnüşleri üçin aşakdaky mysal koduny gözden geçiriň.

<! - Bir düwmede üýtgemegi işjeňleşdirmek üçin data-toggle = "düwme" goşuň ->
<button class = "btn" data-toggle = "button" > leeke çalyşmak </button>  
 
<! - btn-toparda bellik gutusynyň stilini üýtgetmek üçin data-toggle = "düwmeler-bellik gutusy" goşuň ->
<div class = "btn-group" data-toggle = "düwmeler-bellik gutusy" >  
  <button class = "btn" > Çep </button> 
  <button class = "btn" > Orta </button> 
  <button class = "btn" > Sag </button> 
</div>
 
<! - btn-toparda radio stilini üýtgetmek üçin data-toggle = "düwmeler-radio" goşuň ->
<div class = "btn-group" data-toggle = "düwmeler-radio" >  
  <button class = "btn" > Çep </button> 
  <button class = "btn" > Orta </button> 
  <button class = "btn" > Sag </button> 
</div>

Usullar

$ (). düwmesi ('üýtgetmek')

Toggles ýagdaýy basýar. Düwmä işjeňleşdirilen görnüşini berýär.

<button class = "btn" data-toggle = "button" > … </button>   

$ (). düwmesi ('ýüklemek')

Düwme ýagdaýyny ýüklemek üçin düzýär - düwmäni öçürýär we teksti ýüklemek üçin teksti çalyşýar. Textüklenýän tekst, maglumat atributyny ulanyp, düwme elementinde kesgitlenmeli data-loading-text.

<button class = "btn" data-load-text = "zatlary ýüklemek ..." > ... </button>   

$ (). düwmesi ('täzeden düzmek')

Düwme ýagdaýyny täzeden düzýär - teksti asyl tekste çalyşýar.

$ () düwmesi (setir)

Düwme ýagdaýyny täzeden düzýär - teksti kesgitlenen tekst ýagdaýyna tekst çalşýar.

<button class = "btn" data-complete-text = "gutardy!" > ... </button>   
<script>
  $ ( '.btn' ). düwmesi ( 'doly' )
</script>

Takmynan

Akkordeon we nawigasiýa ýaly çöküp bilýän komponentler üçin esasy stilleri we çeýe goldawy alyň.

* Geçiş plagininiň goşulmagyny talap edýär.

Akkordeon

Apseykylýan plugini ulanyp, ýönekeý akkordeon stili widjetini gurduk:

Bootstrap-collapse.js ulanmak

Javascript arkaly açyň:

$ ( ".collapse" ). ýykylmak ()

Görnüş

Bellik

Aykylýan elementiň gözegçiligini awtomatiki bellemek üçin diňe data-toggle="collapse"bir element goşuň . data-targetAýratynlyk data-target, çökmegi ulanmak üçin css saýlaýjysyny kabul edýär. Synpy collapseýykylýan elemente goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň in.

<button class = "btn btn-danger" data-toggle = "ýykylmak" data-target = "#demo" >   
  ýönekeý çökýän
</button>
 
<div id = "demo" class = "ýykylmak" > … </div>  

Usullar

ýykylmak (opsiýalar)

Mazmunyňyzy çöküp bilýän element hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

$ ( '#myCollapsible' ). ýykylmak ({
  üýtgetmek : ýalan 
})

ýykylmak ('üýtgetmek')

Görkezilýän ýa-da gizlenýän ýykylýan elementi açýar.

ýykylmak ('görkezmek')

Apsykylýan elementi görkezýär.

ýykylmak ('gizlemek')

Apsykylýan elementi gizleýär.

Wakalar

“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.

$ ( '#myCollapsible' ). üstünde ( 'gizlenen' , funksiýa () {   
  // bir zatlar et…
})

Takmynan

Elementleriň üsti bilen tigir sürmek üçin umumy plugin. Şatlykly gezelenç.

Karusel

Aşakdaky slaýdşowy görüň.

Ilkinji kiçijik bellik

Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

Ikinji kiçijik bellik

Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

Üçünji kiçijik bellik

Cras justo odio, dapibus ac facilisis, egestas eget quam. Donec id elit metus-da mi porta gravida. Nullam id dolor id nibh ultricies ulag serişdesi.

‹ ›

Bootstrap-carousel.js ulanmak

Javascript arkaly jaň ediň:

$ ( '.carousel' ). karusel ()

Görnüş

Bellik

Maglumat atributlary öňki we indiki dolandyryşlar üçin ulanylýar. Aşakdaky mysal belligini gözden geçiriň.

<div id = "myCarousel" class = "karusel slaýd" >  
  <! - Karusel önümleri ->
  <div class = "karusel-içki" > 
    <div class = "işjeň element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - Karusel nav ->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo ; </a>   
</div>

Usullar

Karusel (opsiýalar)

Karuseli islege bagly görnüşler objectbilen başlaýar we zatlaryň üsti bilen tigir sürüp başlaýar.

$ ( '.carousel' ). karusel ({
  aralyk : 2000 
})

.carousel ('sikl')

Karusel önümleriniň çepden saga aýlanmagy.

.carousel ('pauza')

Karuseliň zatlaryň üsti bilen tigir sürmegini bes edýär.

Karusel (san)

Karuseli belli bir ramka aýlaýar (massiwlere meňzeş 0 esasly).

.carousel ('öňki')

Öňki elemente aýlawlar.

.carousel ('indiki')

Indiki elemente aýlawlar.

Wakalar

“Bootstrap” -yň karusel synpy karuseliň işlemegi üçin iki hadysany paş edýär.

Takmynan

Islendik görnüşdäki tekst girizişi bilen ajaýyp görnüşli kelleleri çalt döretmek üçin esasy, aňsat uzaldylan plugin.

Mysal

Typeazuw netijelerini görkezmek üçin aşakdaky meýdana ýazyp başlaň.

Bootstrap-typeahead.js ulanmak

Javascript arkaly ýazuw görnüşine jaň ediň:

$ ( '. görnüşi' ). tipahead ()

Görnüş

Bellik

“Typeahead” funksiýasy bilen bir elementi hasaba almak üçin maglumat atributlaryny goşuň.

<giriş görnüşi = "tekst" data-provide = "typeahead" >  

Usullar

görnüşi (görnüşleri)

Typeazuw görnüşi bilen giriş başlaýar.