Javascript за Bootstrap

Вдъхнете живот на компонентите на Bootstrap – сега с 12 персонализирани плъгина jQuery .

Модали

Опростена, но гъвкава версия на традиционния модален плъгин на javascript само с минималната необходима функционалност и интелигентни настройки по подразбиране.

падащи менюта

Добавете падащи менюта към почти всичко в Bootstrap с този прост плъгин. Bootstrap разполага с пълна поддръжка на падащо меню в навигационната лента, раздели и хапчета.

Scrollspy

Използвайте Scrollspy, за да актуализирате автоматично връзките във вашата навигационна лента, за да покажете текущата активна връзка въз основа на позицията на превъртане.

Раздели с възможност за превключване

Използвайте този плъгин, за да направите разделите и хапчетата по-полезни, като им позволите да превключват между прозорци с раздели на локално съдържание.

Подсказки

Нов поглед върху приставката jQuery Tipsy, подсказките не разчитат на изображения – те използват CSS3 за анимации и атрибути на данни за локално съхранение на заглавия.

Поповери *

Добавете малки наслагвания на съдържание, като тези на iPad, към всеки елемент за съхраняване на вторична информация.

* Изисква включването на подсказки

Предупредителни съобщения

Приставката за предупреждение е малък клас за добавяне на близка функционалност към предупрежденията.

Бутони

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Свиване

Вземете основни стилове и гъвкава поддръжка за сгъваеми компоненти като акордеони и навигация.

Въртележка

Създайте въртележка от всяко съдържание, което искате, за да предоставите интерактивно слайдшоу от съдържание.

Пишете напред

Основен, лесно разширим плъгин за бързо създаване на елегантни текстови надписи с всякаква форма на въвеждане на текст.

Преходи *

За прости ефекти на преход, включете bootstrap-transition.js веднъж, за да плъзнете модали или да избледнеете предупреждения.

* Изисква се за анимация в плъгини

Горе главата! Всички плъгини за javascript изискват най-новата версия на jQuery.

Относно модалите

Опростена, но гъвкава версия на традиционния модален плъгин на javascript само с минималната необходима функционалност и интелигентни настройки по подразбиране.

Свали файл

Статичен пример

По-долу е статично изобразен модал.

Демо на живо

Превключете модал чрез javascript, като щракнете върху бутона по-долу. Той ще се плъзне надолу и ще изчезне от горната част на страницата.

Стартирайте демонстрационен модал

Използване на bootstrap-modal

Извикайте модала чрез javascript:

  1. $ ( '#myModal' ). модален ( опции )

Настроики

Име Тип по подразбиране описание
фон булево вярно Включва елемент на модален фон. Като алтернатива, посочете staticза фон, който не затваря модала при щракване.
клавиатура булево вярно Затваря модала, когато се натисне клавиш за изход
шоу булево вярно Показва модала при инициализиране.

Маркиране

Можете лесно да активирате модали на вашата страница, без да се налага да пишете нито един ред javascript. Просто задайте data-toggle="modal"елемент на контролер с data-target="#foo"или href="#foo", който съответства на id на модален елемент, и когато щракнете, той ще стартира вашия модал.

Освен това, за да добавите опции към вашия модален екземпляр, просто ги включете като допълнителни атрибути на данни или в контролния елемент, или в самото модално маркиране.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Стартиране на Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Модално заглавие </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Едно хубаво тяло... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Затваряне </a>
  11. <a href = "#" class = "btn btn-primary" > Запазете промените </a>
  12. </div>
  13. </div>
Горе главата! Ако искате вашият модал да анимира навътре и навън, просто добавете .fadeклас към .modalелемента (вижте демонстрацията, за да видите това в действие) и включете bootstrap-transition.js.

Методи

.modal(опции)

Активира вашето съдържание като модално. Приема опции по избор object.

  1. $ ( '#myModal' ). модален ({
  2. клавиатура : невярно
  3. })

.modal('превключване')

Ръчно превключва модал.

  1. $ ( '#myModal' ). модален ( 'превключване' )

.modal('покажи')

Ръчно отваря модал.

  1. $ ( '#myModal' ). модален ( 'покажи' )

.modal('скрий')

Ръчно скрива модал.

  1. $ ( '#myModal' ). модален ( 'скрий' )

събития

