JavaScript

“Bootstrap” -yň komponentlerini durmuşa geçiriň, indi 13 sany ýörite jQuery plugin bilen.

Şahsy ýa-da düzülen

Pluginleri aýratynlykda goşup bolýar (käbirlerine baglylyk talap edilse-de) ýa-da birbada. Bootstrap.js we bootstrap.min.js ikisi hem bir faýldaky ähli pluginleri öz içine alýar.

Maglumat atributlary

Bootstrap plaginleriniň hemmesini JavaScript-iň bir setirini ýazman diňe bellik API arkaly ulanyp bilersiňiz. Bu “Bootstrap” -yň ilkinji synp API-si we bir plugin ulananyňyzda ilkinji üns bermeli.

Saidagny, käbir ýagdaýlarda bu funksiýany öçürmek islenip bilner. Şol sebäpden, "data-api" bilen ýerleşdirilen beden atlaryndaky ähli hadysalary birleşdirip, maglumat atributy API-ni öçürmek mümkinçiligini berýäris. Bu şeýle görünýär:

  1. $ ( 'beden' ). öçürilen ( '.data-api' )

Ativea-da bolmasa, belli bir plagini nyşana almak üçin, plugin adyny at giňişligi hökmünde maglumat-api at giňişligi bilen birlikde goşuň:

  1. $ ( 'beden' ). öçürildi ( '.alert.data-api' )

Programmatiki API

Şeýle hem, ähli Bootstrap pluginlerini diňe JavaScript API arkaly ulanyp biljekdigiňize ynanýarys. Publichli jemgyýetçilik API-leri ýeke-täk, zynjyrly usullardyr we ýerine ýetirilen kolleksiýany yzyna gaýtaryp berýär.

  1. $ ( ".btn.danger" ). düwmesi ( "üýtgetmek" ). addClass ( "ýag" )

Methodshli usullar goşmaça opsiýa obýektini, belli bir usuly nyşana alýan setiri ýa-da hiç zady kabul etmeli däldir (deslapky hereket bilen bir plugin açýar):

  1. $ ( "#myModal" ). modal () // başlangyç bilen başlandy
  2. $ ( "#myModal" ). modal ({ klawiatura : ýalan }) // klawiaturasyz başlandy
  3. $ ( "#myModal" ). modal ( 'show' ) // derrew görkezýär we görkezýär

Her bir plugin, çig konstruktoryny "Konstruktoryň" emläginde açýar : $.fn.popover.Constructor. Belli bir plugin mysalyny almak isleseňiz, göni bir elementden alyň : $('[rel=popover]').data('popover').

Dawa ýok

Käwagt beýleki UI çarçuwalary bilen Bootstrap plaginlerini ulanmaly bolýar. Bu ýagdaýlarda at giňişliginde wagtal-wagtal çaknyşyklar bolup biler. .noConflictŞeýle ýagdaý ýüze çyksa, bahasyny yzyna öwürmek isleýän pluginiňize jaň edip bilersiňiz.

  1. var bootstrapButton = $ . fn . düwmesi . noConflict () // $ .fn.buttony öň bellenen baha gaýtaryň
  2. $ . fn . bootstrapBtn = bootstrapButton // ber $ (). bootstrapBtn bootstrap funksiýasy

Wakalar

“Bootstrap”, pluginiň özboluşly hereketleri üçin ýörite wakalary üpjün edýär. Umuman aýdylanda, bular infinitif we geçmiş gatnaşygy görnüşinde gelýär - bu ýerde showbir hadysanyň başynda infinitif (mysal üçin) ýüze çykýar we geçmişdäki gatnaşygy (mysal shown) bir işiň tamamlanmagyna sebäp bolýar.

Infhli infinitif hadysalar öňüni alyş funksiýasyny üpjün edýär. Bu, hereketiň başlamazdan ozal ýerine ýetirilmegini togtatmak ukybyny üpjün edýär.

  1. $ ( '#myModal' ). ( 'görkezmek ' , funksiýa ( e ) {
  2. eger (! maglumatlar ) gaýdyp gelse e . preventDefault () // modalyň görkezilmegini saklaýar
  3. })

Geçişler hakda

Simpleönekeý geçiş effektleri üçin beýleki JS faýllary bilen bir hatarda bootstrap-transition.js- i goşuň. Toplanan (ýa-da kiçeldilen) bootstrap.js ulanýan bolsaňyz, muny goşmagyň zerurlygy ýok - ol eýýäm bar.

