Bootstrap үчүн Javascript

Bootstrap'тин компоненттерин жандандырыңыз — азыр 12 ыңгайлаштырылган jQuery плагиндери менен.

модалдар

Жөнөкөй, бирок ийкемдүү, минималдуу талап кылынган функционалдуулук жана акылдуу демейки менен салттуу JavaScript модалдык плагинди кабыл алыңыз.

Ашылма тизмелер

Бул жөнөкөй плагин менен Bootstrap ичиндеги дээрлик бардык нерсеге ачылуучу менюларды кошуңуз. Bootstrap навигация тилкесинде, өтмөктөрдө жана таблеткаларда толук ачылуучу менюну колдоону камтыйт.

Scrollspy

Жылдыруу позициясынын негизинде учурдагы активдүү шилтемени көрсөтүү үчүн навигация тилкеңиздеги шилтемелерди автоматтык түрдө жаңыртуу үчүн scrollspy колдонуңуз.

Которуучу өтмөктөр

Бул плагинди өтмөктөрдү жана таблеткаларды пайдалуураак кылуу үчүн колдонуңуз, аларга жергиликтүү мазмундун өтүлүүчү панелдеринен өтүү мүмкүнчүлүгүн бериңиз.

Кеңештер

jQuery Tipsy плагининин жаңы түрү, Tooltips сүрөттөргө ишенбейт — алар CSS3ти анимациялар үчүн жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттарын колдонушат.

Popovers *

Кошумча маалымат үчүн каалаган элементке, iPadдагылар сыяктуу мазмундун кичинекей катмарларын кошуңуз.

* Tooltips камтылышын талап кылат

Эскертүү билдирүүлөрү

Эскертүү плагини - эскертүүлөргө жакын функцияларды кошуу үчүн кичинекей класс.

Buttons

Баскычтар менен көбүрөөк кылыңыз. Башкаруу баскычынын абалы же куралдар панели сыяктуу башка компоненттер үчүн баскычтардын топторун түзүңүз.

Жыйыштыруу

Аккордеон жана навигация сыяктуу жыйыла турган компоненттер үчүн негизги стилдерди жана ийкемдүү колдоо алыңыз.

Карусель

Мазмундун интерактивдүү слайдшоусун камсыз кылууну каалаган мазмундун көңүлүн ачыңыз.

Typeahead

Каалаган формадагы текст киргизүү менен көрктүү тамгаларды тез түзүү үчүн негизги, оңой кеңейтилген плагин.

Өткөөлдөр *

Жөнөкөй өткөөл эффекттер үчүн модалдарга жылдыруу же эскертүүлөрдү өчүрүү үчүн bootstrap-transition.js бир жолу камтыңыз.

* Плагиндердеги анимация үчүн талап кылынат

Көңүл бургула! Бардык JavaScript плагиндер jQuery акыркы версиясын талап кылат.

Модалдар жөнүндө

Жөнөкөй, бирок ийкемдүү, минималдуу талап кылынган функционалдуулук жана акылдуу демейки менен салттуу JavaScript модалдык плагинди кабыл алыңыз.

Файлды жүктөө

Статикалык мисал

Төмөндө статикалык түрдө көрсөтүлгөн модаль.

Түз демо

Төмөнкү баскычты чыкылдатуу менен JavaScript аркылуу модалды которуштуруу. Ал ылдый жылып, беттин жогору жагына карай өчүп калат.

Демо модалды ишке киргизүү

Bootstrap-modal колдонуу

Модалга javascript аркылуу чалыңыз:

  1. $ ( '#myModal' ). модалдык ( параметрлер )

Параметрлер

аты түрү демейки сүрөттөмө
фон логикалык чын Модалдык көшөгө элементин камтыйт. Же болбосо, staticчыкылдатканда модалды жаппаган фон үчүн көрсөтүңүз.
клавиатура логикалык чын Escape баскычы басылганда модалды жабат
көрсөтүү логикалык чын Инициализацияланганда модалды көрсөтөт.

Белгилөө

Сиз JavaScriptтин бир сабын жазбастан эле баракчаңызда модальдарды оңой иштете аласыз. Жөн гана модалдык элементтин идентификаторуна же 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. <баскыч түрү = "баскыч" класс = "жабуу" маалымат-dississ = "модаль" > × </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'тин модалдык классы модалдык функцияга кирүү үчүн бир нече окуяларды ачып берет.

