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"який відповідає ідентифікатору модального елемента, і після натискання він запустить ваш модальний.

Крім того, щоб додати параметри до свого модального екземпляра, просто включіть їх як додаткові атрибути даних або в елемент керування, або в саму модальну розмітку.

  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. клавіатура : false
  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 до того, як вони були розпродані. Права на велосипеди Tumblr від ферми до столу. Кардиган Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Джинсовий светр Cosby, шорти з капюшоном Вільямсбурга, мінімальний, про який ви, мабуть, не чули, та трастовий фонд кардигану, кульпа біодизель, естетика Уеса Андерсона. Nihil витатуйований acusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa вуса скейтборд, adipisicing fugiat velit pitchfork борода. Борода Фрігана, як купидатат Веро Максвіні. Cupidatat four loko nisi, ea helvetica nulla carles. Татуйований светр косбі, фуд-трак, mcsweeney's quis non freegan вініл. Lo-fi Вес Андерсон +1 портняжне мистецтво. Carles non aesthetic exercitation quis gentrify. Крафтове пиво Brooklyn adipisicing vice keytar deserunt.

один

Occaecat commodo aliqua delectus. Fap крафтове пиво deserunt скейтборд ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id вініл, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY мініатюрна сумка-месенджер. 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 ()

Розмітка

Щоб легко додати шпигунську поведінку до вашої верхньої панелі навігації, просто додайте data-spy="scroll"до елемента, який ви хочете стежити (найчастіше це буде тіло).

  1. <body data-spy = "scroll" > ... </body>
Голови вгору! Посилання на навігаційній панелі повинні мати ідентифікатори, які можна розпізнати. Наприклад, <a href="#home">home</a>повинен відповідати чомусь у домі, як <div id="home"></div>.

методи

.scrollspy('оновити')

Під час використання Scrollspy разом із додаванням або видаленням елементів із DOM вам потрібно буде викликати метод refresh таким чином:

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

Опції

Ім'я типу за замовчуванням опис
зсув номер 10 Пікселі для зміщення від верху під час обчислення положення прокручування.

Події

Подія опис
активувати Ця подія запускається щоразу, коли Scrollspy активує новий елемент.

Цей плагін додає швидку динамічну вкладку та функціональність таблетки для переходу між локальним вмістом.

Завантажити файл

Приклади вкладок

Натисніть вкладки нижче, щоб перемикатися між прихованими панелями, навіть за допомогою спадних меню.

Необроблений денім, напевно, ви не чули про них джинсові шорти Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Вуса cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Светр Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat шавлія cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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. e . preventDefault ();
  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>

методи

$().таб

Активує елемент вкладки та контейнер вмісту. Вкладка повинна мати або 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 = "активна панель вкладок" 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. e . target // активована вкладка
  3. e . relatedTarget // попередня вкладка
  4. })

Про підказки

Натхненний чудовим плагіном jQuery.tipsy, написаним Джейсоном Фреймом; Підказки — це оновлена ​​версія, яка не покладається на зображення, використовує css3 для анімації та атрибути даних для локального зберігання заголовків.

Завантажити файл

Приклад використання підказок

Наведіть курсор на посилання нижче, щоб переглянути підказки:

Вузькі штани наступного рівня , ви, мабуть , не чули про них. Стенд для фотографій, борода, веганська сумка для високого друку з необробленого деніму. Сейтан від ферми до столу, 8-бітний американський одяг McSweeney's fixie sustainable quinoa має вінілове шамбре Террі Річардсона. Борода stumptown, кардигани banh mi lomo thundercats. Тофу біодизель Вільямсбург Марфа, чотири локо mcsweeney's cleanse vegan chambray. Справді іронічний ремісник будь-який кейтар , сценер від ферми до столу Бенксі Остін твіттер ручка Фріган Кред сирий денім однопохідна кава вірусна.


Використання bootstrap-tooltip.js

Запустити спливаючу підказку через javascript:

  1. $ ( '#приклад' ). підказка ( параметри )

Опції

Ім'я типу за замовчуванням опис
анімація логічний правда застосувати перехід CSS Fade до підказки
розміщення рядок|функція "топ" як розташувати підказку - зверху | нижня | ліворуч | правильно
селектор рядок помилковий Якщо надано селектор, об’єкти підказки будуть делеговані вказаним цілям.
назва рядок | функція '' значення за замовчуванням заголовка, якщо тег `title` відсутній
тригер рядок "висати" як спрацьовує підказка - наведіть | фокус | посібник
затримка номер | об'єкт 0