Kazyýetleri ulanyň

Geçiş plagininiň birnäçe mysallary:

  • Modallarda süýşmek ýa-da solmak
  • Salgylar öçýär
  • Duýduryşlaryň öçmegi
  • Karusel panelleri

Mysallar

Modallar tertipli, ýöne çeýe, iň az talap edilýän işleýiş we akylly defoltlar bilen gepleşik teklip edýär.

Statik mysal

Aşakdaky sözbaşy, göwre we hereketler toplumy bilen görkezilen modal.

  1. <div class = "modal gizlenmek solýar" >
  2. <div class = "modal-sözbaşy" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > & times; </button>
  4. <h3> Modal sözbaşy </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Bir gowy beden… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn"> Closeapyň </a> _
  11. <a href = "#" class = "btn btn-primary"> Üýtgeşmeleri ýatda saklaň </a>
  12. </div>
  13. </div>

Göni görkeziş

Aşakdaky düwmä basyp, JavaScript arkaly modal çalşyň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.

  1. <! - Modal açmak üçin düwme ->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Demo modalyny işe giriziň </a>
  3.  
  4. <! - Modal ->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-sözbaşy" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modal sözbaşy </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Bir gowy beden… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Closeapyň </button>
  15. <button class = "btn btn-primary" > Üýtgeşmeleri saklaň </button>
  16. </div>
  17. </div>

Ulanylyşy

Maglumat atributlary arkaly

JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-toggle="modal"elementi, düwme ýaly, data-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.

  1. <düwme görnüşi = "düwme" data-toggle = "modal" data-target = "#myModal" > Modal işe girizmek </button>

JavaScript arkaly

myModalJavaScript-iň bir setiri bolan idli modala jaň ediň :

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-backdrop="".

Ady görnüşi gaýybana beýany
fon boolean dogry Modal-fon elementini öz içine alýar. staticAtivea- da bolmasa, basylanda modaly ýapmaýan fon üçin kesgitläň .
klawiatura boolean dogry Gaçmak düwmesi basylanda modaly ýapýar
görkezmek boolean dogry Başlanylanda modaly görkezýär.
uzakdan ýol ýalan

Uzakdan url berilse, jQuery usuly bilen mazmun ýüklener loadwe içine sanjym ediler .modal-body. Maglumat api ulanýan bolsaňyz href, uzakdaky çeşmäni kesgitlemek üçin belligi ulanyp bilersiňiz. Munuň mysaly aşakda görkezilýär:

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

Usullar

.modal (opsiýalar)

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

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

.modal ('üýtgetmek')

Modal bilen el bilen çalşyň.

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

.modal ('görkezmek')

Modal bilen el bilen açýar.

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

.modal ('gizlemek')

Modaly el bilen gizleýär.

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

Wakalar

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

Waka Düşündiriş
görkezmek showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi Bu waka modal ulanyja görünensoň atylýar (css geçişleriniň tamamlanmagyna garaşýar).
gizle Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (css geçişleriniň tamamlanmagyna garaşýar).
  1. $ ( '#myModal' ). üstünde ( 'gizlenen' , funksiýa () {
  2. // bir zatlar et…
  3. })

Deňiz panelinde mysal

“ScrollSpy” plugin, aýlaw pozisiýasyna esaslanyp nav nyşanlaryny awtomatiki täzelemek üçin. Deňiz paneliniň aşagyndaky meýdany aýlaň we işjeň synp üýtgemegine tomaşa ediň. Açylýan aşaky elementler hem görkeziler.

@fat

Mahabat leggings açary, ertirlik nahary sungat partiýasy dolor zähmeti. “Pitchfork yr enim lo-fi” kwi satmazdan ozal. “Tumblr” ferma-stoluň üstünde welosiped hukugy näme bolsa-da. Anim keffiyeh karles kardigan. Velit seitan mcsweeney surat stendinde 3 möjek aýy irure. Cosby switer lomo jean şortikler, williamsburg hoodie minim qui, belki-de siz eşitmedik bolsaňyz we kardigan ynam gaznasy culpa biodiesel wes anderson estetiki. Nihil tatuirovka eden akusamus, krediti biodiesel keffiyeh senetçi ullamco netijesi.

