Bootstrap-д зориулсан Javascript

Bootstrap-ийн бүрэлдэхүүн хэсгүүдийг одоо 12 jQuery залгаастай болго.

Модаль

Сайжруулсан, гэхдээ уян хатан, зөвхөн шаардлагатай хамгийн бага функц, ухаалаг өгөгдмөл бүхий уламжлалт javascript модаль залгаасыг авна.

Унтраах цэсүүд

Энэхүү энгийн залгаасыг ашиглан Bootstrap дээрх бараг бүх зүйлд унадаг цэсийг нэмнэ үү. Bootstrap нь навигацын самбар, таб, эм дээр бүрэн унждаг цэсийг дэмждэг.

Scrollspy

Одоогийн идэвхтэй холбоосыг гүйлгэх байрлалд үндэслэн харуулахын тулд навигацийн самбар дээрх холбоосуудыг автоматаар шинэчлэхийн тулд scrollspy ашиглана уу.

Шилжүүлж болох цонхнууд

Энэ залгаасыг ашиглан таб болон шахмалыг локал контентын цонхон дээр сэлгэх боломжийг олгож, илүү ашигтай болгох боломжтой.

Зөвлөмж

jQuery Tipsy залгаасын шинэ хувилбар болох Tooltips нь зураг дээр тулгуурладаггүй бөгөөд тэдгээр нь хөдөлгөөнт дүрслэлд CSS3, локал гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаг.

Popovers *

Хоёрдогч мэдээллийг байрлуулах аливаа элементэд iPad дээрх шиг жижиг контент давхаргыг нэмнэ үү.

* Зөвлөмжийг оруулах шаардлагатай

Анхааруулах мессежүүд

Сэрэмжлүүлэг залгаас нь сэрэмжлүүлэгт ойрхон функцийг нэмэх жижиг анги юм.

Товчлуурууд

Товчлуур ашиглан илүү ихийг хий. Хяналтын товчлуурыг зааж өгөх эсвэл хэрэгслийн мөр гэх мэт бусад бүрэлдэхүүн хэсгүүдийн товчлууруудын бүлгийг үүсгэх.

Нурах

Баян хуур, навигаци зэрэг эвхэгддэг бүрэлдэхүүн хэсгүүдийн үндсэн загвар, уян хатан дэмжлэгийг аваарай.

Карусель

Агуулгатай интерактив слайд үзүүлэхийг хүсч буй аливаа контентын зугаа цэнгэлийг үүсгээрэй.

Урьдчилж бичнэ үү

Ямар ч хэлбэрийн текст оруулгатай гоёмсог бичгийн толгойг хурдан үүсгэх үндсэн, хялбар өргөтгөсөн залгаас.

Шилжилтүүд *

Шилжилтийн энгийн эффектүүдийн хувьд bootstrap-transition.js-г нэг удаа оруулснаар модоор гулсуулж эсвэл дохиог арилгана.

* Plugins дээр хөдөлгөөнт дүрс хийхэд шаардлагатай

Анхаараарай! Бүх javascript залгаасууд jQuery-ийн хамгийн сүүлийн хувилбарыг шаарддаг.

Модалын тухай

Сайжруулсан, гэхдээ уян хатан, зөвхөн шаардлагатай хамгийн бага функц, ухаалаг өгөгдмөл бүхий уламжлалт javascript модаль залгаасыг авна.

Файлыг татах

Статик жишээ

Доорх нь статикаар дүрслэгдсэн модаль юм.

Шууд демо

Доорх товчийг дарж javascript-ээр модаль шилжүүлнэ үү. Энэ нь хуудасны дээд хэсгээс доош гулсаж, бүдгэрнэ.

Демо горимыг эхлүүлэх

Bootstrap-modal ашиглаж байна

Javascript-ээр модаль руу залгана уу:

  1. $ ( '#myModal' ). загвар ( сонголт )

Сонголтууд

Нэр төрөл анхдагч тайлбар
дэвсгэр логик үнэн Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй staticbackdrop-ыг зааж өгнө үү.
гар логик үнэн Escape товчийг дарахад модальыг хаадаг
шоу логик үнэн Эхлэх үед модыг харуулна.

Тэмдэглэгээ