Окуя Description
көрсөтүү Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн Бул окуя модаль колдонуучуга көрүнгөндөн кийин өчүрүлөт (css өтүүлөрү бүткүчө күтөт).
жашыруу Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
жашырылган Бул окуя модаль колдонуучудан жашырылгандан кийин өчүрүлөт (css өтүүлөрү бүткүчө күтөт).
  1. $ ( '#myModal' ). on ( 'жашыруун' , функция () {
  2. // бир нерсе кыл…
  3. })

ScrollSpy плагини жылдыруу абалына жараша навигация максаттарын автоматтык түрдө жаңыртуу үчүн.

Файлды жүктөө

Scrollspy менен навигация тилкесинин мисалы

Төмөнкү аймакты сыдырып, навигациянын жаңыртылышын көрүңүз. Ылдый түшүүчү суб пункттар да баса белгиленет. Байкап көрүңүз!

@fat

Жарнама леггинс кейтар, бранч ид искусство кечеси долор эмгек. Айрыкча жыл эним ло-фи алар куи сатыла электе. Tumblr фермадан столго велосипед укугу кандай болбосун. Anim keffiyeh carles кардиган. Velit seitan mcsweeney фото стенд 3 карышкыр ай irure. Косби свитер ломо джинсы шорты, Вильямсбург капюшон миним qui, балким, сиз алар жөнүндө укпасаңыз керек жана кардиган траст фонду culpa biodiesel Уэс Андерсон эстетикалык. Нихил татуировкаланган аккусамус, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa мурут скейтборд, adipisicing fugiat velit айры сакал. Фриган сакал аликва купидат Максвини веро. Cupidatat four loko nisi, ea helvetica nulla carles. Татуировкаланган косби свитер тамак-аш ташуучу унаа, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Карлес эстетикалык эмес машыгуу quis gentrify. Brooklyn adipisicing кол өнөрчүлүк сыра вице Кейтар Десерунт.

бир

Occaecat commodo aliqua delectus. Fap кол өнөрчүлүк сыра deserunt скейтборд ea. Lomo велосипед укуктарына ээ болгон, жаналит ea sunt кийинки даражадагы Locavore бир тектүү кофе магна вениамда. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY минимум кабарчы баштык. Cred ex in, 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 блог, culpa мессенжер баштык marfa кандай delectus тамак-аш жүк ташуучу унаа. Sapiente synth id assumenda. Locavore sed helvetica клише ирония, күн күркүрөгөн мышыктар, балким, алар жөнүндө укпагандырсыз. Алар сатылып кеткенге чейин эмгек элитинин орду, Терри Ричардсон проидент brunch nesciunt quis cosby свитер париатур keffiyeh ut helvetica artisan. Кардиган кол өнөрчүлүк сыра сейтан даяр велит. VHS chambray laboris tempor veniam. Аним моллит миним коммодо улламко күн күркүрөйт.


bootstrap-scrollspy.js колдонуу

JavaScript аркылуу scrollspy чакырыңыз:

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

Белгилөө

Үстүнкү тилкеңиздин навигациясына скллсpy ​​жүрүм-турумун оңой кошуу үчүн, жөн гана data-spy="scroll"шпион кылгыңыз келген элементке кошуңуз (көбүнчө бул дене болот).

  1. <body data-spy = "scroll" > ... </body>
Көңүл бургула! Navbar шилтемелеринде чечилүүчү ID максаттары болушу керек. Мисалы, <a href="#home">home</a>домдогу бир нерсеге дал келиши керек <div id="home"></div>.

Методдор

.scrollspy('жаңылоо')

DOMдан элементтерди кошуу же алып салуу менен бирге scrollspy колдонуп жатканда, сиз жаңылоо ыкмасын төмөнкүдөй чакырышыңыз керек:

  1. $ ( '[data-spy="scroll"]' ). ар бир ( функция () {
  2. var $spy = $ ( бул ). scrollspy ( 'жаңылоо' )
  3. });

Параметрлер

аты түрү демейки сүрөттөмө
офсет саны 10 Сыдыруунун ордун эсептөөдө жогорудан жылыш үчүн пикселдер.

Окуялар

Окуя Description
иштетүү Бул окуя жылдыруу аркылуу жаңы нерсе жандырылган сайын күйөт.

Бул плагин жергиликтүү мазмун аркылуу өтүү үчүн тез, динамикалык өтмөк жана таблетка функцияларын кошот.

Файлды жүктөө

Мисал өтмөктөр