@mdo

Weniam marfa murtly skeytbord, fugiat velit pitchfork sakgalyny özüne çekýär. Freegan sakgal aliqua cupidatat mcsweeney's vero. “Cupidatat dört loko nisi”, “helvetica nulla carles”. Tatuirovka edilen kosbi switer iýmit maşyny, mcsweeney's freegan winil. Lo-fi wes anderson +1 bölüm. Karles estetiki däl maşklary ýuwaşlaşdyrýar. Bruklin senetçilik piwo wise keytar deserunt.

biri

Occaecat commodo aliqua delectus. Fap senet piwo deserunt skateboard ea. “Lomo” welosiped hukuklary, banna mi, velit ea sunt indiki derejeli magna weniýamda ýeke-täk kofe. Lifeokary durmuş id vinil, echo park netijesi alikip banh mi pitchfork. Vero VHS est adipisising. “Consectetur nisi DIY” minimal habarçy sumkasy. “Cred ex”, dowamly “delectus consectetur fanny pack iphone”.

iki

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” blogy, nahar ýük maşyny näme bolsa-da. Sapiente synth id çaklama. “Locavore sed helvetica cliche irony”, ýyldyrym çakmalary, belki-de, “glýutensiz lo-fi fap alikipi” sebäpli eşitmediňiz. Satylmanka zähmet çekiň, terri Riçardson proident ertirlik nahary neskiunt quis cosby switer pariatur keffiyeh ut helvetica senetçisi. Kardigan senet piwo seitan taýýar mahmal. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco ýyldyrymlary.


Ulanylyşy

Maglumat atributlary arkaly

Topbar nawigasiýaňyza skrollspy 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) we data-target=".navbar"haýsy nawig ulanmalydygyny saýlaň. “Scrollspy” .navkomponenti bilen ulanmak islärsiňiz.

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

JavaScript arkaly

JavaScript arkaly scrollspy jaň ediň:

  1. $ ( '#navbar' ). scrollspy ()
Başlar! Navbar baglanyşyklarynda çözülip bilinýän ID nyşanlary bolmaly. Mysal üçin, <a href="#home">home</a>domdaky ýaly bir zada laýyk bolmaly <div id="home"></div>.

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:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset="".

Ady görnüşi gaýybana beýany
ofset sany 10 Aýlanyş ýagdaýyny hasaplanyňyzda ýokardan ýapyljak pikseller.

Wakalar

Waka Düşündiriş
işjeňleşdir Scrolllspy tarapyndan täze bir zat işjeňleşdirilende bu waka ýanýar.

Mysal bellikleri

Contenterli mazmun panellerinden, hatda aşak düşýän menýulardan geçmek üçin çalt, dinamiki tab funksiýasyny goşuň.

Çig denim, Ostin jeans şortikleri hakda eşitmedik bolsaňyz gerek. Nesciunt tofu stumptown aliqua, retro synth master arassalamak. Murtuň gysylmagy, williamsburg carles vegan helvetica. Reprehenderit gassap retro keffiyeh dreamcatcher synth. Cosby switer eu banh mi, qui irure terry richardson ex squid. “Aliquip placeat salvia cillum iphone”. Seitan aliquip quis cardigan amerikan eşigi, gassap 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.


Ulanylyşy

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

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

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

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

Bellik

data-toggle="tab"Diňe bir elementi ýa-da bir elementi görkezip, hiç hili JavaScript ýazmazdan, tab ýa-da tablet nawigasiýasyny işjeňleşdirip bilersiňiz data-toggle="pill". navSalgylara we nav-tabssynplary goşmak, ul“Bootstrap” goýmasynyň stilini ulanar.

  1. <ul class = "nav nav-tabs" >
  2. <li> <a href = "#home" data-toggle = "tab"> Baş sahypa </a> </li >
  3. <li> <a href = "#profile" data-toggle = "tab"> Profil </a> </li >
  4. <li> <a href = "#messages" data-toggle = "tab"> Habarlar </a> </li >
  5. <li> <a href = "#settings" data-toggle = "tab"> Sazlamalar </a> </li >
  6. </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.

  1. <ul class = "nav nav- tabs" id = "myTab" >
  2. <li class = "işjeň" > <a href = "#home"> Öý </a> </li>
  3. <li> <a href = "#profile"> Profil </a> </li>
  4. <li> <a href = "#messages"> Habarlar </a> </li>
  5. <li> <a href = "#settings"> Sazlamalar </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane işjeň" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "habarlar" > ... </div>
  12. <div class = "tab-pane" id = "sazlamalar" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funksiýa () {
  17. $ ( '#myTab a: soňky' ). tab ( 'görkezmek' );
  18. })
  19. </script>

