JavaScript

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

Көңүл бургула! Бул документтер расмий түрдө колдоого алынбай калган v2.3.2 үчүн. Bootstrap акыркы версиясын текшериңиз!

Жеке же түзүлгөн

Плагиндер өзүнчө (айрымдарында талап кылынган көз карандылыктары бар) же бир эле учурда киргизилиши мүмкүн. bootstrap.js жана bootstrap.min.js экөө тең бир файлдагы бардык плагиндерди камтыйт.

Маалымат атрибуттары

Сиз бардык Bootstrap плагиндерин JavaScriptтин бир сабын жазбастан гана белгилөө API аркылуу колдоно аласыз. Бул Bootstrap'тин биринчи класстагы API'си жана плагинди колдонууда биринчи көңүл бурушуңуз керек.

Айтор, кээ бир учурларда бул функцияны өчүрүү туура болушу мүмкүн. Ошондуктан, биз ошондой эле ''data-api'' менен болгон дененин аталыштары мейкиндигиндеги бардык окуяларды алып салуу менен API маалымат атрибутун өчүрүү мүмкүнчүлүгүн беребиз. Бул төмөнкүдөй көрүнөт:

  1. $ ( 'дене' ). өчүрүлгөн ( '.data-api' )

Же болбосо, белгилүү бир плагинди максаттуу үчүн, жөн гана плагиндин атын төмөнкүдөй data-api аттар мейкиндиги менен кошо аттар мейкиндиги катары кошуңуз:

  1. $ ( 'дене' ). өчүк ( '.alert.data-api' )

Программалык API

Ошондой эле сиз бардык Bootstrap плагиндерин JavaScript API аркылуу гана колдоно аласыз деп ишенебиз. Бардык жалпыга ачык API'лер жалгыз, чынжырлануучу ыкмалар болуп саналат жана аларга ылайык иштелген коллекцияны кайтарып берет.

  1. $ ( ".btn. Danger" ). баскычы ( «которуу» ). addClass ( "май" )

Бардык методдор кошумча опциялар объектисин, белгилүү бир ыкманы көздөгөн сапты же эч нерсени (демейки жүрүм-туруму бар плагинди баштаган) кабыл алышы керек:

  1. $ ( "#myModal" ). modal () // демейки менен инициализацияланган
  2. $ ( "#myModal" ). modal ({ клавиатура : false }) // баскычтопсуз инициализацияланган
  3. $ ( "#myModal" ). modal ( 'show' ) // инициализациялайт жана көрсөтүүнү дароо чакырат

Ар бир плагин өзүнүн чийки конструкторун `Constructor` касиетинде көрсөтөт: $.fn.popover.Constructor. Эгер сиз белгилүү бир плагиндин үлгүсүн алгыңыз келсе, аны түздөн-түз элементтен чыгарып алыңыз: $('[rel=popover]').data('popover').

Конфликт жок

Кээде башка UI алкактары менен Bootstrap плагиндерин колдонуу керек болот. Мындай шарттарда аттар мейкиндигинде кагылышуулар кээде пайда болушу мүмкүн. Эгер мындай болуп калса, сиз .noConflictмаанисин кайтарууну каалаган плагинге чалсаңыз болот.

  1. var bootstrapButton = $ . fn . баскычы . noConflict () // $.fn.buttonду мурда дайындалган мааниге кайтарыңыз
  2. $ . fn . bootstrapBtn = bootstrapButton // $().bootstrapBtn жүктөөчү функцияны бериңиз

Окуялар

Bootstrap көпчүлүк плагиндин уникалдуу аракеттери үчүн ыңгайлаштырылган окуяларды камсыз кылат. Негизинен булар инфинитив жана өткөн чак формасында келет - мында инфинитив (мис. show) окуянын башталышында, ал эми анын өткөн чак формасы (мис. shown) иш-аракеттин аяктаганда триггери болот.

Бардык инфинитив окуялар preventDefault функциясын камсыз кылат. Бул аракеттин аткарылышын ал башталганга чейин токтотуу мүмкүнчүлүгүн берет.

  1. $ ( '#myModal' ). on ( 'көрсөтүү' , функция ( e ) {
  2. эгерде ( ! маалыматтар ) e . preventDefault () // модалды көрсөтүүнү токтотот
  3. })

Өтүүлөр жөнүндө

Жөнөкөй өткөөл эффекттер үчүн, башка JS файлдарына бир жолу bootstrap-transition.js киргизиңиз. Эгерде сиз компиляцияланган (же кичирейтилген) bootstrap.js колдонуп жатсаңыз, муну кошуунун кереги жок — ал мурунтан эле бар.

Колдонуу учурлары

Өткөөл плагиндин бир нече мисалдары:

  • Модалдарда жылмалоо же өчүп калуу
  • Өчүп бара жаткан өтмөктөр
  • Өчүп бараткан эскертүүлөр
  • Жылдыруучу карусель панелдери

