Javascript для Bootstrap

Оживите компоненты Bootstrap — теперь с помощью 12 настраиваемых плагинов jQuery .

Модальные

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

Выпадающие списки

Добавляйте выпадающие меню почти ко всему в Bootstrap с помощью этого простого плагина. Bootstrap имеет полную поддержку выпадающего меню на панели навигации, вкладках и планшетах.

прокрутка

Используйте scrollspy для автоматического обновления ссылок на панели навигации, чтобы отображать текущую активную ссылку в зависимости от положения прокрутки.

Переключаемые вкладки

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

Подсказки

Новый взгляд на плагин jQuery Tipsy, всплывающие подсказки не полагаются на изображения — они используют CSS3 для анимации и атрибуты данных для локального хранения заголовков.

Поповеры *

Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации.

* Требуется наличие всплывающих подсказок

Предупреждающие сообщения

Плагин оповещений — это крошечный класс для добавления близких функций к оповещениям.

Кнопки

Делайте больше с кнопками. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

Крах

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

Карусель

Создайте карусель любого контента, который вы хотите предоставить интерактивное слайд-шоу контента.

Упреждающий ввод

Базовый, легко расширяемый плагин для быстрого создания элегантных шрифтов с любой формой ввода текста.

Переходы *

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

* Требуется для анимации в плагинах

Берегись! Все плагины javascript требуют последней версии jQuery.

О модальных окнах

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

Скачать файл

Статический пример

Ниже представлено статически отрисованное модальное окно.

Живая демонстрация

Переключите модальное окно с помощью javascript, нажав кнопку ниже. Он будет скользить вниз и исчезать в верхней части страницы.

Запустить демо-модал

Использование начальной загрузки

Вызов модального окна через javascript:

  1. $ ( '#myModal' ). модальный ( варианты )

Опции

Имя тип дефолт описание
фон логический истинный Включает элемент модального фона. В качестве альтернативы укажите staticфон, который не закрывает модальное окно при нажатии.
клавиатура логический истинный Закрывает модальное окно при нажатии клавиши escape
показывать логический истинный Показывает модальное окно при инициализации.

Разметка

Вы можете легко активировать модальные окна на своей странице, не написав ни одной строки javascript. Просто установите data-toggle="modal"элемент контроллера с data-target="#foo"или href="#foo", который соответствует идентификатору модального элемента, и при нажатии он запустит ваш модальный.

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Запустить модальное окно </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div класс = "модальный заголовок" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Модальный заголовок </h3>
  5. </div>
  6. <div class = "модальное тело" >
  7. <p> Одно прекрасное тело… </p>
  8. </div>
  9. <div class = "модальный нижний колонтитул" >
  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' ). на ( 'скрытый' , функция () {
  2. // сделай что-нибудь…
  3. })

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

Скачать файл

Пример панели навигации с помощью scrollspy

Прокрутите область ниже и посмотрите обновление навигации. Выпадающие подэлементы также будут выделены. Попытайся!

@толстый

Рекламные леггинсы Keytar, бранч ID Art Party Dolor Labore. Pitchfork yr enim lo-fi до того, как они были распроданы. Права на велосипед от фермы к столу в Tumblr на что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit Seitan McSweeney 3 wolf moon irure. Свитер Cosby, джинсы-ломо, джинсовые шорты, минималистичная толстовка с капюшоном Williamsburg, о которой вы, вероятно, не слышали, и кардиган трастового фонда culpa biodiesel Wes Anderson, эстетика. Nihil татуированный accusamus, cred ирония биодизель куфия ремесленник ullamco consequat.

@мдо

Скейтборд с усами Veniam marfa, борода с вилами adipisicing fugiat velit. Борода Фригана, также известная как купидат Максуини. Cupidatat четыре loko nisi, ea Helvetica nulla carles. Татуированный фургончик с едой в свитере косби, винил McSweeney's quis non freegan. Ло-фай Уэс Андерсон +1 портной. Carles неэстетическое упражнение quis gentrify. Бруклинское крафтовое пиво

один

Occaecat commodo aliqua delectus. Fap крафтовое пиво десантируется на скейтборде. Ломо велосипедные права adipisicing banh mi, velit ea sunt next level locavore кофе одного происхождения в больших количествах. Высококачественный винил id, эхо-парк, созданный с помощью вил. Vero VHS предназначен для чтения. Создайте мини-сумку своими руками. Cred ex in, устойчивое создание поясной сумки iphone.