Wakalar

Waka Düşündiriş
görkezmek Bu waka tab goýmasynda ýanýar, ýöne täze goýma görkezilmänkä. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget
görkezildi Bu waka, görkezme görkezilenden soň tab goýmasynda ýanýar. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.targetwe nyşana alyň.event.relatedTarget
  1. $ ( 'a [data-toggle = "tab"]' ). ( 'görkezilen ' , funksiýa ( e ) {
  2. e . nyşan // işjeňleşdirilen goýma
  3. e . baglanyşyklyTarget // öňki goýma
  4. })

Mysallar

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

Öndürijilik sebäplerine görä, gurallar maslahaty we açylan maglumatlar-apis saýlanýar, ýagny olary özüňiz başlamaly .

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

Indiki derejeli berk balak , belki , olar hakda eşitmediňiz. Surat stendiniň sakgal çig denim harpy, wegetarian habarçy sumkasy. Fermer-stol stoly, mcsweeney-iň durnukly kwinoa 8 bitli amerikan eşiginde terri Riçardson winil çembraýy bar . Sakgal saklanýar, kardiganlar banh mi lomo ýyldyrym çakýar. Tofu biodizel williamsburg marfa, dört loko msweeniniň arassa wegetarian kamerasy. Hakykatdanam gülkünç bir ussat , haýsy açar, sahna fermasy-stol banksy Austin twitter , freegan kredit denim ýeke-täk kofe wirusly.

Dört ugur

Giriş toparlaryndaky gurallar

“Bootstrap” giriş toparlary bilen gurallar we açarlary ulananyňyzda, containerislenilmeýän täsirlerden gaça durmak üçin (aşakda resminamalaşdyrylan) opsiýany bellemeli bolarsyňyz.


Ulanylyşy

Gurallar maslahatyny JavaScript arkaly işlediň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Ady görnüşi gaýybana beýany
animasiýa boolean dogry gurallar maslahatyna css solgun geçişini ulanyň
html boolean ýalan Gurallar maslahatyna html salyň. Falsealňyş bolsa, jquery textusuly domda mazmun goýmak üçin ulanylar. XSS hüjümleri barada alada edýän bolsaňyz, tekst ulanyň.
ýerleşdirmek setir | funksiýasy 'ýokarky' gurallar maslahatyny nädip ýerleşdirmeli - ýokarky | aşagy | çep | dogry
saýlaýjy setir ýalan Eger saýlaýjy üpjün edilse, gurallar obýektleri görkezilen nyşanlara berler.
ady setir | funksiýasy '' "titul" belligi ýok bolsa, adaty at bahasy
trigger setir 'ünsi jemlemek' gurallar maslahatynyň nädip başlaýandygyny - basyň | aýlanmak | fokus | gollanma. “Trigger trigger” süýşmegine, giňişlige bölünen, trigger görnüşlerine üns beriň.
gijikdirmek sany | obýekt 0

gural görkezijisini görkezmek we gizlemek (ms) - el bilen işleýän trigger görnüşine degişli däl

San berilse, gizlemek / görkezmek üçin gijikdirme ulanylýar

Obýektiň gurluşy:delay: { show: 500, hide: 100 }

gap setir | ýalan ýalan

Gurallar maslahatyny belli bir elemente goşýarcontainer: 'body'

Başlar! Aýry-aýry gurallar üçin opsiýalary maglumatlar atributlaryny ulanmak arkaly kesgitläp bolýar.

Bellik

  1. <a href = "#" data-toggle = "tooltip" title = "birinji gural gurallary"> üstümden geçiň </a>

Usullar

$ (). gurallar maslahaty (opsiýalar)

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

.tooltip ('görkezmek')

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

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

.tooltip ('gizlemek')

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

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

.tooltip ('üýtgetmek')

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

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

.tooltip ('ýok etmek')

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

  1. $ ( '#element' ). gural görkezmesi ( 'ýok etmek' )

Mysallar