Та javascript-ийн нэг мөр бичихгүйгээр өөрийн хуудсан дээрх модлуудыг хялбархан идэвхжүүлж болно. Модал элементийн id-тай харгалзах эсвэл data-toggle="modal"тохируулагч элемент дээр дарахад л энэ нь таны модыг эхлүүлэх болно.data-target="#foo"href="#foo"

Мөн модаль жишээндээ сонголт нэмэхийн тулд тэдгээрийг хяналтын элемент эсвэл модаль тэмдэглэгээнд нэмэлт өгөгдлийн шинж чанар болгон оруулахад л хангалттай.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Модалыг эхлүүлэх </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dississ = "modal" > × </button>
  4. <h3> Модаль толгой </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Нэг сайхан биетэй... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dississ = "modal" > Хаах </a>
  11. <a href = "#" class = "btn btn-primary" > Өөрчлөлтүүдийг хадгалах </a>
  12. </div>
  13. </div>
Анхаараарай! Хэрэв та өөрийн модыг дотор болон гадагшлуулахыг хүсвэл элементэд .fadeанги нэмэхэд .modal(үүнийг хэрхэн ажиллаж байгааг харахын тулд демо-г үзнэ үү) bootstrap-transition.js-г оруулаарай.

Арга зүй

.modal(сонголт)

Таны агуулгыг модаль байдлаар идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object.

  1. $ ( '#myModal' ). загвар ({
  2. гар : худал
  3. })

.modal('унтраах')

Модалыг гараар сэлгэдэг.

  1. $ ( '#myModal' ). модаль ( 'шилжүүлэх' )

.modal('шоу')

Модалыг гараар нээнэ.

  1. $ ( '#myModal' ). модаль ( 'шоу' )

.modal('нуух')

Модалыг гараар нууна.

  1. $ ( '#myModal' ). модаль ( 'нуух' )

Үйл явдал

Bootstrap-ийн модаль анги нь модаль функцэд холбогдох хэд хэдэн үйл явдлыг дэлгэдэг.

Үйл явдал Тодорхойлолт
шоу showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн Модалыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (css шилжилтийг дуусгахыг хүлээх болно).
нуугдах hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
далд Модал нь хэрэглэгчээс нуугдаж дуусах үед энэ үйл явдал идэвхждэг (css шилжилт дуусахыг хүлээх болно).
  1. $ ( '#myModal' ). дээр ( 'далд' , функц () {
  2. // ямар нэг юм хий…
  3. })

ScrollSpy залгаас нь гүйлгэх байрлалд тулгуурлан навигацийн зорилтуудыг автоматаар шинэчлэх зориулалттай.

Файлыг татах

Srollspy-тэй navbar-н жишээ

Доорх хэсгийг гүйлгэж, навигацийн шинэчлэлтийг үзээрэй. Унждаг дэд зүйлүүдийг мөн тодруулна. Оролдоод үз!

@ тарган

Ad leggings keytar, brunch id art party dolor labore. Тэд qui зарагдахаас өмнө сэрээ yr enim lo-fi. Tumblr фермээс ширээний дугуйн эрх ямар ч байсан. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 чоно сар irure. Cosby цамц lomo жинсэн шорт, Williamsburg hoodie minim Qui та тэдний талаар сонсоогүй байж магадгүй ба кардиган итгэлцлийн сан culpa biodiesel Wes Anderson aesthetic. Nihil шивээстэй accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Вениам марфа сахалтай скейтборд, adipisicing fugiat velit сэрээ сахал. Freegan сахал aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Шивээстэй косби цамц хүнсний ачааны машин, Mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Карлес гоо зүйн бус дасгал сургуулилт нь зөөлөн биш юм. Brooklyn adipisicing гар урлалын шар айраг дэд keytar deserunt.

нэг

Commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Ломо дугуйн эрхийг adipisicing banh mi, velit ea sunt sunt next level locavore in one orgin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY хамгийн бага элч цүнх. Cred ex in, тогтвортой delectus consectetur fanny pack Iphone.

хоёр

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, consequat hoodie gluten free lo-fi fap aliquip-ийн талаар та сонсоогүй байх. Тэд зарагдаж дуусахаас өмнө ажилчид, Терри Ричардсон өглөөний цайны хоолонд оров. Cardigan craft шар айраг seitan бэлэн velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


bootstrap-scrollspy.js ашиглаж байна

Javascript-ээр дамжуулан scrollspy руу залгана уу:

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

Тэмдэглэгээ