Төмөнкү өтмөктөрдү чыкылдатыңыз, ал тургай, ылдый түшүүчү менюлар аркылуу да жашыруун панелдердин ортосунда которулуңуз.

Чийки джинсы, балким, Остин алар жөнүндө уккан эмессиз. Nesciunt tofu Stumptown aliqua, ретро synth мастер тазалоо. Cliche tempor мурут, Williamsburg Carles Vegan helvetica. Reprehenderit касапчы ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон мурунку кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis кардиган америкалык кийим, касапчы 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.


bootstrap-tab.js колдонуу

JavaScript аркылуу табулатура өтмөктөрдү иштетүү (ар бир өтмөк өзүнчө активдештирилиши керек):

  1. $ ( '#менин Табам a' ). чыкылдатуу ( функция ( e ) {
  2. д . preventDefault ();
  3. $ ( бул ). табулатура ( 'көрсөтүү' );
  4. })

Сиз жеке өтмөктөрдү бир нече жол менен иштете аласыз:

  1. $ ( '#myTab a[href="#profile"]' ). табулатура ( 'көрсөтүү' ); // Аты боюнча өтмөктү тандаңыз
  2. $ ( '#myTab a:first' ). табулатура ( 'көрсөтүү' ); // Биринчи өтмөктү танда
  3. $ ( '#myTab a:last' ). табулатура ( 'көрсөтүү' ); // Акыркы өтмөктү тандоо
  4. $ ( '#myTab li:eq(2) a' ). табулатура ( 'көрсөтүү' ); // Үчүнчү өтмөктү тандоо (0-индекстелген)

Белгилөө

data-toggle="tab"Сиз жөн гана белгилөө же data-toggle="pill"элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Өтмөккө navжана nav-tabsкласстарын кошуу ulжүктөө өтмөктүн стилин колдонот.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Башкы </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Профиль </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Кабарлар </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Орнотуулар </a></li>
  6. </ul>

Методдор

$().tab

Өтмөк элементин жана мазмун контейнерин иштетет. Өтмөктө DOMдагы контейнер түйүнү data-targetже максаттуу болушу керек .href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Башкы </a></li>
  3. <li><a href = "#profile" > Профиль </a></li>
  4. <li><a href = "#messages" > Кабарлар </a></li>
  5. <li><a href = "#settings" > Орнотуулар </a></li>
  6. </ul>
  7.  
  8. <div class = "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 = "билдирүүлөр" > ... </div>
  12. <div class = "tab-pane" id = "жөндөөлөр" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функция () {
  17. $ ( '#myTab a:last' ). табулатура ( 'көрсөтүү' );
  18. })
  19. </script>

Окуялар

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

Tooltips жөнүндө

Джейсон Фрейм жазган сонун jQuery.tipsy плагининен шыктанган; Куралдар кеңештери жаңыртылган версия, ал сүрөттөргө ишенбейт, анимациялар үчүн css3 жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттарын колдонушат.

Файлды жүктөө

Tooltips колдонуу мисалы

Куралдар кеңештерин көрүү үчүн төмөнкү шилтемелердин үстүнөн өтүңүз:

Тар шым кийинки деңгээл keffiyeh , балким , алар жөнүндө уккан эмес. Фото кабина сакал чийки джинсы тамга басуу вегетариандык мессенжер баштык Стумптаун. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-бит америкалык кийимдеринде терри Ричардсон винил камерасы бар . Сакал стмптаун, кардигандар banh mi lomo thundercats. Tofu биодизель Вильямсбург Марфа, төрт Локо Максвининин тазалоочу вегетариандык Чамбрей. Чынында эле ирониялык кол өнөрчү кандай гана keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бир келип чыккан кофе вирусу.


bootstrap-tooltip.js колдонуу

JavaScript аркылуу инструментти иштетиңиз:

  1. $ ( '#мисалы' ). кеңеш ( параметрлер )

Параметрлер

аты түрү демейки сүрөттөмө
анимация логикалык чын курал үчүн CSS өчүп өтүүнү колдонуңуз
жайгаштыруу string|function 'жогорку' инструментти кантип жайгаштыруу керек - жогорку | түбү | сол | туура
селектор сап жалган Эгер селектор камсыз кылынса, инструментарий объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет.
аталышы string | функция '' демейки аталыш мааниси, эгерде `title` теги жок болсо
триггер сап 'hover' инструментарий кантип иштетилет - hover | фокус | колдонмо
кечиктирүү саны | объект 0