Ikinji derejeli maglumat üçin islendik elemente, “iPad” -daky ýaly mazmunyň kiçi gatlaklaryny goşuň. Açylýan düwmäni açmak üçin düwmä basyň. Tooltip -iň goşulmagyny talap edýär .

Statik popover

Dört wariant bar: ýokarky, sag, aşaky we çep deňleşdirilen.

Iň ýokary

Lobortisdäki “posuere consectetur est”. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover dogry

Lobortisdäki “posuere consectetur est”. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Aşakdaky ýazgy

Lobortisdäki “posuere consectetur est”. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover gitdi

Lobortisdäki “posuere consectetur est”. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Açylýan görnüşde görkezilen bellik, JavaScript-den we bir dataatributyň mazmunyndan döredilmeýär.

Göni görkeziş

Dört ugur


Ulanylyşy

JavaScript arkaly açylýan ýerleri açyň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Ady görnüşi gaýybana beýany
animasiýa boolean dogry gurallar maslahatyna css solgun geçişini ulanyň
html boolean ýalan Html-i açylýan ýere salyň. Falsealňyş bolsa, jquery textusuly domda mazmun goýmak üçin ulanylar. XSS hüjümleri barada alada edýän bolsaňyz, tekst ulanyň.
ýerleşdirmek setir | funksiýasy 'dogry' çykýan ýeri nädip ýerleşdirmeli - ýokarky | aşagy | çep | dogry
saýlaýjy setir ýalan saýlaýjy üpjün edilse, gurallar görkezilen obýektler görkezilen nyşanlara berler
trigger setir 'basyň' popover nädip döredilýär - basyň | aýlanmak | fokus | gollanma
ady setir | funksiýasy '' "titul" häsiýeti ýok bolsa, deslapky at bahasy
mazmuny setir | funksiýasy '' "maglumat-mazmun" häsiýeti ýok bolsa, deslapky mazmun bahasy
gijikdirmek sany | obýekt 0

açylýan ýeri görkezmek we gizlemek (ms) - el bilen işleýän trigger görnüşine degişli däl

San berilse, gizlemek / görkezmek üçin gijikdirme ulanylýar

Obýektiň gurluşy:delay: { show: 500, hide: 100 }

gap setir | ýalan ýalan

Açylýan ýeri belli bir elemente goşýarcontainer: 'body'

Başlar! Aýry-aýry açyjylar üçin opsiýalar maglumat atributlaryny ulanmak arkaly kesgitlenip bilner.

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.

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

.popover ('gizlemek')

Bir elementi açýar.

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

.popover ('üýtgetmek')

Bir elementi açýar.

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

.popover ('ýok etmek')

Bir elementiň açylýan ýerini gizleýär we ýok edýär.

  1. $ ( '#element' ). popover ( 'ýok etmek' )

Mysal duýduryşlary

Bu plugin bilen ähli duýduryş habarlaryna işden çykarmak funksiýasyny goşuň.

Mukaddes guamamol! Iň gowusy özüňizi barlaň, gaty gowy görünmeýärsiňiz.

Aý, gysga! Erroralňyşlyk boldy!

Muny we muny üýtgediň we gaýtadan synanyşyň. Duis mollis, täjir däl luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum oturýar.

Bu çäräni görüň Ora-da muny et


Ulanylyşy

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

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

Bellik

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

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

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

Wakalar

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

Waka Düşündiriş
ýakyn closeBu waka mysal usuly çagyrylanda derrew ýanýar .
ýapyk Bu waka duýduryş ýapylanda atylýar (css geçişleriniň tamamlanmagyna garaşýar).
  1. $ ( '# meniň duýduryşym' ). daňmak ( 'ýapyk' , funksiýa () {
  2. // bir zatlar et…
  3. })

Mysal ulanylyşy

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.

Döwlet

data-loading-text="Loading..."Bir düwmä ýüklemek ýagdaýyny ulanmak üçin goşuň .

  1. <button type = "button" class = "btn btn-primary" data-load-text = "adingüklenýär ..." > adingüklenýän ýagdaý </button>

Leeke üýtgetmek

data-toggle="button"Bir düwmede üýtgemegi işjeňleşdirmek üçin goşuň .

  1. <düwme görnüşi = "düwme" class = "btn btn-primary" data-toggle = "button" > leeke çalyşmak </button>

Bellik gutusy