Топбарын навигацдаа гүйлгэх үйлдлийг хялбархан нэмэхийн тулд тагнахыг data-spy="scroll"хүсэж буй элемент дээрээ нэмэхэд л хангалттай (ихэнхдээ энэ нь их бие байх болно).

  1. <body data-spy = "scroll" > ... </body>
Анхаараарай! Navbar холбоосууд нь шийдвэрлэх боломжтой id зорилтуудтай байх ёстой. Жишээ нь, <a href="#home">home</a>заавал байх ёстой нь дом доторх зүйлтэй тохирч байх ёстой <div id="home"></div>.

Арга зүй

.scrollspy('шинэчлэх')

Scrollspy-г DOM-д элемент нэмэх, хасахтай хамт ашиглах үед та дараах байдлаар сэргээх аргыг дуудах хэрэгтэй болно.

  1. $ ( '[data-spy="scroll"]' ). тус бүр ( функц () {
  2. var $spy = $ ( энэ ). scrollspy ( 'шинэчлэх' )
  3. });

Сонголтууд

Нэр төрөл анхдагч тайлбар
офсет тоо 10 Гүйлгэх байрлалыг тооцоолохдоо дээд талаас нь солих пиксел.

Үйл явдал

Үйл явдал Тодорхойлолт
идэвхжүүлэх Scrollspy-ээр шинэ зүйл идэвхжих болгонд энэ үйл явдал идэвхждэг.

Энэхүү залгаас нь орон нутгийн контентоор шилжихэд хурдан, динамик таб болон эм функцийг нэмдэг.

Файлыг татах

Жишээ таб

Доорх цонхнууд дээр дарж, унадаг цэсээр ч гэсэн далд цонхнуудын хооронд шилжинэ үү.

Түүхий жинсэн өмд Та магадгүй тэдний талаар сонсоогүй жинсэн шорт Остин. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Сахал клише tempor, Williamsburg carles vegan helvetica. Reprehenderit яргачин чимэг keffiyeh dreamcatcher synth. Косби цамц, qui irure Терри Ричардсон экс далайн амьтан. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, махчин nisi qui voluptate.

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.


bootstrap-tab.js ашиглаж байна

Жаваскриптээр дамжуулан чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

  1. $ ( '#myTab a' ). дарна уу ( функц ( e ) {
  2. e . урьдчилан сэргийлэхDefault ();
  3. $ ( энэ ). таб ( 'үзүүлэх' );
  4. })

Та тусдаа табуудыг хэд хэдэн аргаар идэвхжүүлж болно:

  1. $ ( '#myTab a[href="#profile"]' ). таб ( 'үзүүлэх' ); // Табыг нэрээр нь сонгоно уу
  2. $ ( '#myTab a:first' ). таб ( 'үзүүлэх' ); // Эхний табыг сонгоно уу
  3. $ ( '#myTab a: last' ). таб ( 'үзүүлэх' ); // Сүүлийн табыг сонгоно уу
  4. доллар ( '#myTab li:eq(2) a' ). таб ( 'үзүүлэх' ); // Гурав дахь табыг сонгоно уу (0 индексжүүлсэн)

Тэмдэглэгээ

Та ямар нэг JavaScript бичихгүйгээр зүгээр л нэг элемент дээр зааж өгснөөр таб data-toggle="tab"эсвэл эмийн навигацийг идэвхжүүлж болно. Таб дээр болон ангиудыг data-toggle="pill"нэмснээр ачаалах табын хэв маягийг хэрэглэнэ.navnav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Нүүр хуудас </a></li>
  3. <li><a href = "#профайл" data-toggle = "tab" > Профайл </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Мессежүүд </a></li>
  5. <li><a href = "#тохиргоо" data-toggle = "tab" > Тохиргоо </a></li>
  6. </ul>

Арга зүй

$().tab

Таб элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-targetэсвэл a байх ёстой .href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "идэвхтэй" ><a href = "#home" > Нүүр хуудас </a></li>
  3. <li><a href = "#profile" > Профайл </a></li>
  4. <li><a href = "#messages" > Мессежүүд </a></li>
  5. <li><a href = "#тохиргоо" > Тохиргоо </a></li>
  6. </ul>
  7.  
  8. <div анги = "tab-content" >
  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 = "тохиргоо" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функц () {
  17. $ ( '#myTab a: last' ). таб ( 'үзүүлэх' );
  18. })
  19. </script>