куралдардын кеңешин көрсөтүү жана жашыруу кечиктирилиши (мс) - кол менен триггер түрүнө тиешелүү эмес

Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат

Объекттин структурасы:delay: { show: 500, hide: 100 }

Көңүл бургула! Жеке инструменттердин параметрлери альтернатива катары маалымат атрибуттарын колдонуу аркылуу көрсөтүлүшү мүмкүн.

Белгилөө

Майнаптуулук үчүн, Tooltip жана Popover data-apis кошулат. Эгер сиз аларды колдонгуңуз келсе, жөн гана селектордук опцияны көрсөтүңүз.

  1. <a href = "#" rel = "tooltip" title = "биринчи инструмент" > курсорду менин үстүмө алып барыңыз </a>

Методдор

$().куралдуу кеңеш(параметрлер)

Элементтердин коллекциясына инструментарий иштеткичти тиркейт.

.tooltip('шоу')

Элементтин кеңешин көрсөтөт.

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

.tooltip('жашыруу')

Элементтин кеңешин жашырат.

  1. $ ( '#элемент' ). кеңеш ( 'жашыруу' )

.tooltip('которуу')

Элементтин кеңешин которуштуруу.

  1. $ ( '#элемент' ). курал үчүн кеңеш ( 'которуу' )

Поповерлер жөнүндө

Кошумча маалымат үчүн каалаган элементке, iPadдагылар сыяктуу мазмундун кичинекей катмарларын кошуңуз.

* Tooltip камтылышын талап кылат

Файлды жүктөө

Мисалы, калкып чыгуу

Поповерди иштетүү үчүн баскычтын үстүнөн өтүңүз.


bootstrap-popover.js колдонуу

JavaScript аркылуу поповерлерди иштетүү:

  1. $ ( '#мисалы' ). popover ( параметрлер )

Параметрлер

аты түрү демейки сүрөттөмө
анимация логикалык чын курал үчүн CSS өчүп өтүүнү колдонуңуз
жайгаштыруу string|function "туура" поповерди кантип жайгаштыруу керек - top | түбү | сол | туура
селектор сап жалган эгерде селектор берилсе, инструменттин объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет
триггер сап 'hover' инструментарий кантип иштетилет - hover | фокус | колдонмо
аталышы string | функция '' демейки аталыш мааниси, эгерде `title` атрибуту жок болсо
мазмун string | функция '' демейки мазмун мааниси, эгерде `data-content` атрибуту жок болсо
кечиктирүү саны | объект 0

поповерди көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес

Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат

Объекттин структурасы:delay: { show: 500, hide: 100 }

Көңүл бургула! Жеке поповерлердин параметрлери альтернатива катары берилиш атрибуттарын колдонуу аркылуу көрсөтүлүшү мүмкүн.

Белгилөө

Майнаптуулук үчүн, Tooltip жана Popover data-apis кошулат. Эгер сиз аларды колдонгуңуз келсе, жөн гана селектордук опцияны көрсөтүңүз.

Методдор

$().popover(параметрлер)

Элементтердин жыйнагы үчүн поповерлерди инициализациялайт.

.popover('шоу')

Элементтерди ачат.

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

.popover('жашыруу')

Калкыма элементтерди жашырат.

  1. $ ( '#элемент' ). popover ( 'жашыруу' )

.popover('toggle')

Элементтердин калкып чыгуусун өчүрөт.

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

Эскертүүлөр жөнүндө

Эскертүү плагини - эскертүүлөргө жакын функцияларды кошуу үчүн кичинекей класс.

Жүктөп алуу

Мисал эскертүүлөр

Эскертүүлөр плагини кадимки эскертүү билдирүүлөрүндө иштейт жана билдирүүлөрдү бөгөттөө.

Ыйык гуакамоле! Өзүңдү текшерип көр, сен өтө жакшы көрүнбөйсүң.

О, шак! Сизде ката кетти!

Муну жана муну өзгөртүп, кайра аракет кылыңыз. Дуйс моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

Бул чараны колдонуңуз Же муну кыл


bootstrap-alert.js колдонуу

Javascript аркылуу эскертүүнү өчүрүүнү иштетүү:

  1. $ ( ". alert" ). эскертүү ()

Белгилөө

data-dismiss="alert"Эскертүүнү автоматтык түрдө жабуу функциясын берүү үчүн жөн гана жабуу баскычын кошуңуз .

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

Методдор

$().alert()

