JavaScript

Ҷузъҳои Bootstrap -ро ҳоло бо 13 плагинҳои фармоишии jQuery ҳаёт бахшед.

Инфиродӣ ё ҷамъоварӣ

Плагинҳо метавонанд ба таври инфиродӣ дохил карда шаванд (гарчанде ки баъзеҳо вобастагии зарурӣ доранд) ё ҳама якбора. Ҳам bootstrap.js ва ҳам bootstrap.min.js дорои ҳама плагинҳо дар як файл мебошанд.

Аттрибутҳои маълумот

Шумо метавонед ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API-и аломатгузорӣ бидуни навиштани як сатри JavaScript истифода баред. Ин API дараҷаи якуми Bootstrap аст ва ҳангоми истифодаи плагин бояд аввалиндараҷаи шумо бошад.

Гуфта мешавад, ки дар баъзе ҳолатҳо хомӯш кардани ин функсия матлуб аст. Аз ин рӯ, мо инчунин қобилияти ғайрифаъол кардани атрибути додаҳои API-ро тавассути қатъ кардани ҳама рӯйдодҳо дар фазои номи бадан бо `'data-api'' таъмин мекунем. Ин чунин менамояд:

  1. $ ( 'бадан' ). хомӯш ( '.data-api' )

Интихобан, барои ҳадафи як плагини мушаххас, танҳо номи плагинро ҳамчун фазои ном дар якҷоягӣ бо фазои номи data-api дохил кунед:

  1. $ ( 'бадан' ). хомӯш ( '.alert.data-api' )

API-и барномавӣ

Мо инчунин боварӣ дорем, ки шумо бояд ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API JavaScript истифода баред. Ҳама API-ҳои ҷамъиятӣ усулҳои ягона ва занҷирӣ мебошанд ва коллексияи мувофиқи амалро бармегардонанд.

  1. $ ( ".btn.danger" ). тугма ( "гузариш" ). addClass ( "фарбеҳ" )

Ҳама усулҳо бояд объекти опсияҳои ихтиёрӣ, сатре, ки усули мушаххасро ҳадаф қарор медиҳанд ё ҳеҷ чиз (ки плагинро бо рафтори пешфарз оғоз мекунад) қабул кунанд:

  1. $ ( "#myModal" ). modal () // бо пешфарз оғоз карда шуд
  2. $ ( "#myModal" ). modal ({ клавиатура : false }) // бе клавиатура оғоз карда шуд
  3. $ ( "#myModal" ). modal ( 'show' ) // намоишро фавран оғоз мекунад ва даъват мекунад

Ҳар як плагин инчунин конструктори хоми худро дар моликияти 'Constructor' фош мекунад: $.fn.popover.Constructor. Агар шумо хоҳед, ки як мисоли мушаххаси плагинро ба даст оред, онро мустақиман аз элемент дарёфт кунед: $('[rel=popover]').data('popover').

Не низоъ

Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflictба плагин занг занед, ки мехоҳед арзиши онро баргардонед.

  1. var bootstrapButton = $ . fn . тугмаи . noConflict () // баргардонидани $.fn.button ба арзиши қаблан таъиншуда
  2. $ . fn . bootstrapBtn = bootstrapButton // Додани $().bootstrapBtn вазифаи пурборкунандаро

Ҳодисаҳо

Bootstrap рӯйдодҳои фармоиширо барои аксари амалҳои беназири плагин таъмин мекунад. Одатан, инҳо дар шакли пасванд ва замони гузашта меоянд - дар он ҷо масдар (масалан show) дар оғози ҳодиса оғоз мешавад ва шакли сифати гузаштаи он (масалан shown) дар анҷоми амал ангеза мешавад.

Ҳама рӯйдодҳои инфинитивӣ функсияи preventDefault-ро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед.

  1. $ ( '#myModal' ). дар ( 'намоиш' , функсия ( e ) {
  2. агар (! маълумот ) баргардад e . preventDefault () // намоиши модальро бозмедорад
  3. })

Дар бораи гузариш

Барои эффектҳои оддии гузариш, bootstrap-transition.js-ро дар баробари дигар файлҳои JS дохил кунед. Агар шумо bootstrap.js -и тартибдодашуда (ё хурдкардашуда) -ро истифода баред , лозим нест, ки онро дохил кунед - он аллакай мавҷуд аст.

Ҳолатҳоро истифода баред

Якчанд мисоли плагини гузариш:

  • Лағжиш ё пажмурда дар модальҳо
  • Хомӯш кардани ҷадвалҳо
  • Хомӯш кардани огоҳиҳо
  • Панелҳои каруселии слайд

Мисолхо

Модалҳо соддашуда, вале чандир, дархостҳои муколама бо ҳадди ақали функсияҳои зарурӣ ва пешфарзҳои оқилона мебошанд.

Намунаи статикӣ

Модали намоишшуда бо сарлавҳа, бадан ва маҷмӯи амалҳо дар поён.

  1. <div class = "модалӣ пажмурда мешавад" >
  2. <div class = "modal-header" >
  3. < навъи тугма = "тугма" синф = "пушидани" додаҳо-азбаст = "modal" aria-пинҳон = "ҳақиқӣ" > × </ тугма >
  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. < навъи тугма = "тугма" синф = "пушидани" data-dississ = "modal" aria-hidden = "ҳақиқӣ" > × </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" > Пӯшидан </тугма>
  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

Модалро бо ID myModalбо як сатри JavaScript занг занед:

  1. $ ( '#myModal' ). модаль ( имконот )

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-backdrop="".

Ном навъи пешфарз тавсиф
замина булӣ дуруст Унсури модаль-заминаро дар бар мегирад. Интихобан, staticбарои заминае муайян кунед, ки модальро бо клик намепӯшад.
клавиатура булӣ дуруст Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад
нишон додан булӣ дуруст Модалро ҳангоми оғозёбӣ нишон медиҳад.
дурдаст роҳ дурӯғ

Агар URL-и дурдаст таъмин карда шавад, мундариҷа тавассути loadусули jQuery бор карда мешавад ва ба .modal-body. Агар шумо 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 чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад.

Ҳодиса Тавсифи
нишон додан Ин ҳодиса фавран ҳангоми showдаъват кардани усули мисол сар мешавад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки модаль барои корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
пинҳон Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
пинҳон Ин ҳодиса пас аз анҷоми пинҳон кардани модаль аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
  1. $ ( '#myModal' ). дар ( 'пинҳон' , функсия () {
  2. // коре кунед…
  3. })

Намуна дар навор

Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст. Майдони зери наворро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед. Зербандҳои афтанда низ таъкид карда мешаванд.

@фарбеҳ

Ad leggings keytar, brunch ID санъати ҳизб dolor labore. Pitchfork yr enim lo-fi пеш аз он ки онҳо qui фурӯхта. Tumblr ҳуқуқҳои велосипедронии ферма ба мизи ҳар чӣ. Кардиган Аним Кеффиех Карлес. Велит Сейтан Максвини аксбардорӣ 3 гург моҳ irure. Косби свитери ломо ҷин шорт, hoodie minim Williamsburg, ки шумо эҳтимол дар бораи онҳо нашунидаед ва фонди эътимоди кардиган culpa biodiesel Вес Андерсон эстетикӣ. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mouche skateboard, adipisicing fugiat velit pitchfork риш. Фриган риши aliqua cupidatat Mcsweeney's Vero. Cupidatat чор loko nisi, ea helvetica nulla carles. Мошини хӯрокворӣ свитери косби татуировкашуда, винилӣ аз Максвини. Ло-фи Вес Андерсон +1 sartorial. Карлес машқҳои эстетикии ғайримуқаррарӣ аст. Бруклин adipisicing ҳунарҳои пиво ноиби Keytar deserunt.

як

Дастрасӣ ба шумо имкон медиҳад. Fap ҳунармандӣ пиво deserunt скейтборд ea. Ҳуқуқҳои велосипедронии Lomo adipisicing banh mi, velit ea sunt lokavore қаҳваи якнажинадор дар Magna Veniam. Винили идентификатсияи ҳаёт, Эхо Парки оқибати он quis aliquip banh mi pitchfork мебошад. Vero VHS est adipising. Consectetur nisi DIY minim болишти паёмбаре. 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 халта марфа ҳар мошини хӯрокворӣ delectus. Тасдиқи идентификатсияи синтез. Locavore sed helvetica cliche irony, thundercats, ки шумо эҳтимол дар бораи онҳо нашунидаед, ки дар натиҷаи hoodie free gluten lo-fi fap aliquip. Пеш аз он ки онҳо фурӯхта шаванд, Терри Ричардсон пеш аз brunch свитери косби косбиро пеш аз фурӯхтани ҳунарманд ба даст овард. Кардиган ҳунарҳои пиво seitan тайёр velit. VHS chambray меҳнати муваққатӣ дорад. Аним моллит миним commodo ullamco thundercats.


Истифода

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, танҳо data-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин бадан аст) ва data-target=".navbar"интихоб кунед, ки кадом наворро истифода баред. Шумо мехоҳед scrollspy-ро бо .navҷузъ истифода баред.

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

Тавассути JavaScript

Ба scrollspy тавассути JavaScript занг занед:

  1. $ ( '#навбар' ). scrollspy ()
Сарҳо боло! Истинодҳои навбар бояд ҳадафҳои ҳалшавандаи ID дошта бошанд. Масалан, <a href="#home">home</a>бояд ба чизе дар дом мувофиқ бошад, ба монанди <div id="home"></div>.

Усулҳо

.scrollspy('навсозӣ')

Ҳангоми истифодаи scrollspy дар якҷоягӣ бо илова кардан ё хориҷ кардани элементҳо аз DOM, шумо бояд усули навсозиро ба таври зерин даъват кунед:

  1. $ ( '[data-spy = "ҳаракат"]' ). ҳар як ( функсия () {
  2. var $spy = $ ( ин ). scrollspy ( 'навсозӣ' )
  3. });

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset="".

Ном навъи пешфарз тавсиф
офсет рақам 10 Ҳангоми ҳисоб кардани мавқеи ҳаракат пикселҳо аз боло ҷуброн карда мешаванд.

Ҳодисаҳо

Ҳодиса Тавсифи
фаъол кардан Ин ҳодиса ҳар вақте, ки ашёи нав тавассути scrollspy фаъол мешавад, оташ мегирад.

Намунаи ҷадвалҳо

Барои гузариш аз панелҳои мундариҷаи маҳаллӣ, ҳатто тавассути менюҳои афтанда вазифаи зуд ва динамикии ҷадвалро илова кунед.

Ҷинси хом шумо эҳтимол дар бораи онҳо шортҳои ҷинс Остин нашунидаед. Nesciunt tofu stumptown aliqua, retro synth усто пок. Мӯйлаб клише tempor, Williamsburg Carles vegan helvetica. Reprehenderit қассоб ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон собиқ калмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan либоси амрикоӣ, қассоб ихтиёрӣ аст.

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. $ ( '#Tab a' ). пахш кунед ( функсия ( e ) {
  2. д . preventDefault ();
  3. $ ( ин ). ҷадвал ( 'намоиш' );
  4. })

Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:

  1. $ ( '#myTab a[href="#profile"]' ). ҷадвал ( 'намоиш' ); // Ҷадвалро аз рӯи ном интихоб кунед
  2. $ ( '#Май Tab a:first' ). ҷадвал ( 'намоиш' ); // Ҷадвали аввалро интихоб кунед
  3. $ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' ); // Варақаи охиринро интихоб кунед
  4. $ ( '#myTab li:eq(2) a' ). ҷадвал ( 'намоиш' ); // Варақаи сеюмро интихоб кунед (0-индексшуда)

Нишондиҳӣ

Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"додан ё data-toggle="pill"дар элемент фаъол созед. Илова кардани navсинфҳо nav-tabsба ulҷадвал услуби ҷадвали Bootstrapро татбиқ мекунад.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </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>

Усулҳо

$().таб

Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-targetяк hrefгиреҳи контейнерро дар DOM дошта бошад.

  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. $ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' );
  18. })
  19. </script>

Ҳодисаҳо

Ҳодиса Тавсифи
нишон додан Ин ҳодиса дар намоиши ҷадвалҳо оғоз мешавад, аммо пеш аз он ки ҷадвали нав нишон дода шавад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
нишон дода шудааст Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
  1. $ ( 'a[data-toggle="таб"]' ). дар ( 'нишон дода мешавад' , функсия ( e ) {
  2. д . ҳадаф // ҷадвали фаъолшуда
  3. д . марбут ба ҳадаф // ҷадвали қаблӣ
  4. })

Мисолхо

Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон Frame навишта шудааст; Маслиҳатҳо версияи навшуда мебошанд, ки ба тасвирҳо такя намекунанд, CSS3-ро барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.

Бо сабабҳои иҷроиш, маслиҳати абзор ва popover data-apis интихоб шудаанд, яъне шумо бояд онҳоро худатон оғоз кунед .

Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:

Шимҳои танги сатҳи оянда keffiyeh шумо эҳтимол дар бораи онҳо нашунидаед. Аксҳо кабина риш хом denim letterpress vegan болишти паёмбаре Stumptown. Либоси амрикоии 8-битаи фарм-ба-сеитан, фиксии устувори квиноаи Максвини дорои винилии терри Ричардсон . Раъду риш, кардиганҳо banh mi lomo thundercats. Tofu biodiesel Williamsburg Марфа, чор Loko mcsweeney пок vegan chambray. A artisan дар ҳақиқат ironic ҳар keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw denim қаҳва вирусӣ ягона.

Чор самт

Маслиҳатҳо дар гурӯҳҳои воридотӣ

Ҳангоми истифодаи маслиҳатҳои асбобҳо ва поповҳо бо гурӯҳҳои вуруди Bootstrap, шумо бояд containerинтихобро (дар зер ҳуҷҷатгузорӣ шудааст) муқаррар кунед, то аз оқибатҳои номатлуб канорагирӣ кунед.


Истифода

Маслиҳати абзорро тавассути JavaScript фаъол созед:

  1. $ ( '#мисол' ). маслиҳати асбобҳо ( имконот )

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Ном навъи пешфарз тавсиф
аниматсия булӣ дуруст ба маслиҳати абзор гузариш пажмурда шудани css-ро татбиқ кунед
html булӣ дурӯғ HTML-ро ба маслиҳати асбобҳо дохил кунед. Агар дурӯғ бошад, textусули jQuery барои ворид кардани мундариҷа ба дом истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред.
ҷойгиркунӣ сатр | функсия 'боло' Чӣ тавр ҷойгир кардани банди асбобҳо - боло | поён | чап | рост
интихобкунанда сатр дурӯғ Агар интихобкунанда таъмин карда шавад, объектҳои маслиҳати асбобҳо ба ҳадафҳои муқарраршуда дода мешаванд.
унвон сатр | функсия '' арзиши унвони пешфарз, агар теги `title` мавҷуд набошад
триггер сатр 'фокусро дар баргиранда' Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - клик | овезон | таваҷҷӯҳ | дастур. Аҳамият диҳед, ки шумо намудҳои интиқоли триггерҳои гуногун, аз фазои ҷудошуда ва намудҳои триггерро қайд мекунед.
таъхир рақам | объект 0

таъхир нишон додан ва пинҳон кардани маслиҳати асбобҳо (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { show: 500, hide: 100 }

контейнер сатр | дурӯғ дурӯғ

Маслиҳати абзорро ба унсури мушаххас замима мекунадcontainer: 'body'

Сарҳо боло! Имконот барои маслиҳатҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо муайян карда шаванд.

Нишондиҳӣ

  1. <a href = "#" data-toggle = "tooltip" title = "аввалин маслиҳат" > курсорро болои ман гузаронед </a>

Усулҳо

$().маслиҳат(имконот)

Дастгиркунандаи маслиҳатро ба коллексияи элементҳо замима мекунад.

.tooltip('нишон')

Маслиҳати асбоби элементро ошкор мекунад.

  1. $ ( '#элемент' ). Маслиҳат ( 'намоиш' )

.tooltip('пинҳон')

Маслиҳати асбоби элементро пинҳон мекунад.

  1. $ ( '#элемент' ). маслиҳати асбобҳо ( 'пинҳон кардан' )

.tooltip('гузариш')

Маслиҳати асбоби элементро иваз мекунад.

  1. $ ( '#элемент' ). маслиҳати асбобҳо ( 'гузариш' )

.tooltip('нобуд кардан')

Маслиҳати асбоби элементро пинҳон ва нобуд мекунад.

  1. $ ( '#элемент' ). маслиҳати асбобҳо ( 'нобуд кардан' )

Мисолхо

Иловаи қабатҳои хурди мундариҷаро, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгир кардани маълумоти дуввум илова кунед. Тугмачаро ба болои тугма гузоред, то поповро фаъол созед. Барои дохил кардани Tooltip талаб мекунад .

Попвери статикӣ

Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.

Попов боло

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Попов рост

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Поёни попов

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Попов рафт

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Ягон аломате, ки ҳамчун поповҳо нишон дода шудааст, аз JavaScript ва мундариҷа дар дохили атрибут тавлид dataнамешавад.

Намоиши зинда

Чор самт


Истифода

Поповҳоро тавассути JavaScript фаъол созед:

  1. $ ( '#мисол' ). popover ( имконот )

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-animation="".

Ном навъи пешфарз тавсиф
аниматсия булӣ дуруст ба маслиҳати абзор гузариш пажмурда шудани css-ро татбиқ кунед
html булӣ дурӯғ HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, textусули jQuery барои ворид кардани мундариҷа ба дом истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред.
ҷойгиркунӣ сатр | функсия 'дуруст' чӣ тавр ҷойгир кардани попов - боло | поён | чап | рост
интихобкунанда сатр дурӯғ агар интихобкунанда таъмин карда шавад, объектҳои банди асбобҳо ба ҳадафҳои муқарраршуда дода мешаванд
триггер сатр 'клик' чӣ тавр поповер ба кор андохта мешавад - пахш кунед | овезон | таваҷҷӯҳ | дастур
унвон сатр | функсия '' арзиши пешфарз унвон, агар атрибути "унвон" мавҷуд набошад
мазмун сатр | функсия '' арзиши мундариҷаи пешфарз, агар атрибути `data-content` мавҷуд набошад
таъхир рақам | объект 0

таъхир нишон додан ва пинҳон кардани поповер (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { show: 500, hide: 100 }

контейнер сатр | дурӯғ дурӯғ

Поповро ба унсури мушаххас замима мекунадcontainer: 'body'

Сарҳо боло! Имконот барои поповҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо муайян карда шаванд.

Нишондиҳӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis интихоб шудаанд. Агар шумо хоҳед, ки онҳоро истифода баред, танҳо як варианти селекторро муайян кунед.

Усулҳо

$().popover(имконот)

Поповҳоро барои коллексияи элементҳо оғоз мекунад.

.popover('намоиш')

Элементҳои поповро ошкор мекунад.

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

.popover('пинҳон')

Попвери элементҳоро пинҳон мекунад.

  1. $ ( '#элемент' ). popover ( 'пинҳон кардан' )

.popover('гузариш')

Калиди элементҳоро иваз мекунад.

  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 чанд ҳодисаро барои пайвастшавӣ ба функсияи огоҳӣ фош мекунад.

Ҳодиса Тавсифи
наздик Ин ҳодиса фавран ҳангоми closeдаъват кардани усули мисол сар мешавад.
баста Ин ҳодиса ҳангоми баста шудани ҳушдор оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
  1. $ ( '#огоҳии ман' ). пайваст ( 'пӯшида' , функсия () {
  2. // коре кунед…
  3. })

Намунаҳои истифода

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Давлатманд

Барои data-loading-text="Loading..."истифодаи ҳолати боркунӣ дар тугма илова кунед.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Бор карда мешавад..." > Ҳолати боркунӣ </button>

Гузариш ягона

Барои data-toggle="button"фаъол кардани гузариш дар як тугма илова кунед.

  1. < навъи тугма = "тугма" синф = "btn btn-primary" data-toggle = "тугма" > Гузариш ягона </тугма>

Қуттии қайд

Барои data-toggle="buttons-checkbox"иваз кардани услуби қуттии қайдкунӣ дар btn-group илова кунед.

  1. <div class = "btn-group" data- toggle = "buttons-checkbox " >
  2. <button type = "button" class = "btn btn-primary" > Чап </тугма>
  3. < навъи тугма = "button" class = "btn btn-primary" > Миёна </тугма>
  4. <button type = "button" class = "btn btn-primary" > Рост </тугма>
  5. </div>

Радио

Барои data-toggle="buttons-radio"иваз кардани услуби радио дар btn-group илова кунед.

  1. <div class = "btn-group" data-toggle = "тугмаҳо-радио" >
  2. <button type = "button" class = "btn btn-primary" > Чап </тугма>
  3. < навъи тугма = "button" class = "btn btn-primary" > Миёна </тугма>
  4. <button type = "button" class = "btn btn-primary" > Рост </тугма>
  5. </div>

Истифода

Тугмаҳоро тавассути JavaScript фаъол созед:

  1. $ ( '.nav-tabs' ). тугмаи ()

Нишондиҳӣ

Аттрибутҳои маълумот барои плагини тугма ҷудонашаванда мебошанд. Рамзи намунаи зерро барои намудҳои гуногуни аломатгузорӣ санҷед.

Имконот

Ҳеҷ

Усулҳо

$().тугма('гузариш')

Ҳолати фишорро иваз мекунад. Тугма намуди зоҳириро медиҳад, ки он фаъол шудааст.

Сарҳо боло! Шумо метавонед бо истифода аз data-toggleаттрибутӣ ивазкунии худкори тугмаро фаъол созед.
  1. < навъи тугма = "тугма" синф = "btn" data- toggle = "тугма" > </button>

$().тугма('боркунӣ')

Ҳолати тугмаро ба боркунӣ муқаррар мекунад - тугмаро хомӯш мекунад ва матнро ба боркунии матн иваз мекунад. Матни боркунӣ бояд дар элементи тугма бо истифода аз атрибути data муайян карда шавад data-loading-text.

  1. < навъи тугма = "тугма" синф = "btn" data-loading-text = "боркунии ашё..." > ... </button>
Сарҳо боло! Firefox ҳолати ғайрифаъолро дар тамоми борҳои саҳифа нигоҳ медорад . Як роҳи ҳалли ин истифода autocomplete="off"аст.

$().тугма('reset')

Ҳолати тугмаро барқарор мекунад - матнро ба матни аслӣ иваз мекунад.

$().тугма(сатр)

Ҳолати тугмаро аз нав барқарор мекунад - матнро ба ҳама гуна ҳолати матни муайяншуда иваз мекунад.

  1. < навъи тугма = "тугма" синфи = "btn" data-complete-text = "анҷом!" > ... </тугма>
  2. <скрипт>
  3. $ ( '.btn' ). тугма ( 'пурра' )
  4. </script>

Дар бораи

Барои ҷузъҳои ҷамъшаванда, ба монанди аккордеонҳо ва навигатсия, сабкҳои асосӣ ва дастгирии чандир гиред.

* Барои ворид кардани плагини Transitions талаб карда мешавад.

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

Бо истифода аз плагини фурӯпошӣ, мо як виҷети оддии услуби аккордеон сохтем:

Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 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 pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 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 pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 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 pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  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" class = "хурдани аккордеон-бадан дар" >
  9. <div class = "accordion-inner" >
  10. Аним париатур клише...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  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" class = "хуриши аккордеон-бадан" >
  21. <div class = "accordion-inner" >
  22. Аним париатур клише...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Шумо инчунин метавонед плагинро бе аломати аккордеон истифода баред. Тугмаеро созед, ки васеъшавӣ ва фурӯпошии унсури дигарро иваз мекунад.

  1. < навъи тугма = "тугма" синфи = "btn btn-хатар" data- toggle = "хуруш " data-target = "#demo" >
  2. соддаи пошхӯрда
  3. </ тугма >
  4.  
  5. <div id = "demo" class = "colapse in" > </div>

Истифода

Тавассути атрибутҳои додаҳо

Барои ба таври худкор таъин кардани назорати унсури пӯшидашаванда танҳо data-toggle="collapse"ва data-targetба элемент илова кунед. Аттрибут data-targetинтихобкунандаи css-ро барои татбиқи пошхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapseба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагиро илова кунед in.

Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба назорати ҷамъшаванда, атрибути маълумотро илова кунед data-parent="#selector". Барои дидани ин амал ба намоиш муроҷиат кунед.

Тавассути JavaScript

Ба таври дастӣ бо:

  1. $ ( ".colapse" ). фурӯпошӣ ()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-parent="".

Ном навъи пешфарз тавсиф
падару модар интихобкунанда дурӯғ Агар селектор, пас ҳамаи унсурҳои ҷамъшаванда дар зери волидайни муайяншуда ҳангоми нишон додани ин ашёи ҷамъшаванда баста мешаванд. (ба рафтори анъанавии аккордеон монанд)
иваз кардан булӣ дуруст Элементи ҷамъшавандаро ҳангоми даъват иваз мекунад

Усулҳо

.collapse(имконот)

Мундариҷаи шуморо ҳамчун унсури пӯшидашаванда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

  1. $ ( '#myCollapsible' ). фурӯпошӣ ({
  2. иваз кардан : бардурӯғ
  3. })

.collapse('гузариш')

Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад.

.collapse('намоиш')

Элементи ҷамъшавандаро нишон медиҳад.

.collapse('пинҳон')

Элементи пӯшидашавандаро пинҳон мекунад.

Ҳодисаҳо

Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.

Ҳодиса Тавсифи
нишон додан Ин ҳодиса фавран ҳангоми showдаъват кардани усули мисол сар мешавад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
пинҳон Ин ҳодиса фавран вақте ки hideусул даъват шудааст, барканор карда мешавад.
пинҳон Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
  1. $ ( '#myCollapsible' ). дар ( 'пинҳон' , функсия () {
  2. // коре кунед…
  3. })

Мисол

Васлкунаки асосӣ ва ба осонӣ васеъшуда барои зуд эҷод кардани сарлавҳаҳои шево бо ҳама гуна вуруди матн.

  1. < навъи вуруд = "матн" маълумот-таъмини = "typeahead" >

Шумо мехоҳед танзим autocomplete="off"кунед, ки менюҳои пешфарзро аз пайдо шудани менюи пешфарз дар болои афтанда Bootstrap typeahead пешгирӣ кунед.


Истифода

Тавассути атрибутҳои додаҳо

Илова кардани атрибутҳои додаҳо барои бақайдгирии элемент бо функсияи пешакии чоп, тавре ки дар мисоли боло нишон дода шудааст.

Тавассути JavaScript

Ба воситаи чопкунак дастӣ занг занед:

  1. $ ( '.typeahead' ). пешаки ()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-source="".

Ном навъи пешфарз тавсиф
сарчашма массив, функсия [ ] Манбаи маълумот барои пурсиш бар зидди. Метавонад массиви сатр ё функсия бошад. Функсия аз ду аргумент, queryарзиш дар майдони воридот ва processзанги бозгашт интиқол дода мешавад. Функсияро тавассути баргардонидани манбаи маълумот мустақиман ё асинхронӣ тавассути processяк аргументи бозхонд ба таври синхронӣ истифода бурдан мумкин аст.
ашё рақам 8 Шумораи максималии ҷузъҳо барои намоиш дар афтанда.
дақ дарозӣ рақам 1 Ҳадди ақали дарозии аломатҳо, ки пеш аз оғоз кардани пешниҳодҳои худкор пурра кардан лозим аст
мувофиқ функсия ҳарфи ҳассос Усуле, ки барои муайян кардани мувофиқати дархост ба ашё истифода мешавад. Як далелро қабул мекунад, ки itemбар зидди он дархостро санҷидан лозим аст. Ба дархости ҷорӣ бо this.query. trueАгар дархост мувофиқ бошад, мантиқиро баргардонед .
ҷудокунанда функсия мувофиқати дақиқ,
ҳассос ба ҳарф, ҳассос
ба ҳарф
Усули барои мураттабсозии натиҷаҳои автоматӣ истифодашаванда. Аргументи ягонаро қабул мекунад itemsва доираи мисоли чопкуниро дорад. Ба дархости ҷорӣ бо this.query.
навсоз функсия ашёи интихобшударо бармегардонад Усули барои баргардонидани ашёи интихобшуда истифода мешавад. Аргументи ягонаро қабул мекунад, itemва дорои миқёси мисоли typeahead.
равшангар функсия ҳамаи мувофиқатҳои пешфарзро таъкид мекунад Усули барои нишон додани натиҷаҳои автоматӣ истифодашаванда. Аргументи ягонаро қабул мекунад itemва доираи мисоли чопкуниро дорад. Бояд html-ро баргардонад.

Усулҳо

.typeahead(имконот)

Воридро бо пешакии чопӣ оғоз мекунад.

Мисол

Зернавигатсия дар тарафи чап намоиши мустақими плагини аффикс аст.


Истифода

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори аффикс ба ягон элемент, танҳо data-spy="affix"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед. Сипас, офсетҳоро истифода баред, то муайян кунед, ки кай иваз кардани пайвасткунии элементро фаъол ва хомӯш кардан лозим аст.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Сарҳо боло! Шумо бояд мавқеи як унсури pinned ва рафтори волидайни бевоситаи онро идора кунед. Мавқеъ аз ҷониби affix, affix-top, ва идора карда мешавад affix-bottom. Дар хотир доред, ки волидайни эҳтимолан харобшударо тафтиш кунед, вақте ки аффикс ба кор меояд, зеро он мундариҷаро аз ҷараёни муқаррарии саҳифа хориҷ мекунад.

Тавассути JavaScript

Ба плагини аффикс тавассути JavaScript занг занед:

  1. $ ( '#навбар' ). аффикс ()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset-top="200".

Ном навъи пешфарз тавсиф
офсет рақам | функсия | объект 10 Ҳангоми ҳисоб кардани мавқеи ҳаракат пикселҳо аз экран ҷуброн карда мешаванд. Агар рақами ягона дода шавад, офсет ҳам дар самти боло ва ҳам дар чап татбиқ карда мешавад. Барои гӯш кардани як самт ё офсетҳои сершумори беназир, танҳо як объектро пешниҳод кунед offset: { x: 10 }. Функсияро ҳангоми зарурати динамикӣ таъмин кардани ҷуброн истифода баред (барои баъзе тарҳҳои ҷавобгӯ муфид).