Модалният клас на Bootstrap разкрива няколко събития за свързване с модална функционалност.

Събитие Описание
шоу Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано Това събитие се задейства, когато модалът е направен видим за потребителя (ще изчака CSS преходите да завършат).
Крия Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
скрит Това събитие се задейства, когато модалът приключи да бъде скрит от потребителя (ще изчака CSS преходите да завършат).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // направи нещо…
  3. })

Приставката ScrollSpy е за автоматично актуализиране на навигационните цели въз основа на позицията на превъртане.

Свали файл

Примерна навигационна лента със scrollspy

Превъртете областта по-долу и гледайте актуализацията на навигацията. Поделементите от падащото меню също ще бъдат маркирани. Опитай!

@дебел

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi преди да разпродадат qui. Права за велосипеди от ферма до маса в Tumblr. Жилетка Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby пуловер lomo jean къси панталони, Williamsburg hoodie мини qui вероятно не сте чували за тях и жилетка trust fund culpa biodiesel wes anderson aesthetic. Nihil татуиран акузамус, cred ирония биодизел keffiyeh занаятчия ullamco consequat.

@mdo

Veniam marfa мустаци скейтборд, adipisicing fugiat velit pitchfork брада. Брадата на Фрийгън е купидата от истината на Максуини. Cupidatat four loko nisi, ea helvetica nulla carles. Татуиран cosby пуловер камион за храна, mcsweeney's quis non freegan винил. Lo-fi wes anderson +1 шивашко. Carles не естетически exercitation quis gentrify. Brooklyn adipisicing занаятчийска бира vice keytar deserunt.

един

Occaecat commodo aliqua delectus. Fap крафт бира deserunt скейтборд ea. Lomo велосипедни права adipisicing banh mi, velit ea sunt следващо ниво locavore кафе с един произход в magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur note Направи си сам минимална пратеска чанта. Cred ex in, sustainable delectus consectetur fanny pack iphone.

две

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Предполага се, че сапиенте синтезатор. Locavore sed helvetica cliche ирония, thundercats вероятно не сте чували за тях consequat суичър без глутен lo-fi fap aliquip. Labore elit placeat преди да са разпродадени, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Жилетка крафт бира сейтан готов велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Използване на bootstrap-scrollspy.js

Обадете се на scrollspy чрез javascript:

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

Маркиране

За да добавите лесно scrollspy поведение към вашата навигация в горната лента, просто добавете data-spy="scroll"към елемента, който искате да шпионирате (най-често това е тялото).

  1. <body data-spy = "scroll" > ... </body>
Горе главата! Връзките на лентата за навигация трябва да имат разрешими целеви идентификатори. Например <a href="#home">home</a>трябва да съответства на нещо в dom като <div id="home"></div>.

Методи

.scrollspy('refresh')

Когато използвате scrollspy във връзка с добавяне или премахване на елементи от DOM, ще трябва да извикате метода за опресняване по следния начин:

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

Настроики

Име Тип по подразбиране описание
изместване номер 10 Пиксели за изместване отгоре при изчисляване на позицията на превъртане.

събития

Събитие Описание
активирате Това събитие се задейства всеки път, когато нов елемент се активира от scrollspy.

Този плъгин добавя бърз, динамичен раздел и функционалност за хапче за преход през локално съдържание.

Свали файл

Примерни раздели

Щракнете върху разделите по-долу, за да превключвате между скрити панели, дори чрез падащи менюта.

Суров деним, вероятно не сте чували за тях дънкови шорти Остин. Nesciunt tofu stumptown aliqua, ретро синт майстор прочистване. Мустаци cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby пуловер eu banh mi, qui irure terry richardson ex squid. 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. $ ( '#myTab a' ). щракнете върху ( функция ( e ) {
  2. д . предотврати по подразбиране ();
  3. $ ( това ). раздел ( 'покажи' );
  4. })

Можете да активирате отделни раздели по няколко начина:

  1. $ ( '#myTab a[href="#profile"]' ). раздел ( 'покажи' ); // Изберете раздел по име
  2. $ ( '#myTab a:first' ). раздел ( 'покажи' ); // Изберете първия раздел
  3. $ ( '#myTab a:last' ). раздел ( 'покажи' ); // Изберете последния раздел
  4. $ ( '#myTab li:eq(2) a' ). раздел ( 'покажи' ); // Изберете трети раздел (0-индексиран)