Бардык эскертүүлөрдү жакын функциялар менен оройт. Жабык болгондо эскертүүлөрүңүз жанданып турушу үчүн, аларга .fadeжана .inклассы мурунтан эле колдонулганын текшериңиз.

.alert('жабуу')

Эскертүүнү жабат.

  1. $ ( ". alert" ). эскертүү ( 'жабуу' )

Окуялар

Bootstrap'тин эскертүү классы эскертүү функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя Description
жакын Бул окуя closeинстанция ыкмасы чакырылганда дароо күйөт.
жабык Бул окуя эскертүү жабылгандан кийин өчүрүлөт (css өтүүлөрү бүткүчө күтөт).
  1. $ ( '#менин эскертүүм' ). байланыш ( 'жабык' , функция () {
  2. // бир нерсе кыл…
  3. })

Жөнүндө

Баскычтар менен көбүрөөк кылыңыз. Башкаруу баскычынын абалы же куралдар панели сыяктуу башка компоненттер үчүн баскычтардын топторун түзүңүз.

Файлды жүктөө

Мисал колдонуу

Мамлекеттер жана которуштуруулар үчүн баскычтар плагинин колдонуңуз.

Мамлекеттүү
Жалгыз которуштуруу
Белгилөө кутучасы
Радио

bootstrap-button.js колдонуу

JavaScript аркылуу баскычтарды иштетүү:

  1. $ ( '.nav-tabs' ). баскычы ()

Белгилөө

Маалымат атрибуттары баскыч плагининин ажырагыс бөлүгү болуп саналат. Ар кандай белгилөө түрлөрү үчүн төмөндөгү мисал кодун текшериңиз.

  1. <!-- Кошумча data-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 класс = "btn-group" data-toggle = "баскычтар-радио" >
  13. <button class = "btn" > Сол </button>
  14. <button class = "btn" > Орто </button>
  15. <button class = "btn" > Оң </button>
  16. </div>

Методдор

$().button('которуу')

Басуу абалын которуштуруу. Баскычка ал иштетилгендей көрүнүштү берет.

Көңүл бургула! data-toggleСиз атрибутун колдонуу менен баскычты автоматтык түрдө которууну иштете аласыз .
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('жүктөө')

Жүктөө баскычынын абалын орнотот - баскычты өчүрүп, текстти жүктөө текстине алмаштырат. Жүктөө тексти маалымат атрибутун колдонуу менен баскыч элементинде аныкталышы керек data-loading-text.

  1. <button class = "btn" data-loading-text = "материалдарды жүктөө..." > ... </button>
Көңүл бургула! Firefox өчүрүлгөн абалды барак жүктөөлөрүндө сактайт . Бул үчүн убактылуу чечим колдонуу болуп саналат autocomplete="off".

$().button('reset')

Баскычтын абалын калыбына келтирет - текстти түпнуска текстке алмаштырат.

$().button(сап)

Баскычтын абалын баштапкы абалга келтирет - текстти каалаган маалымат аныкталган текст абалына алмаштырат.

  1. <баскыч класс = "btn" data-complete-text = "бүттү!" > ... </button>
  2. <скрипт>
  3. $ ( '.btn' ). баскычы ( 'толук' )
  4. </script>

Жөнүндө

Аккордеон жана навигация сыяктуу жыйыла турган компоненттер үчүн негизги стилдерди жана ийкемдүү колдоо алыңыз.

Файлды жүктөө

* Transitions плагининин камтылышын талап кылат.

Мисал аккордеон

Collapse плагинин колдонуп, биз жөнөкөй аккордеон стилиндеги виджетти курдук:

Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу VHS уккан эмессиз.
Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу VHS уккан эмессиз.
Anim pariatur cliche reprehenderit, enim eiusmod жогорку жашоого айыптоо Терри Ричардсон жана кальмар. 3 карышкыр ай officia aute, non cupidatat скейтборд dolor brunch. Азык-түлүк ташуучу quinoa nesciunt laborum eiusmod. Brunch 3 Wol Moon tempor, sunt aliqua ага куш койду кальмар жалгыз келип чыккан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Ad vegan excepteur касапчы вице-ломо. Легинстер occaecat кол өнөрчүлүк сыра фермасынан столго, чийки джинсы эстетикалык синтетикалык nesciunt, сиз алар жөнүндө accusamus labore туруктуу VHS уккан эмессиз.

bootstrap-collapse.js колдонуу

JavaScript аркылуу иштетүү:

  1. $ ( ".collapse" ). кыйратуу ()