Үйл явдал

Үйл явдал Тодорхойлолт
шоу Энэ үйл явдал tab шоу дээр гарч ирдэг боловч шинэ таб харагдахаас өмнө. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
үзүүлсэн Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' ). дээр ( 'харуулсан' , функц ( e ) {
  2. e . зорилтот // идэвхжүүлсэн таб
  3. e . холбоотойTarget // өмнөх таб
  4. })

Зөвлөмжийн тухай

Жэйсон Фреймийн бичсэн гайхалтай jQuery.tipsy залгаасаас санаа авсан; Зөвлөмжүүд нь зураг дээр тулгуурладаггүй, хөдөлгөөнт дүрслэлд css3, локал гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаггүй шинэчилсэн хувилбар юм.

Файлыг татах

Хэрэгслийн зөвлөмжийг ашиглах жишээ

Доорх холбоосууд дээр хулганаа гүйлгэж, зөвлөмжийг харна уу:

Бариу өмд дараагийн түвшний keffiyeh та тэдний талаар сонсоогүй байх. Фото лангуу сахал түүхий жинсэн үсэг веган мессенжер цүнх Stumptown. Фермээс ширээнд суух seitan, Mcsweeney's fixie sustainable quinoa 8-бит америк хувцас нь Терри Ричардсон винил камертай. Сахал хожуул, кардиган банх ми ломо аянга. Дүпү биодизель Виллиамсбург Марфа, дөрвөн Локо Максвинигийн цэвэршүүлэх веган Chambray. Үнэхээр инээдтэй гар урлаач ямар ч keytar , scenester farm-to-table banksy Остин twitter бариул freegan cred raw denim single-origin coffee virus.


bootstrap-tooltip.js ашиглаж байна

Жаваскриптээр зааварчилгааг идэвхжүүлнэ үү:

  1. $ ( '#жишээ' ). зөвлөмж ( сонголтууд )

Сонголтууд

Нэр төрөл анхдагч тайлбар
хөдөлгөөнт дүрс логик үнэн хэрэгсэлд css бүдгэрүүлэх шилжилтийг хэрэглээрэй
байрлуулах мөр|функц 'дээд' зөвлөмжийг хэрхэн байрлуулах вэ - дээд | доод | зүүн | зөв
сонгогч мөр худлаа Хэрэв сонгогчийг өгсөн бол хэрэгслийн зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ.
гарчиг мөр | функц '' "гарчиг" шошго байхгүй бол өгөгдмөл гарчгийн утга
гох мөр 'нүүр' зааварчилгааг хэрхэн идэвхжүүлдэг вэ - хулганаа аваач | төвлөрөл | гарын авлага
саатал тоо | обьект 0

Хэрэгслийн зөвлөмжийг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { show: 500, hide: 100 }

Анхаараарай! Өгөгдлийн шинж чанаруудыг ашиглах замаар тус тусын зөвлөмжийн сонголтуудыг зааж өгч болно.

Тэмдэглэгээ

Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-ыг ашиглах боломжтой. Хэрэв та тэдгээрийг ашиглахыг хүсвэл сонгогчийн сонголтыг зааж өгнө үү.

  1. <a href = "#" rel = "tooltip" title = "анхны зөвлөгөө" > миний дээр гүйлгээрэй </a>

Арга зүй

$().хэрэгслийн зөвлөгөө(сонголт)

Элементийн цуглуулгад хэрэгслийн зааварчилгааг хавсаргана.

.tooltip('шоу')

Элементийн зөвлөмжийг харуулна.

  1. $ ( '#элемент' ). зөвлөмж ( 'шоу' )

.tooltip('нуух')

Элементийн зөвлөмжийг нууна.

  1. $ ( '#элемент' ). зөвлөмж ( 'нуух' )

.хэрэгслийн зөвлөгөө('унтраах')

Элементийн зөвлөмжийг сэлгэх.

  1. $ ( '#элемент' ). хэрэгслийн зөвлөмж ( 'шилжүүлэх' )

Поповеруудын тухай

Хоёрдогч мэдээллийг байрлуулах аливаа элементэд iPad дээрх шиг жижиг контент давхаргыг нэмнэ үү.

* Зөвлөмжийг оруулах шаардлагатай

Файлыг татах

Жишээ нь хулганы попов

Поповерыг идэвхжүүлэхийн тулд товчлуур дээр хулганаа нээнэ үү.