Мисалдар

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

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

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

  1. <div class = "модалдык жашыруу" >
  2. <div class = "modal-header" >
  3. <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "модалдык" aria-жашыруун = "чындык" > × </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" > Жабуу </a>
  11. <a href = "#" class = "btn btn-primary" > Өзгөртүүлөрдү сактоо </a>
  12. </div>
  13. </div>

Түз демо

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

  1. <!-- Модалды иштетүү үчүн баскыч -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Демо модалды ишке киргизүү </a>
  3.  
  4. <!-- Модал -->
  5. <div id = "myModal" класс = "модалдык жашыруу өчүп калуу" tabindex = "-1" ролу = "диалог" aria-labelledby = "myModalLabel" aria-hidden = "чындык" >
  6. <div class = "modal-header" >
  7. <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "модалдык" aria-жашыруун = "чыныгы" > × </button>
  8. <h3 id = "myModalLabel" > Модалдык баш </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Бир жакшы дене… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data- dississ = "modal" aria-hidden = "true" > Жабуу </button>
  15. <button class = "btn btn-primary" > Өзгөртүүлөрдү сактоо </button>
  16. </div>
  17. </div>

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript жазбастан модалды активдештирүү. Которуу үчүн белгилүү бир модалды максаттоо үчүн же data-toggle="modal"баскычы сыяктуу контроллердин элементине орнотуңуз .data-target="#foo"href="#foo"

  1. <button type = "button" data-toggle = "modal " data-target = "#myModal" > Модалды ишке киргизүү </button>

JavaScript аркылуу

myModalJavaScript бир сап менен id менен модалды чакырыңыз :

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-backdrop="".

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

loadЭгер алыскы url берилсе, мазмун jQuery ыкмасы аркылуу жүктөлөт жана .modal-body. Эгер сиз data api колдонуп жатсаңыз, башка hrefбулакты көрсөтүү үчүн тегди колдонсоңуз болот. Мунун бир мисалы төмөндө көрсөтүлгөн:

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

Методдор

.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. })

Navbarдагы мисал

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. Аним моллит миним коммодо улламко күн күркүрөйт.


Колдонуу

Маалымат атрибуттары аркылуу

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

  1. <body data- spy = "scroll" data-target = ".navbar" > ... </body>

JavaScript аркылуу

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

  1. $ ( '#navbar' ). scrollspy ()
Көңүл бургула! Navbar шилтемелеринде чечилүүчү ID максаттары болушу керек. Мисалы, <a href="#home">home</a>домдогу бир нерсеге дал келиши керек <div id="home"></div>.

Методдор

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

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

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset="".

аты түрү демейки сүрөттөмө
офсет саны 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.


Колдонуу

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класстарды кошуу ulBootstrap өтмөгүнүн стилин колдонот.

  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. })

Мисалдар

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

Иштин натыйжалуулугунун себептеринен улам, куралдардын кеңеши жана popover data-apis кошулган, демек сиз аларды ��зүңүз инициализациялашыңыз керек .

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

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

Төрт багыт

Киргизүү топторундагы кеңештер

Bootstrap киргизүү топтору менен куралдар кеңештерин жана поповерлерди колдонууда, containerкаалабаган терс таасирлерден качуу үчүн (төмөндө документтештирилген) параметрин коюшуңуз керек болот.


Колдонуу

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

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

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

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

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

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

контейнер string | жалган жалган

Белгилүү бир элементке инструментти кошотcontainer: 'body'

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

Белгилөө

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

Методдор

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

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

.tooltip('шоу')

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

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

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

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

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

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

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

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

.tooltip('жок кылуу')

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

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

Мисалдар

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

Static popover

Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген.

Popover үстү

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Попов туура

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Попвер түбү

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Попов кетти

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

dataJavaScript жана атрибуттагы мазмундан поповерлер катары көрсөтүлгөн эч кандай белгилөө жок .

Түз демо

Төрт багыт


Колдонуу

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

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

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

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

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

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

контейнер string | жалган жалган

Белгилүү бир элементке калкыма тиркелетcontainer: 'body'

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

Белгилөө

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

Методдор

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

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

.popover('шоу')

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

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

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

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

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

.popover('toggle')

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

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

.popover('кыйрат')

Элементтин поповерин жашырат жана жок кылат.

  1. $ ( '#элемент' ). popover ( «жок кылуу» )

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

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

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

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

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

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


Колдонуу

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. })

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

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

Мамлекеттүү

data-loading-text="Loading..."баскычтагы жүктөө абалын колдонуу үчүн кошуу .

  1. <баскыч түрү = "баскыч" класс = "btn btn-primary" data-loading-text = "Жүктөө..." > Жүктөө абалы </button>

Жалгыз которуштуруу