Маркиране

Можете да активирате навигация в раздел или хапче, без да пишете javascript, като просто посочите data-toggle="tab"или data-toggle="pill"върху елемент. Добавянето на класове 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

Активира разделен елемент и контейнер със съдържание. Разделът трябва да има или , 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 = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функция () {
  17. $ ( '#myTab a:last' ). раздел ( 'покажи' );
  18. })
  19. </script>

събития

Събитие Описание
шоу Това събитие се задейства при показване на раздела, но преди новият раздел да бъде показан. Използвайте event.targetи event.relatedTarget, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
показано Това събитие се задейства при показване на раздели, след като даден раздел е бил показан. Използвайте event.targetи event.relatedTarget, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'показан' , функция ( e ) {
  2. д . цел // активиран раздел
  3. д . relatedTarget // предишен раздел
  4. })

Относно подсказките

Вдъхновен от отличния плъгин jQuery.tipsy, написан от Jason Frame; Подсказките са актуализирана версия, която не разчита на изображения, използва css3 за анимации и атрибути на данни за локално съхранение на заглавия.

Свали файл

Примерно използване на подсказки

Задръжте курсора на мишката над връзките по-долу, за да видите подсказки:

Тесни панталони следващо ниво keffiyeh вероятно не сте чували за тях. Фото кабина брада необработен деним висок печат веган чанта stumptown. Сейтан от фермата до масата, 8-битовото американско облекло на mcsweeney's fixie устойчива киноа има винил шамбре на Тери Ричардсън. Beard stumptown, cardigans banh mi lomo thundercats. Тофу биодизел уилямсбърг марфа, четири локо mcsweeney's cleanse vegan chambray. Наистина ироничен занаятчия каквото и да е keytar , scenester от ферма до маса banksy Austin twitter handle freegan cred raw denim single-origin coffee virusal.


Използване на bootstrap-tooltip.js

Задействайте подсказката чрез javascript:

  1. $ ( '#example' ). подсказка ( опции )

Настроики

Име Тип по подразбиране описание
анимация булево вярно приложете css избледняващ преход към подсказката
поставяне низ|функция 'Горна част' как да позиционирате подсказката - горе | дъно | наляво | точно
селектор низ невярно Ако е предоставен селектор, обектите с подсказки ще бъдат делегирани на посочените цели.
заглавие низ | функция '' стойност на заглавието по подразбиране, ако тагът `title` не присъства
спусък низ "хвърча" как се задейства подсказка - задръжте | фокус | ръководство
забавяне номер | обект 0

забавяне на показването и скриването на подсказката (ms) - не се отнася за тип ръчно задействане

Ако е предоставен номер, забавянето се прилага и за скриване/показване

Структурата на обекта е:delay: { show: 500, hide: 100 }

Горе главата! Опциите за отделни подсказки могат алтернативно да бъдат зададени чрез използването на атрибути на данни.

Маркиране

От съображения за производителност, подсказката и Popover data-apis са включени. Ако искате да ги използвате, просто посочете опция за избор.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > задръжте курсора на мишката върху мен </a>

Методи

$().tooltip(опции)

Прикрепя манипулатор на подсказка към колекция от елементи.

.tooltip('покажи')

Разкрива подсказка на елемент.

  1. $ ( '#елемент' ). подсказка ( 'покажи' )

.tooltip('скрий')

Скрива подсказка на елемент.

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

.tooltip('превключване')

Превключва подсказката на елемент.

  1. $ ( '#елемент' ). подсказка ( 'превключване' )

Относно поповите

Добавете малки наслагвания на съдържание, като тези на iPad, към всеки елемент за съхраняване на вторична информация.

* Изисква да бъде включена подсказка

Свали файл

Пример за изскачане на курсора на мишката

Задръжте курсора на мишката над бутона, за да активирате изскачащия прозорец.


Използване на bootstrap-popover.js

Активиране на изскачащи прозорци чрез javascript:

  1. $ ( '#example' ). popover ( опции )

Настроики