bootstrap-popover.js ашиглаж байна

Javascript-ээр поповеруудыг идэвхжүүлэх:

  1. $ ( '#жишээ' ). popover ( сонголт )

Сонголтууд

Нэр төрөл анхдагч тайлбар
хөдөлгөөнт дүрс логик үнэн хэрэгсэлд css бүдгэрүүлэх шилжилтийг хэрэглээрэй
байрлуулах мөр|функц 'зөв' popover хэрхэн байрлуулах - дээд | доод | зүүн | зөв
сонгогч мөр худлаа хэрэв сонгогч өгөгдсөн бол хэрэгслийн зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ
гох мөр 'нүүр' зааварчилгааг хэрхэн идэвхжүүлдэг вэ - хулганаа аваач | төвлөрөл | гарын авлага
гарчиг мөр | функц '' `гарчиг` шинж байхгүй бол өгөгдмөл гарчгийн утга
агуулга мөр | функц '' `data-content` шинж чанар байхгүй бол агуулгын өгөгдмөл утга
саатал тоо | обьект 0

поповерыг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { show: 500, hide: 100 }

Анхаараарай! Өгөгдлийн шинж чанаруудыг ашиглан хувь хүний ​​​​поповеруудын сонголтыг зааж өгч болно.

Тэмдэглэгээ

Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-ыг ашиглах боломжтой. Хэрэв та тэдгээрийг ашиглахыг хүсвэл сонгогчийн сонголтыг зааж өгнө үү.

Арга зүй

$().popover(сонголт)

Элементийн цуглуулгад зориулсан поповеруудыг эхлүүлнэ.

.popover('шоу')

Поповын элементүүдийг харуулна.

  1. $ ( '#элемент' ). popover ( 'шоу' )

.popover('нуух')

Элементүүдийн поповыг нууна.

  1. $ ( '#элемент' ). popover ( 'нуух' )

.popover('унтраах')

Элементүүдийн поповыг унтраадаг.

  1. $ ( '#элемент' ). popover ( 'шилжүүлэх' )

Анхааруулгын тухай

Сэрэмжлүүлэг залгаас нь сэрэмжлүүлэгт ойрхон функцийг нэмэх жижиг анги юм.

Татаж авах

Жишээ сэрэмжлүүлэг

Сэрэмжлүүлэг залгаас нь ердийн сэрэмжлүүлэг мессеж дээр ажилладаг бөгөөд мессежийг блоклодог.

Ариун гуакамоле! Өөрийгөө шалгаарай, чи тийм ч сайн харагдахгүй байна.

Өө гэнэт! Танд алдаа гарлаа!

Үүнийг болон үүнийг өөрчлөөд дахин оролдоно уу. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.

Энэ арга хэмжээг авна уу Эсвэл үүнийг хий


bootstrap-alert.js ашиглаж байна

Javascript-ээр дамжуулан анхааруулгыг хаахыг идэвхжүүлэх:

  1. $ ( ". Анхааруулга" ). сэрэмжлүүлэг ()

Тэмдэглэгээ

data-dismiss="alert"Автоматаар хаах функцийг өгөхийн тулд хаах товчлуур дээрээ нэмэхэд л хангалттай .

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

Арга зүй

$() дохиолол()

Бүх сэрэмжлүүлгийг ойрын функцээр хаадаг. Таны сэрэмжлүүлэг хаагдсан үед анихын тулд тэдгээрт .fadeболон .inангиллыг аль хэдийн ашигласан эсэхийг шалгаарай.

.alert('хаах')

Сэрэмжлүүлэгийг хаадаг.

  1. $ ( ". Анхааруулга" ). сэрэмжлүүлэг ( 'хаах' )

Үйл явдал

Bootstrap-ийн дохиоллын анги нь дохиоллын функцэд холбогдох хэд хэдэн үйл явдлыг илрүүлдэг.

Үйл явдал Тодорхойлолт
хаах closeИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
хаалттай Сэрэмжлүүлэг хаагдсан үед энэ үйл явдал идэвхждэг (css шилжилт дуусахыг хүлээх болно).
  1. $ ( '#миний сэрэмжлүүлэг' ). холбох ( 'хаалттай' , функц () {
  2. // ямар нэг юм хий…
  3. })

тухай