затримка показу та приховування спливаючої підказки (мс) - не стосується ручного типу запуску

Якщо вказано число, затримка застосовується як для приховування, так і для показу

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

Голови вгору! Параметри для окремих підказок можна альтернативно вказати за допомогою використання атрибутів даних.

Розмітка

З міркувань продуктивності підказка та Popover data-apis доступні. Якщо ви хочете використовувати їх, просто вкажіть параметр вибору.

  1. <a href = "#" rel = "tooltip" title = "перша підказка" > наведіть на мене курсор </a>

методи

$().tooltip(параметри)

Додає обробник спливаючої підказки до колекції елементів.

.tooltip('show')

Показує спливаючу підказку елемента.

  1. $ ( '#element' ). підказка ( 'показати' )

.tooltip('сховати')

Приховує спливаючу підказку елемента.

  1. $ ( '#element' ). підказка ( 'сховати' )

.tooltip('перемикати')

Перемикає спливаючу підказку елемента.

  1. $ ( '#element' ). підказка ( 'перемикач' )

Про поповери

Додайте невеликі накладки вмісту, як на iPad, до будь-якого елемента для розміщення вторинної інформації.

* Потрібна підказка _

Завантажити файл

Приклад спливаючого зображення при наведенні курсора

Наведіть курсор на кнопку, щоб запустити спливаюче вікно.


Використання bootstrap-popover.js

Увімкнути спливаючі вікна через javascript:

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

Опції

Ім'я типу за замовчуванням опис
анімація логічний правда застосувати перехід CSS Fade до підказки
розміщення рядок|функція "право" як розташувати поповер - зверху | нижня | ліворуч | правильно
селектор рядок помилковий якщо надано селектор, об’єкти підказки будуть делеговані вказаним цілям
тригер рядок "висати" як спрацьовує підказка - наведіть | фокус | посібник
назва рядок | функція '' значення за замовчуванням заголовка, якщо атрибут `title` відсутній
вміст рядок | функція '' значення вмісту за замовчуванням, якщо атрибут `data-content` відсутній
затримка номер | об'єкт 0

затримка показу та приховування спливного вікна (мс) - не стосується ручного типу запуску

Якщо вказано число, затримка застосовується як для приховування, так і для показу

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

Голови вгору! Параметри для окремих спливаючих вікон можна альтернативно вказати за допомогою використання атрибутів даних.

Розмітка

З міркувань продуктивності підказка та Popover data-apis доступні. Якщо ви хочете використовувати їх, просто вкажіть параметр вибору.

методи

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

Ініціалізує спливаючі вікна для колекції елементів.

.popover('показати')

Розкриває спливаюче вікно елементів.

  1. $ ( '#element' ). popover ( 'показати' )

.popover('сховати')

Приховує спливаюче вікно елементів.

  1. $ ( '#element' ). popover ( 'сховати' )

.popover('перемикати')

Перемикає спливаюче вікно елементів.

  1. $ ( '#element' ). 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('закрити')

Закриває сповіщення.

  1. $ ( ".alert" ). сповіщення ( 'закрити' )

Події

Клас сповіщень Bootstrap надає кілька подій для підключення до функції сповіщень.

Подія опис
закрити Ця подія запускається негайно, коли closeвикликається метод екземпляра.
ЗАЧИНЕНО Ця подія запускається, коли сповіщення закрито (очікуватиме завершення переходів css).
  1. $ ( '#my-alert' ). bind ( 'закрито' , функція () {
  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('toggle')

Перемикає стан натискання. Надає кнопці вигляд, що вона була активована.

Голови вгору! Ви можете ввімкнути автоматичне перемикання кнопки за допомогою 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.

Приклад акордеон

Використовуючи плагін згортання, ми створили простий віджет у стилі акордеона:

Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий VHS.
Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий VHS.
Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий 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-parent="#selector". Перегляньте демонстрацію, щоб побачити це в дії.

методи

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

Активує ваш вміст як складний елемент. Приймає додаткові параметри object.

  1. $ ( '#myCollapsible' ). згорнути ({
  2. перемикати : false
  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(параметри)

Ініціалізує введення за допомогою попереднього введення.