Име Тип по подразбиране описание
анимация булево вярно приложете css избледняващ преход към подсказката
поставяне низ|функция "точно" как да позиционирате popover - горе | дъно | наляво | точно
селектор низ невярно ако е предоставен селектор, обектите с подсказки ще бъдат делегирани на посочените цели
спусък низ "хвърча" как се задейства подсказка - задръжте | фокус | ръководство
заглавие низ | функция '' стойност на заглавието по подразбиране, ако атрибутът `title` не присъства
съдържание низ | функция '' стойност на съдържанието по подразбиране, ако атрибутът `data-content` не присъства
забавяне номер | обект 0

забавяне при показване и скриване на popover (ms) - не се отнася за тип ръчно задействане

Ако е предоставен номер, забавянето се прилага и за скриване/показване

Структурата на обекта е:delay: { show: 500, hide: 100 }

Горе главата! Опциите за отделни изскачащи екрани могат алтернативно да бъда�� определени чрез използването на атрибути на данни.

Маркиране

От съображения за производителност, подсказката и Popover data-apis са включени. Ако искате да ги използвате, просто посочете опция за избор.

Методи

$().popover(опции)

Инициализира изскачащи прозорци за колекция от елементи.

.popover('покажи')

Разкрива изскачащ прозорец на елементите.

  1. $ ( '#елемент' ). popover ( 'покажи' )

.popover('скрий')

Скрива изскачащ прозорец на елементи.

  1. $ ( '#елемент' ). popover ( 'скрий' )

.popover('превключване')

Превключва изскачащ прозорец на елементи.

  1. $ ( '#елемент' ). popover ( 'превключване' )

Относно сигналите

Приставката за предупреждение е малък клас за добавяне на близка функционалност към предупрежденията.

Изтегли

Примерни сигнали

Плъгинът за предупреждения работи с обикновени предупредителни съобщения и блокира съобщения.

Свято гуакамоле! Най-добре проверете себе си, не изглеждате много добре.

Ужас! Имате грешка!

Променете това и това и опитайте отново. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Предприемете това действие Или направете това


Използване на bootstrap-alert.js

Активирайте отхвърлянето на предупреждение чрез javascript:

  1. $ ( ".alert" ). предупреждение ()

Маркиране

Просто добавете data-dismiss="alert"към бутона за затваряне, за да дадете автоматично функция за затваряне на предупреждение.

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

Методи

$().alert()

Обгръща всички сигнали с близка функционалност. За да анимирате вашите сигнали, когато са затворени, уверете се, че към тях вече е приложен клас .fadeи ..in

.alert('close')

Затваря предупреждение.

  1. $ ( ".alert" ). предупреждение ( 'близо' )

събития

Класът за предупреждение на Bootstrap разкрива няколко събития за свързване към функционалността за предупреждение.

Събитие Описание
близо Това събитие се задейства веднага, когато closeсе извика методът на екземпляра.
затворен Това събитие се задейства, когато предупреждението е затворено (ще изчака CSS преходите да завършат).
  1. $ ( '#my-alert' ). свързване ( 'затворено' , функция () {
  2. // направи нещо…
  3. })

относно

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Свали файл

Примерни употреби

Използвайте приставката за бутони за състояния и превключвания.

Държавен
Единичен превключвател
Квадратче за отметка
Радио

Използване на bootstrap-button.js

Активиране на бутони чрез javascript:

  1. $ ( '.nav-tabs' ). бутон ()

Маркиране

Атрибутите на данните са неразделна част от приставката за бутони. Вижте примерния код по-долу за различните типове маркиране.

  1. <!-- Добавете data-toggle="button", за да активирате превключването на един бутон -->
  2. <button class = "btn" data-toggle = "button" > Единичен превключвател </button>
  3.  
  4. <!-- Добавете data-toggle="buttons-checkbox" за превключване на стила на полето за отметка в btn-group -->
  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. <!-- Добавете data-toggle="buttons-radio" за превключване на стила на радиото в btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Ляво </button>
  14. <button class = "btn" > Среден </button>
  15. <button class = "btn" > Надясно </button>
  16. </div>

Методи

$().button('превключване')

Превключва състоянието на натискане. Придава на бутона вид, че е активиран.

Горе главата! Можете да активирате автоматично превключване на бутон, като използвате data-toggleатрибута.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('зареждане')

Задава състоянието на бутона на зареждане - деактивира бутона и разменя текста на текст за зареждане. Текстът за зареждане трябва да бъде дефиниран в елемента бутон с помощта на атрибута data data-loading-text.

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
Горе главата! Firefox поддържа деактивирано състояние при зареждания на страници . Заобиколно решение за това е да използвате autocomplete="off".