Товчлуур ашиглан илүү ихийг хий. Хяналтын товчлуурыг зааж өгөх эсвэл хэрэгслийн мөр гэх мэт бусад бүрэлдэхүүн хэсгүүдийн товчлууруудын бүлгийг үүсгэх.

Файлыг татах

Хэрэглээний жишээ

Товчлуурын залгаасыг төлөв болон унтраалга ашиглана уу.

Төрийн мэдээлэлтэй
Нэг унтраалга
Checkbox
Радио

bootstrap-button.js ашиглаж байна

Javascript-ээр товчлууруудыг идэвхжүүлэх:

  1. $ ( '.nav-tabs' ). товчлуур ()

Тэмдэглэгээ

Өгөгдлийн шинж чанарууд нь товчлуурын залгаастай салшгүй холбоотой. Төрөл бүрийн тэмдэглэгээний төрлийг доорх жишээ кодыг харна уу.

  1. <!-- Дата-toggle="button" нэмнэ үү, нэг товчлуур дээр сэлгэхийг идэвхжүүлнэ үү -->
  2. <button class = "btn" data-toggle = "button" > Нэг сэлгэх </button>
  3.  
  4. <!-- btn-group дээр шалгах хайрцагны хэв маяг солихын тулд data-toggle="buttons-checkbox" нэмнэ үү -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Зүүн </button>
  7. <button class = "btn" > Дунд </button>
  8. <button class = "btn" > Баруун </button>
  9. </div>
  10.  
  11. <!-- btn-group дээр радио хэв маягийг сэлгэхийн тулд data-toggle="buttons-radio" нэмнэ үү -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Зүүн </button>
  14. <button class = "btn" > Дунд </button>
  15. <button class = "btn" > Баруун </button>
  16. </div>

Арга зүй

$().товчлуур('сэлгэх')

Түлхэх төлөвийг сэлгэх. Товчлуурыг идэвхжүүлсэн мэт харагдуулна.

Анхаараарай! data-toggleТа атрибутыг ашиглан товчлуурыг автоматаар солихыг идэвхжүүлж болно .
  1. <button class = "btn" data-toggle = "button" > </button>

$().товчлуур('ачаалах')

Товчлуурын төлөвийг ачаалахаар тохируулна - товчлуурыг идэвхгүй болгож, текстийг ачаалах текст рүү шилжүүлнэ. Ачаалах текстийг өгөгдлийн шинж чанарыг ашиглан товчлуурын элемент дээр тодорхойлсон байх ёстой data-loading-text.

  1. <button class = "btn" data-loading-text = "зүйлийг ачаалж байна..." > ... </button>
Анхаараарай! Firefox нь хуудас ачаалахад идэвхгүй болсон төлөвийг хадгалдаг . Үүнийг шийдвэрлэх арга бол ашиглах явдал юм autocomplete="off" юм.

$().товчлуур('дахин тохируулах')

Товчлуурын төлөвийг дахин тохируулах - текстийг эх текст рүү шилжүүлнэ.

$().товчлуур(мөр)

Товчлуурын төлөвийг дахин тохируулах - текстийг ямар ч өгөгдөлд тодорхойлсон текст төлөв рүү шилжүүлнэ.

  1. <button class = "btn" data-complete-text = "дууссан!" > ... </button>
  2. <скрипт>
  3. $ ( '.btn' ). товчлуур ( 'дуусгах' )
  4. </script>

тухай

Баян хуур, навигаци зэрэг эвхэгддэг бүрэлдэхүүн хэсгүүдийн үндсэн загвар, уян хатан дэмжлэгийг аваарай.

Файлыг татах

* Transitions залгаасыг оруулахыг шаарддаг.

Жишээ нь баян хуур

Нурах залгаасыг ашиглан бид баян хуурын хэв маягийн энгийн виджетийг бүтээсэн:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний accusamus labore тогтвортой VHS-ийн талаар сонсоогүй байх.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний accusamus labore тогтвортой VHS-ийн талаар сонсоогүй байх.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний accusamus labore тогтвортой VHS-ийн талаар сонсоогүй байх.

bootstrap-collapse.js ашиглаж байна

Javascript-ээр идэвхжүүлэх:

  1. $ ( ". нурах" ). нурах ()

Сонголтууд