два

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

three

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

Keytar twee blog, culpa messenger bag marfa what delectus food truck. Предполагается, что Sapiente synth ID. Ирония клише Locavore sed Helvetica, громовые коты, о которых вы, вероятно, не слышали, conequat hoodie без глютена lo-fi fap aliquip. Labore elit placeat прежде, чем они были распроданы, Terry Richardson proident brunch nesciunt quis cosby свитер pariatur keffiyeh ut Helvetica artisan. Джемпер крафтовый пивной сейтан готовый велит. VHS Chambray Laboris Tempor Veniam. Anim mollit minim commodo ullamco Thundercats.


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

Вызовите scrollspy через javascript:

  1. $ ( '#navbar' ). прокрутка ()

Разметка

Чтобы легко добавить поведение прокрутки в навигацию на верхней панели, просто добавьте data-spy="scroll"к элементу, за которым вы хотите следить (чаще всего это будет тело).

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

Методы

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

При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM вам нужно будет вызвать метод обновления следующим образом:

  1. $ ( '[data-spy="прокрутка"]' ). каждый ( функция () {
  2. var $spy = $ ( это ). прокрутка ( «обновить» )
  3. });

Опции

Имя тип дефолт описание
компенсировать количество 10 Пиксели для смещения сверху при расчете положения прокрутки.

События

Мероприятие Описание
активировать Это событие срабатывает каждый раз, когда новый элемент активируется scrollspy.

Этот плагин добавляет быстрые, динамические функции вкладок и пилюль для перехода через локальный контент.

Скачать файл

Примеры вкладок

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

Raw denim вы, наверное, не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очищения ретро-синтеза. Усы клише временные, Уильямсбург Карлес веганский Helvetica. Reprehenderit мясник ретро кефия ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure Terry Richardson ex squid. Место Aliquip на шалфее для 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 а' ). нажмите ( функция ( e ) {
  2. э . предотвратить дефолт ();
  3. $ ( это ). вкладка ( «показать» );
  4. })

Вы можете активировать отдельные вкладки несколькими способами:

  1. $ ( '#myTab a[href="#profile"]' ). вкладка ( «показать» ); // Выбираем вкладку по названию
  2. $ ( '#myTab a:first' ). вкладка ( «показать» ); // Выбираем первую вкладку
  3. $ ( '#myTab a:последняя' ). вкладка ( «показать» ); // Выбираем последнюю вкладку
  4. $ ( '#myTab li:eq(2) a' ). вкладка ( «показать» ); // Выбираем третью вкладку (с индексом 0)

Разметка

Вы можете активировать навигацию по вкладкам или таблеткам без написания какого-либо javascript, просто указав data-toggle="tab"или data-toggle="pill"на элементе. Добавление классов и на вкладку navприменит стиль вкладки начальной загрузки.nav-tabsul

  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>

Методы

$(). вкладка

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо a, 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 класс = "контент вкладки" >
  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:последняя' ). вкладка ( «показать» );
  18. })
  19. </скрипт>

События

Мероприятие Описание
показывать Это событие срабатывает при показе вкладки, но до того, как будет показана новая вкладка. Используйте event.targetи event.relatedTargetдля выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно.
показано Это событие срабатывает при показе вкладки после того, как вкладка была показана. Используйте event.targetи event.relatedTargetдля выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно.
  1. $ ( 'a[data-toggle="tab"]' ). на ( 'показано' , функция ( e ) {
  2. э . цель // активированная вкладка
  3. э . relatedTarget // предыдущая вкладка
  4. })

О всплывающих подсказках

Вдохновленный превосходным плагином jQuery.tipsy, написанным Джейсоном Фреймом; Всплывающие подсказки — это обновленная версия, которая не использует изображения, использует css3 для анимации и атрибуты данных для локального хранения заголовков.

Скачать файл

Пример использования всплывающих подсказок

Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

Узкие штаны следующего уровня куфии , вы, наверное , о них не слышали. Фотобудка с бородой из необработанного денима, высокой печатью, веганская сумка через плечо, Stumptown. Сейтан от фермы к столу, 8-битная американская одежда McSweeney's Fixie из устойчивой лебеды имеет виниловое шамбре Terry Richardson. Бородатый тупиковый город, кардиганы банх ми ломо тандеркэтс. Биодизель с тофу Уильямсбург Марфа, очищающий веганский шамбре четырех локо Максуини. По-настоящему ироничный ремесленник , какой бы кейтар ни был, сценастер с фермы на стол, Бэнкси Остин, Твиттер, ручка , Фриган Кред, сырой деним, вирусный кофе одного происхождения.


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