$().button('reset')

Нулира състоянието на бутона - заменя текста с оригиналния текст.

$().button(низ)

Нулира състоянието на бутона - сменя текста към произволно определено от данните състояние на текст.

  1. <button class = "btn" data-complete-text = "finished!" > ... </button>
  2. <скрипт>
  3. $ ( '.btn' ). бутон ( „завършен“ )
  4. </script>

относно

Вземете основни стилове и гъвкава поддръжка за сгъваеми компоненти като акордеони и навигация.

Свали файл

* Изисква приставката Transitions да бъде включена.

Пример за акордеон

Използвайки плъгина за свиване, създадохме проста джаджа в стил акордеон:

Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.
Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.

Използване на bootstrap-collapse.js

Активиране чрез javascript:

  1. $ ( ".collapse" ). свиване ()

Настроики

Име Тип по подразбиране описание
родител селектор невярно Ако селекторът, тогава всички сгъваеми елементи под посочения родител ще бъдат затворени, когато този сгъваем елемент се покаже. (подобно на традиционното поведение на акордеон)
превключвам булево вярно Превключва сгъваемия елемент при извикване

Маркиране

Просто добавете data-toggle="collapse"и data-targetкъм елемент, за да присвоите автоматично управление на сгъваем елемент. Атрибутът data-targetприема css селектор, към който да се приложи свиването. Не забравяйте да добавите класа collapseкъм сгъваемия елемент. Ако искате да е отворен по подразбиране, добавете допълнителния клас in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. прост сгъваем
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Горе главата! За да добавите подобно на акордеон групово управление към сгъваема контрола, добавете атрибута data data-parent="#selector". Обърнете се към демонстрацията, за да видите това в действие.

Методи

.collapse(опции)

Активира вашето съдържание като сгъваем елемент. Приема опции по избор object.

  1. $ ( '#myCollapsible' ). свиване ({
  2. превключване : невярно
  3. })

.collapse('превключване')

Превключва сгъваем елемент на показан или скрит.

.collapse('покажи')

Показва сгъваем елемент.

.collapse('скрий')

Скрива сгъваем елемент.

събития

Класът за свиване на Bootstrap разкрива няколко събития за свързване към функционалността за свиване.

Събитие Описание
шоу Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано Това събитие се задейства, когато свит елемент е направен видим за потребителя (ще изчака завършването на css преходите).
Крия Това събитие се задейства веднага след hideизвикване на метода.
скрит Това събитие се задейства, когато свит елемент е бил скрит от потребителя (ще изчака CSS преходите да завършат).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // направи нещо…
  3. })

относно

Основен, лесно разширим плъгин за бързо създаване на елегантни текстови надписи с всякаква форма на въвеждане на текст.

Свали файл

Пример

Започнете да пишете в полето по-долу, за да покажете резултатите от въвеждането напред.


Използване на bootstrap-typeahead.js

Извикайте typeahead чрез javascript:

  1. $ ( '.typeahead' ). набиране напред ()

Настроики

Име Тип по подразбиране описание
източник масив [ ] Източникът на данни, към който да се прави заявка.
елементи номер 8 Максималният брой елементи за показване в падащото меню.
съвпадение функция нечувствителен към регистър Методът, използван за определяне дали дадена заявка съответства на елемент. Приема един аргумент, itemспрямо който да се тества заявката. Достъп до текущата заявка с this.query. Връща булево значение true, ако заявката е съвпадение.
сортировач функция точно съвпадение, малки и големи
букви, малки и
големи букви
Метод, използван за сортиране на резултатите от автоматичното довършване. Приема един аргумент itemsи има обхвата на екземпляра с предварителен тип. Посочете текущата заявка с this.query.
маркер функция подчертава всички съвпадения по подразбиране Метод, използван за подчертаване на резултатите от автоматичното довършване. Приема един аргумент itemи има обхвата на екземпляра с предварителен тип. Трябва да върне html.

Маркиране

Добавете атрибути на данни, за да регистрирате елемент с функция за изпреварване.

  1. <input type = "text" data- provide = "typeahead" >

Методи

.typeahead(опции)

Инициализира въвеждане с предварително въвеждане.