data-toggle="button"Бир баскыч менен которууну иштетүү үчүн кошуу .

  1. <баскыч түрү = "баскыч" класс = "btn btn-primary" data-toggle = "баскыч" > Жалгыз которуу </ баскыч>

Белгилөө кутучасы

data-toggle="buttons-checkbox"btn-группадагы белгилөө кутучасынын стилин которуштуруу үчүн кошуу .

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Сол </button>
  3. <button type = "button" class = "btn btn-primary" > Орто </button>
  4. <button type = "button" class = "btn btn-primary" > Оң </button>
  5. </div>

Радио

data-toggle="buttons-radio"Btn-группадагы радио стилин которуштуруу үчүн кошуңуз .

  1. <div класс = "btn-group" data-toggle = "баскычтар-радио" >
  2. <button type = "button" class = "btn btn-primary" > Сол </button>
  3. <button type = "button" class = "btn btn-primary" > Орто </button>
  4. <button type = "button" class = "btn btn-primary" > Оң </button>
  5. </div>

Колдонуу

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

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

Белгилөө

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

Параметрлер

Жок

Методдор

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

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

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

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

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

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

$().button('reset')

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

$().button(сап)

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

  1. <баскыч түрү = "баскыч" класс = "btn" маалымат-толук-текст = "бүттү!" > ... </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 уккан эмессиз.
  1. <div класс = "аккордеон" id = "аккордеон2" >
  2. <div класс = "аккордеон тобу" >
  3. <div class = "аккордеон рубрикасы" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Топтолуучу №1 нерсе
  6. </a>
  7. </div>
  8. <div id = "collapseOne" класс = "аккордеон денесинин кулашы" >
  9. <div class = "аккордеон-ички" >
  10. Аним париатур клише...
  11. </div>
  12. </div>
  13. </div>
  14. <div класс = "аккордеон тобу" >
  15. <div class = "аккордеон рубрикасы" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Топтолуучу №2 пункт
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" класс = "аккордеон-дене кулашы" >
  21. <div class = "аккордеон-ички" >
  22. Аним париатур клише...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

  1. <баскыч түрү = "баскыч" класс = "btn btn-коркунуч" маалымат- которуу = "кыйратуу" маалымат-максат = "#демо" >
  2. жөнөкөй жыгылат
  3. </button>
  4.  
  5. <div id = "демо" класс = "жыйыштыруу" > </div>

Колдонуу

Маалымат атрибуттары аркылуу

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

Аккордеон сыяктуу топту башкарууну жыйма башкарууга кошуу үчүн, маалымат атрибутун кошуңуз data-parent="#selector". Муну иш жүзүндө көрүү үчүн демонстрацияга кайрылыңыз.

JavaScript аркылуу

Кол менен иштетүү:

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-parent="".

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

Методдор

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

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

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

.collapse('toggle')

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

.collapse('шоу')

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

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

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

Окуялар

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

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

Мисал

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

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

autocomplete="off"Демейки серепчинин менюларынын Bootstrap typeahead ачылуучу ылдыйда пайда болушуна жол бербөөнү каалайсыз .


Колдонуу

Маалымат атрибуттары аркылуу

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

JavaScript аркылуу

Төмөнкүлөр менен машинкага кол менен чалыңыз:

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

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-source="".

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

Методдор

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

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

Мисал

Сол жактагы субнавигация - бул аффикс плагининин жандуу демосу.


Колдонуу

Маалымат атрибуттары аркылуу

Каалаган элементке аффикстүү жүрүм-турумду оңой кошуу үчүн, жөн гана data-spy="affix"шпион кылгыңыз келген элементке кошуңуз. Андан кийин элементтин кадалышын качан күйгүзүү жана өчүрүү керек экендигин аныктоо үчүн офсеттерди колдонуңуз.

  1. <div data-spy = "affiks" data-offset-top = "200" > ... </div>
Көңүл бургула! Кадалган элементтин абалын жана анын түздөн-түз ата-энесинин жүрүм-турумун башкаруу керек. affixПозиция , affix-topжана тарабынан башкарылат affix-bottom. Барактын кадимки агымынан мазмунду алып салууда, аффикс ишке киргенде, потенциалдуу кулап калган ата-энени текшерүүнү унутпаңыз.

JavaScript аркылуу

JavaScript аркылуу аффикс плагинине чалыңыз:

  1. $ ( '#navbar' ). аффикс ()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset-top="200".

аты түрү демейки сүрөттөмө
офсет саны | функция | объект 10 Сыдыруунун ордун эсептөөдө экрандан жылыш үчүн пикселдер. Эгер бир сан берилсе, офсет жогорку жана сол багытта колдонулат. Бир багытты же бир нече уникалдуу офсеттерди угуу үчүн жөн гана объектти бериңиз offset: { x: 10 }. Офсетти динамикалык түрдө камсыз кылуу керек болгондо функцияны колдонуңуз (айрым жооп берүүчү дизайндар үчүн пайдалуу).