Нэр төрөл анхдагч тайлбар
эцэг эх сонгогч худлаа Хэрэв сонгогч бол энэ эвхэгддэг зүйлийг харуулах үед заасан эхийн доорх бүх эвхэгддэг элементүүд хаагдах болно. (уламжлалт баян хуурын зан үйлтэй төстэй)
солих логик үнэн Дуудлага хийх үед эвхэгддэг элементийг асаана

Тэмдэглэгээ

Эвхэгддэг элементийн удирдлагыг автоматаар хуваарилахын тулд элемент дээр нэмэх data-toggle="collapse"болон "a "-д л болно. data-targetУг data-targetатрибут нь задлах үйлдэл хийх css сонгогчийг хүлээн авдаг. collapseЭвхэгддэг элементэд ангийг нэмэхээ мартуузай . Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. энгийн эвхэгддэг
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Анхаараарай! Эвхэгддэг удирдлагад баян хуур шиг бүлгийн удирдлагыг нэмэхийн тулд дата атрибутыг нэмнэ үү data-parent="#selector". Үүнийг хэрхэн ажиллаж байгааг харахын тулд демо-г үзнэ үү.

Арга зүй

.collapse(сонголт)

Таны агуулгыг эвхэгддэг элемент болгон идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object.

  1. $ ( '#myCollapsible' ). ��урах ({
  2. солих : худал
  3. })

.collapse('унтраах')

Эвхэгддэг элементийг харуулах эсвэл нуух горимд шилжүүлнэ.

.collapse('шоу')

Эвхэгддэг элементийг харуулж байна.

.collapse('нуух')

Эвхэгддэг элементийг нууна.

Үйл явдал

Bootstrap-ийн уналтын анги нь уналтын функцэд холбогдох хэд хэдэн үйл явдлыг илрүүлдэг.

Үйл явдал Тодорхойлолт
шоу showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн Уналтын элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (css шилжилтийг дуусгахыг хүлээх болно).
нуугдах hideАрга дуудагдсан үед энэ үйл явдал шууд идэвхждэг .
далд Хэрэглэгчээс нуралтын элементийг нуусан үед энэ үйл явдал идэвхждэг (css шилжилтийг дуусгахыг хүлээх болно).
  1. $ ( '#myCollapsible' ). дээр ( 'далд' , функц () {
  2. // ямар нэг юм хий…
  3. })

тухай

Ямар ч хэлбэрийн текст оруулгатай гоёмсог бичгийн толгойг хурдан үүсгэх үндсэн, хялбар өргөтгөсөн залгаас.

Файлыг татах

Жишээ

Бичгийн өмнөх үр дүнг харуулахын тулд доорх талбарт бичиж эхлээрэй.


bootstrap-typeahead.js ашиглаж байна

javascript-ээр дамжуулан бичгийн толгойг дуудах:

  1. $ ( '.typeahead' ). бичгийн толгой ()

Сонголтууд

Нэр төрөл анхдагч тайлбар
эх сурвалж массив [ ] Асуулга хийх өгөгдлийн эх сурвалж.
зүйлс тоо 8 Унждаг цэсэнд харуулах зүйлсийн дээд тоо.
тааруулагч функц том жижиг үсгийн мэдрэмжгүй Асуулга нь тухайн зүйлтэй таарч байгаа эсэхийг тодорхойлоход ашигладаг арга. Асуултыг шалгах ганц аргументыг itemхүлээн авна. -аар одоогийн асуулгад хандана уу this.query. trueХэрэв асуулга таарч байвал логикийг буцаана уу.
ангилагч функц яг таарч, том жижиг үсэг
, том жижиг жижиг
Автоматаар гүйцээх үр дүнг эрэмбэлэх арга. Ганц аргументыг itemsхүлээн зөвшөөрч, бичихийн өмнөх жишээний хамрах хүрээтэй. Одоогийн асуулгад this.query.
тодруулагч функц бүх өгөгдмөл таарчуудыг тодруулна Автоматаар гүйцээх үр дүнг тодруулахад ашигладаг арга. Ганц аргументыг itemхүлээн зөвшөөрч, бичихийн өмнөх жишээний хамрах хүрээтэй. html буцаах ёстой.

Тэмдэглэгээ

Бичгийн функцтэй элементийг бүртгэхийн тулд өгөгдлийн шинж чанаруудыг нэмнэ үү.

  1. <оролтын төрөл = "текст" data-provide = "typeahead" >

Арга зүй

.typeahead(сонголт)

Бичгийн толгойтой оролтыг эхлүүлнэ.