data-toggle="buttons-checkbox"Btn-toparda bellik gutusynyň stilini üýtgetmek üçin goşuň .

  1. <div class = "btn-group" data-toggle = "düwmeler-bellik gutusy" >
  2. <button type = "button" class = "btn btn-primary" > Çep </button>
  3. <düwme görnüşi = "düwme" synp = "btn btn-başlangyç" > Orta </button>
  4. <button type = "button" class = "btn btn-primary" > Sag </button>
  5. </div>

Radio

data-toggle="buttons-radio"Btn-toparda radio stilini üýtgetmek üçin goşuň .

  1. <div class = "btn-group" data-toggle = "düwmeler-radio" >
  2. <button type = "button" class = "btn btn-primary" > Çep </button>
  3. <düwme görnüşi = "düwme" synp = "btn btn-başlangyç" > Orta </button>
  4. <button type = "button" class = "btn btn-primary" > Sag </button>
  5. </div>

Ulanylyşy

JavaScript arkaly düwmeleri açyň:

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

Görnüş

Hiç

Usullar

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

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

Başlar! Aýratynlygy ulanyp, düwmäni awtomatiki usulda açyp bilersiňiz data-toggle.
  1. <button type = "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.

  1. <düwme görnüşi = "düwme" synp = "btn" maglumat ýüklemek-tekst = "zatlary ýüklemek ..." > ... </button>
Başlar! Firefox, sahypa ýükleriniň arasynda ýapyk ýagdaýy dowam etdirýär . Munuň üçin bir çözgüt ulanmak autocomplete="off".

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

  1. <düwme görnüşi = "düwme" synp = "btn" data-complete-text = "gutardy!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). düwmesi ( 'doly' )
  4. </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:

Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. Leggings occaecat senet piwo fermasy-saçak, çig denim estetiki synth nesciunt, belki-de, olaryň dowamly VHS-ni günäkärleýändigini eşitmediňiz.
Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. Leggings occaecat senet piwo fermasy-saçak, çig denim estetiki synth nesciunt, belki-de, olaryň dowamly VHS-ni günäkärleýändigini eşitmediňiz.
Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. Leggings occaecat senet piwo fermasy-saçak, çig denim estetiki synth nesciunt, belki-de, olaryň dowamly VHS-ni günäkärleýändigini eşitmediňiz.
  1. <div class = "akkordeon" id = "akkordeon2" >
  2. <div class = "akkordeon-topar" >
  3. <div class = "akkordeon-sözbaşy" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _
  5. Apsykylýan topar elementi # 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akkordeon-bedeniň çökmegi" >
  9. <div class = "akkordeon-içki" >
  10. Anim pariatur cliche ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akkordeon-topar" >
  15. <div class = "akkordeon-sözbaşy" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _
  17. Apsykylýan topar elementi # 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akkordeon-bedeniň çökmegi" >
  21. <div class = "akkordeon-içki" >
  22. Anim pariatur cliche ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Şeýle hem, plagini akkordeon belligi bolmazdan ulanyp bilersiňiz. Başga bir elementiň giňelmegini we çökmegini üýtgetmek üçin düwme düzüň.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "ýykylmak" data-target = "#demo" >
  2. ýönekeý çökýän
  3. </button>
  4.  
  5. <div id = "demo" class = "ýykylmak" > </div>

Ulanylyşy

Maglumat atributlary arkaly

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.

Apsykylýan dolandyryşa akkordeona meňzeş topar dolandyryşyny goşmak üçin maglumat atributyny goşuň data-parent="#selector". Muny hereketde görmek üçin demo serediň.

JavaScript arkaly

El bilen işlediň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-parent="".

Ady görnüşi gaýybana beýany
ene-atasy saýlaýjy ýalan Eger saýlaýjy bolsa, bu ýykylýan element görkezilende görkezilen ene-atanyň aşagyndaky ähli çöküp bilýän elementler ýapylar. (adaty akkordeon häsiýetine meňzeýär)
üýtgetmek boolean dogry Apykylýan elementi çakylyk bilen üýtgedýär

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.

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

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