Активировать всплывающую подсказку через javascript:

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

Опции

Имя тип дефолт описание
анимация логический истинный применить переход css затухания к всплывающей подсказке
размещение строка|функция 'Топ' как расположить всплывающую подсказку - сверху | дно | слева | Правильно
селектор нить ЛОЖЬ Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям.
заглавие строка | функция '' значение заголовка по умолчанию, если тег `title` отсутствует
курок нить 'парить' как срабатывает всплывающая подсказка - наведите курсор | фокус | руководство
задерживать номер | объект 0

задержка отображения и скрытия всплывающей подсказки (мс) — не относится к ручному типу триггера

Если указано число, задержка применяется как к скрытию, так и к показу.

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

Берегись! В качестве альтернативы параметры отдельных всплывающих подсказок можно указать с помощью атрибутов данных.

Разметка

По соображениям производительности API-интерфейсы данных Tooltip и Popover включены. Если вы хотите использовать их, просто укажите параметр селектора.

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

Методы

$(). всплывающая подсказка (параметры)

Присоединяет обработчик всплывающей подсказки к коллекции элементов.

.тултип('показать')

Отображает всплывающую подсказку элемента.

  1. $ ( '#элемент' ). всплывающая подсказка ( «показать» )

.тултип('скрыть')

Скрывает всплывающую подсказку элемента.

  1. $ ( '#элемент' ). всплывающая подсказка ( «скрыть» )

.tooltip('переключить')

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

  1. $ ( '#элемент' ). всплывающая подсказка ( «переключить» )

О всплывающих окнах

Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации.

* Требуется наличие всплывающей подсказки

Скачать файл

Пример всплывающего окна при наведении

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


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

Включить всплывающие окна через javascript:

  1. $ ( '#пример' ). всплывающее окно ( варианты )

Опции

Имя тип дефолт описание
анимация логический истинный применить переход css затухания к всплывающей подсказке
размещение строка|функция 'Правильно' как расположить всплывающее окно - сверху | дно | слева | Правильно
селектор нить ЛОЖЬ если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям
курок нить 'парить' как срабатывает всплывающая подсказка - наведите курсор | фокус | руководство
заглавие строка | функция '' значение заголовка по умолчанию, если атрибут `title` отсутствует
содержание строка | функция '' значение содержимого по умолчанию, если атрибут `data-content` отсутствует
задерживать номер | объект 0

задержка показа и скрытия всплывающего окна (мс) - не относится к ручному типу триггера

Если указано число, задержка применяется как к скрытию, так и к показу.

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

Берегись! В качестве альтернативы параметры для отдельных всплывающих окон можно указать с помощью атрибутов данных.

Разметка

По соображениям производительности API-интерфейсы данных Tooltip и Popover включены. Если вы хотите использовать их, просто укажите параметр селектора.

Методы

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

Инициализирует всплывающие окна для коллекции элементов.

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

Открывает всплывающее окно элементов.

  1. $ ( '#элемент' ). всплывающее окно ( «показать» )

.popover('скрыть')

Скрывает всплывающее окно элементов.

  1. $ ( '#элемент' ). всплывающее окно ( «скрыть» )

.popover('переключить')

Переключает всплывающее окно элементов.

  1. $ ( '#элемент' ). всплывающее окно ( «переключение» )

Об оповещениях

Плагин оповещений — это крошечный класс для добавления близких функций к оповещениям.

Скачать

Примеры оповещений

Плагин оповещений работает с обычными предупреждающими сообщениями и блокирует сообщения.

Святой гуакамоле! Лучше проверь себя, ты выглядишь не слишком хорошо.

О хват! У тебя ошибка!

Измените это и это и попробуйте еще раз. 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. $ ( ".алерт" ). предупреждение ()

Разметка

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

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

Методы

$().оповещение()

Обертывает все оповещения с закрытой функциональностью. Чтобы ваши оповещения анимировались при закрытии, убедитесь, что к ним уже применен класс .fadeи ..in

.алерт('закрыть')

Закрывает оповещение.

  1. $ ( ".алерт" ). предупреждение ( «закрыть» )

События

Класс предупреждений Bootstrap предоставляет несколько событий для подключения к функциям предупреждений.