Параметрлер

аты түрү демейки сүрөттөмө
ата-эне селектор жалган Эгер селектор болсо, анда бул жыйыла турган нерсе көрсөтүлгөндө, көрсөтүлгөн ата-эненин астындагы бардык жыйыла турган элементтер жабылат. (салттуу аккордеон жүрүм-турумуна окшош)
которуштуруу логикалык чын Чакыруудагы жыйыла турган элементти которуштуруу

Белгилөө

Жыйналма элементти башкарууну автоматтык түрдө дайындоо үчүн жөн гана элементке кошуу data-toggle="collapse"жана a . data-targetАтрибут data-targetкыйратуу үчүн CSS селекторун кабыл алат. collapseКлассты жыйыла турган элементке кошууну унутпаңыз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз in.

  1. <баскыч класс = "btn btn-коркунуч" маалымат- которуу = "кыйратуу" маалымат-максат = "#демо" >
  2. жөнөкөй жыгылат
  3. </button>
  4.  
  5. <div id = "демо" класс = "жыйыштыруу" > </div>
Көңүл бургула! Аккордеон сыяктуу топту башкарууну жыйма башкарууга кошуу үчүн, маалымат атрибутун кошуңуз data-parent="#selector". Муну иш жүзүндө көрүү үчүн демонстрацияга кайрылыңыз.

Методдор

.collapse(параметрлер)

Мазмунуңузду жыйма элемент катары иштетет. Кошумча варианттарды кабыл алат object.

  1. $ ( '#myCallpsible' ). кыйратуу ({
  2. которуу : жалган
  3. })

.collapse('toggle')

Жыйналма элементти көрсөтүүгө же жашырууга которот.

.collapse('шоу')

Жыйналма элементти көрсөтөт.

.collapse('жашыруу')

Жыйналма элементти жашырат.

Окуялар

Bootstrap'тин кыйратуу классы кыйратуу функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя Description
көрсөтүү Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн Бул окуя кыйратуу элементи колдонуучуга көрүнгөндө иштетилет (css өтүүлөрү бүткүчө күтөт).
жашыруу Бул окуя hideыкма чакырылганда дароо өчүрүлөт.
жашырылган Коллапс элементи колдонуучудан жашырылганда, бул окуя өчүрүлөт (css өтүүлөрү бүткүчө күтөт).
  1. $ ( '#myCallpsible' ). on ( 'жашыруун' , функция () {
  2. // бир нерсе кыл…
  3. })

Жөнүндө

Каалаган формадагы текст киргизүү менен көрктүү тамгаларды тез түзүү үчүн негизги, оңой кеңейтилген плагин.

Файлды жүктөө

Мисал

Терүү алдыдагы жыйынтыктарды көрсөтүү үчүн төмөнкү талаага терип баштаңыз.


bootstrap-typeahead.js колдонуу

Javascript аркылуу терүүчүгө чалыңыз:

  1. $ ( '.typeahead' ). терүү ()

Параметрлер

аты түрү демейки сүрөттөмө
булак массив [ ] Сурай турган маалымат булагы.
буюмдар саны 8 Ашылма тизмеде көрсөтүлө турган элементтердин максималдуу саны.
дал келүүчү функция тамга сезимсиз Сурамдын бир нерсеге дал келээрин аныктоо үчүн колдонулган ыкма. Бир эле аргументти кабыл алат, ага itemкаршы суроо сыналат. Учурдагы суроого менен кирүү this.query. trueЭгерде суроо дал келсе , логикалык маанини кайтарыңыз .
сорттоочу функция так дал келүү,
регистр сезгич,
регистр сезимсиз
Автотолтуруунун натыйжаларын сорттоо үчүн колдонулган ыкма. Жалгыз аргументти кабыл алат itemsжана typeahead инстанциясынын масштабына ээ. Учурдагы суроого шилтеме менен this.query.
жарык берүүчү функция бардык демейки дал келүүлөрдү баса белгилейт Автотолтуруунун натыйжаларын белгилөө үчүн колдонулган ыкма. Жалгыз аргументти кабыл алат itemжана typeahead инстанциясынын масштабына ээ. html кайтаруу керек.

Белгилөө

Терүү функциясы менен элементти каттоо үчүн маалымат атрибуттарын кошуңуз.

  1. <киргизүү түрү = "текст" маалымат-камсыз кылуу = "typeahead" >

Методдор

.typeahead(параметрлер)

Киргизүүнү терүү алды менен инициализациялайт.