Waka Düşündiriş
görkezmek showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi Bu hadysa, çöküş elementi ulanyja görünen mahaly atylýar (css geçişleriniň tamamlanmagyna garaşýar).
gizle hideBu waka usul çagyrylanda derrew atylýar .
gizlenen Bu hadysa, ulanyjydan çökmek elementi gizlenende atylýar (css geçişleriniň tamamlanmagyna garaşýar).
  1. $ ( '#myCollapsible' ). üstünde ( 'gizlenen' , funksiýa () {
  2. // bir zatlar et…
  3. })

Mysal

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

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

autocomplete="off"Başlangyç brauzer menýusynyň “Bootstrap” görnüşiniň açylmagynyň üstünde görünmeginiň öňüni alarsyňyz .


Ulanylyşy

Maglumat atributlary arkaly

Aboveokardaky mysalda görkezilişi ýaly tipahead funksiýasy bolan bir elementi hasaba almak üçin maglumat atributlaryny goşuň.

JavaScript arkaly

Typazuw görnüşine el bilen jaň ediň:

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

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-source="".

Ady görnüşi gaýybana beýany
Çeşme massiw, funksiýa [] Garşylamak üçin maglumat çeşmesi. Setirler ýa-da funksiýa bolup biler. Funksiýa querygiriş meýdanyndaky baha we yzyna processçagyryş iki argumentden geçýär. processFunksiýa, maglumat çeşmesini göni ýa-da asynkron görnüşde yzyna çagyryşyň ýekeje argumenti arkaly sinhron ulanylyp bilner .
elementler sany 8 Açylýan ýerde görkezilmeli zatlaryň iň köp sany.
MinLength sany 1 Awtomatiki däl teklipleri başlamazdan ozal nyşanlaryň uzynlygy
gabat gelýän funksiýasy duýgur däl Talabyň bir elemente gabat gelýändigini kesgitlemek üçin ulanylýan usul. itemTalaby barlamak üçin ýekeje argumenti kabul edýär . Häzirki soraga giriň this.query. Talap gabat gelýän bolsa, bir bulany gaýtaryň true.
sortlaýjy funksiýasy takyk gabat gelýän,
kese duýgur,
kese duýgur
Awtomatiki netijeleri tertiplemek üçin ulanylýan usul. Argeke argumenti kabul edýär itemswe ýazuw nusgasynyň çägine eýe. Häzirki soraga serediň this.query.
täzeleniji funksiýasy saýlanan elementi görkezýär Saýlanan elementi yzyna gaýtarmak üçin ulanylýan usul. Argeke-täk argumenti kabul edýär itemwe ýazuw nusgasynyň çägine eýe.
tapawutlandyryjy funksiýasy defaulthli gabat gelýän gabat gelýänleri görkezýär Awtomatiki netijeleri görkezmek üçin ulanylýan usul. Argeke argumenti kabul edýär itemwe ýazuw nusgasynyň çägine eýe. Html-i yzyna gaýtarmaly.

Usullar

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

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

Mysal

Çep tarapdaky subnawigasiýa affiks plagininiň göni ýaýlymydyr.


Ulanylyşy

Maglumat atributlary arkaly

Islendik elemente affiks häsiýetini aňsatlyk bilen goşmak üçin diňe data-spy="affix"içalyçylyk etmek isleýän elementiňize goşuň. Soňra bir elementiň haçan ýapyljakdygyny we öçüriljekdigini kesgitlemek üçin ofsetleri ulanyň.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Başlar! Berkidilen elementiň ýagdaýyny we ýakyn ene-atasynyň özüni alyp barşyny dolandyrmaly. Positionerleşişi affix, affix-topwe affix-bottom. Sahypanyň adaty akymyndan mazmuny aýyrýarka, affiks başlanda, ýykylan ene-atany barlamagy ýatdan çykarmaň.

JavaScript arkaly

JavaScript arkaly affiks plaginine jaň ediň:

  1. $ ( '#navbar' ). affiksi ()

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-offset-top="200".

Ady görnüşi gaýybana beýany
ofset sany | funksiýa | obýekt 10 Aýlanyş ýagdaýyny hasaplanyňyzda ekrandan ýapyljak pikseller. Singleekeje san berilse, ofset ýokarky we çep ugurlarda ulanylar. Bir ugry ýa-da birnäçe üýtgeşik ofset diňlemek üçin diňe bir obýekt beriň offset: { x: 10 }. Ofset bilen dinamiki üpjün etmeli bolanyňyzda bir funksiýany ulanyň (käbir täsirli dizaýnlar üçin peýdaly).