Мероприятие Описание
Закрыть Это событие срабатывает сразу же при closeвызове метода экземпляра.
закрыто Это событие запускается, когда оповещение было закрыто (будет ждать завершения переходов css).
  1. $ ( '#мое-предупреждение' ). привязать ( 'закрыто' , функция () {
  2. // сделай что-нибудь…
  3. })

О

Делайте больше с кнопками. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

Скачать файл

Пример использования

Используйте плагин кнопок для состояний и переключателей.

с сохранением состояния
Один переключатель
Флажок
Радио

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

Включить кнопки через javascript:

  1. $ ( '.nav-tabs' ). кнопка ()

Разметка

Атрибуты данных являются неотъемлемой частью плагина кнопки. Посмотрите приведенный ниже пример кода для различных типов разметки.

  1. <!-- Добавьте data-toggle="button", чтобы активировать переключение на одной кнопке -->
  2. <button class = "btn" data-toggle = "button" > Одиночный переключатель </button>
  3.  
  4. <!-- Добавьте data-toggle="buttons-checkbox" для переключения стиля флажка в btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <кнопка класс = "btn" > Влево </button>
  7. <кнопка класс = "btn" > Средний </button>
  8. <кнопка class = "btn" > Вправо </button>
  9. </div>
  10.  
  11. <!-- Добавьте data-toggle="buttons-radio" для переключения стиля радио на btn-group -->
  12. <div class = "btn-group" пере��лючатель данных = "кнопки-радио" >
  13. <кнопка класс = "кнопка" > Влево </button>
  14. <кнопка класс = "кнопка" > Средний </button>
  15. <кнопка класс = "btn" > Вправо </button>
  16. </div>

Методы

$().кнопка('переключить')

Переключает состояние нажатия. Создает впечатление, что кнопка активирована.

Берегись! Вы можете включить автоматическое переключение кнопки с помощью data-toggle атрибута.
  1. <button class = "btn" data-toggle = "button" > </button>

$().кнопка('загрузка')

Устанавливает состояние кнопки на загрузку — отключает кнопку и меняет текст на загружаемый текст. Загрузка текста должна быть определена в элементе кнопки с помощью атрибута данных data-loading-text.

  1. <button class = "btn" data-loading-text = "загрузка..." > ... </button>
Берегись! Firefox сохраняет отключенное состояние при загрузке страницы . Обходной путь для этого заключается в использовании autocomplete="off".

$().кнопка('сброс')

Сбрасывает состояние кнопки — меняет текст на исходный текст.

$().кнопка(строка)

Сбрасывает состояние кнопки — меняет текст на любое текстовое состояние, определенное данными.

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

О

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

Скачать файл

* Требуется наличие плагина Transitions.

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

Используя плагин сворачивания, мы создали простой виджет в стиле аккордеона:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. 3 wolf moon officia aute, non cupidatat скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus Labore, устойчивый VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. 3 wolf moon officia aute, non cupidatat скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus Labore, устойчивый VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. 3 wolf moon officia aute, non cupidatat скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus 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. </кнопка>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Берегись! Чтобы добавить к сворачиваемому элементу управления групповое управление в стиле аккордеона, добавьте атрибут данных data-parent="#selector". Обратитесь к демо, чтобы увидеть это в действии.

Методы

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

Активирует ваш контент как складной элемент. Принимает необязательные параметры object.

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

.collapse('переключить')

Отображает или скрывает сворачиваемый элемент.

.collapse('показать')

Показывает разборный элемент.

.collapse('скрыть')

Скрывает складной элемент.

События

Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.

Мероприятие Описание
показывать Это событие срабатывает сразу же при showвызове метода экземпляра.
показано Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов css).
Спрятать Это событие запускается сразу после вызова hideметода.
скрытый Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов css).
  1. $ ( '#myCollapsible' ). на ( 'скрытый' , функция () {
  2. // сделай что-нибудь…
  3. })

О

Базовый, легко расширяемый плагин для быстрого создания элегантных шрифтов с любой формой ввода текста.

Скачать файл

Пример

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


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

Вызовите typeahead через javascript:

  1. $ ( '.typeahead' ). печатать вперед ()

Опции

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

Разметка

Добавьте атрибуты данных, чтобы зарегистрировать элемент с функцией опережающего ввода.

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

Методы

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

Инициализирует ввод с опережающим вводом.