Наш модальный плагин — это сверхтонкая версия традиционного модального js-плагина, в которой особое внимание уделяется тому, чтобы включать только те функциональные возможности, которые нам нужны здесь, в твиттере.

Скачать

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

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

Опции

Имя	тип	дефолт	описание
фон	логическое значение, строка	ЛОЖЬ	Включает элемент модального фона. Установите фон, "static"если вы не хотите, чтобы модальное окно закрывалось при нажатии на фон.
клавиатура	логический	ЛОЖЬ	Закрывает модальное окно при нажатии клавиши escape
показывать	логический	ЛОЖЬ	Открывает модальное окно при инициализации класса

Разметка

Вы можете легко активировать модальные окна на своей странице, не написав ни одной строки javascript. Просто дайте элементу data-controls-modalатрибут, который соответствует идентификатору модального элемента, и при нажатии он запустит ваш модальный. Чтобы добавить модальные параметры, просто включите их в качестве атрибутов данных.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Запустить модальное окно </a>    

Примечание . Если вы хотите, чтобы ваше модальное окно анимировалось, просто добавьте .fadeкласс к вашему .modalэлементу (обратитесь к демо, чтобы увидеть это в действии).

Методы

.modal(варианты)

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

$ ( '#мой-модальный' ). модальный ({
  клавиатура : правда 
})

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

Вручную переключает модальное окно.

$ ( '#мой-модальный' ). модальный ( «переключить» )

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

Вручную открывает модальное окно.

$ ( '#мой-модальный' ). модальный ( «показать» )

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

Вручную скрывает модальное окно.

$ ( '#мой-модальный' ). модальный ( «скрыть» )

.modal(правда)

Возвращает экземпляр модального класса элементов.

$ ( '#мой-модальный' ). модальный ( истинный )

Обратите внимание . В качестве альтернативы это можно получить с помощью $().data('modal').

События

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

Мероприятие	Описание
показывать	Это событие срабатывает сразу же при showвызове метода экземпляра.
показано	Это событие запускается, когда модальное окно становится видимым для пользователя (будет ждать завершения переходов css).
Спрятать	Это событие запускается сразу после hideвызова метода экземпляра.
скрытый	Это событие запускается, когда модальное окно больше не скрыто от пользователя (будет ждать завершения переходов css).

$ ( '#мой-модальный' ). привязать ( 'скрытый' , функция () {   
  // сделай что-нибудь ...
})

Демо

Запустить модальный

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

Скачать

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

$ ( '#верхняя панель' ). раскрывающийся список ()

Разметка

Чтобы быстро добавить раскрывающийся список к любому элементу навигации, используйте data-dropdownатрибут. Любой действительный раскрывающийся список начальной загрузки будет автоматически активирован.

<ul class = "вкладки" > 
  <li class = "active" ><a href = "#" > Главная страница </a></li>  
  <li class = "раскрывающийся список" data-dropdown = "раскрывающийся список" >   
    <a href = "#" class = "раскрывающийся список" > Раскрывающийся список </a>  
    <ul class = "раскрывающееся меню" > 
      <li><a href = "#" > Дополнительная ссылка </a></li> 
      <li><a href = "#" > Здесь что-то еще </a></li> 
      <li class = "разделитель" ></li> 
      <li><a href = "#" > Другая ссылка </a></li> 
    </ul>
  </li>
</ul>

Примечание . Если ваш пользовательский интерфейс имеет несколько раскрывающихся списков, рассмотрите возможность добавления data-dropdownатрибута в более важный элемент контейнера, такой как .tabsили .topbar.

Методы

$().выпадающий()

Программный API для активации меню для данной верхней панели или навигации с вкладками.

Демо

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

Скачать

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

$ ( '#верхняя панель' ). прокруткаШпион ()

Разметка

Чтобы легко добавить поведение scrollspy в навигацию, просто добавьте data-scrollspyатрибут в файл .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Методы

$().scrollSpy()

Автоматически активирует кнопки навигации в соответствии с положением прокрутки пользователя.

$ ( 'тело > .topbar' ). прокруткаШпион ()

Обратите внимание , что теги привязки верхней панели должны иметь разрешимые целевые идентификаторы. Например, <a href="#home">home</a>должен соответствовать чему-то в доме, например <div id="home"></div>.

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

Scrollspy кэширует навигационные кнопки и координаты разделов для повышения производительности. Если вам нужно обновить этот кеш (вероятно, если у вас есть динамический контент), просто вызовите этот метод обновления. Если вы использовали атрибут данных для определения вашего scrollspy, просто вызовите обновление в теле.

$ ( 'тело' ). scrollSpy ( «обновить» )

Демо

Проверьте верхнюю панель навигации на этой странице.

Этот плагин предлагает дополнительные функции для управления состоянием кнопки.

Скачать

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

$ ( '.tabs' ). кнопка ()

Методы

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

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

Примечание . Вы можете включить автоматическое переключение кнопки с помощью data-toggleатрибута.

<button class = "btn" data-toggle = "toggle" > ... </button>   

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

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

<button class = "btn" data-loading-text = "загрузка..." > ... </button>   

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

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

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

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

<button class = "btn" data-complete-text = "finished!" > ... </кнопка>   
<скрипт>
  $('.btn').кнопка('полный')
</скрипт>

Демо

Загрузка демо Переключить демонстрацию

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

Скачать

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

$ ( '.tabs' ). вкладки ()

Разметка

Вы можете активировать навигацию по вкладкам или таблеткам без написания какого-либо javascript, просто присвоив им атрибут data-tabsили .data-pills

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Методы

$(). вкладки или $(). таблетки

Активирует функции вкладок и таблеток для данного контейнера. Ссылки на вкладки должны ссылаться на идентификаторы в документе.

<ul class = "вкладки" > 
  <li class = "active" ><a href = "#home" > Домашняя страница </a></li>  
  <li><a href = "#profile" > Профиль </a></li> 
  <li><a href = "#messages" > Сообщения </a></li> 
  <li><a href = "#settings" > Настройки </a></li> 
</ul>
 
<div class = "содержимое таблетки" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "профиль" > ... </div> 
  <div id = "сообщения" > ... </div> 
  <div id = "настройки" > ... </div> 
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs' ). вкладки ()
  })
</скрипт>

События

Мероприятие	Описание
сдача	Это событие срабатывает при смене табуляции. Используйте event.targetи event.relatedTargetдля выбора активной вкладки и предыдущей активной вкладки соответственно.

$ ( '#.tabs' ). привязать ( 'изменить' , функция ( е ) {   
  э . цель // активированная вкладка
  э . relatedTarget // предыдущая вкладка
})

Демо

• Дом
• Профиль
• Сообщения
• Настройки
• Падать
  • @толстый
  • @мдо

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

Скачать

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

$ ( '#пример' ). твипси ( варианты )

Опции

Имя	тип	дефолт	описание
оживлять	логический	истинный	применить переход css затухания к всплывающей подсказке
задержка в	количество	0	задержка перед отображением всплывающей подсказки (мс)
задержка выхода	количество	0	задержка перед скрытием всплывающей подсказки (мс)
отступать	нить	''	текст для использования, когда заголовок всплывающей подсказки отсутствует
размещение	нить	'выше'	как расположить всплывающую подсказку - выше | ниже | слева | Правильно
HTML	логический	ЛОЖЬ	разрешает html-контент во всплывающей подсказке
жить	логический	ЛОЖЬ	использовать делегирование событий вместо отдельных обработчиков событий
компенсировать	количество	0	смещение всплывающей подсказки в пикселях от целевого элемента
заглавие	строка, функция	'заглавие'	атрибут или метод для получения текста заголовка
курок	нить	'парить'	как срабатывает всплывающая подсказка - наведите курсор | фокус | руководство
шаблон	нить	[разметка по умолчанию]	HTML-шаблон, используемый для рендеринга twipsy.

Примечание . Отдельные параметры экземпляра twipsy также могут быть указаны с помощью атрибутов данных.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Некоторый текст заголовка' > text </a>    

Методы

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

Присоединяет обработчик twipsy к коллекции элементов.

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

Раскрывает элементы твипси.

$ ( '#элемент' ). твипси ( «шоу» )

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

Скрывает элементы twipsy.

$ ( '#элемент' ). твипси ( «спрятаться» )

.twipsy(правда)

Возвращает экземпляр класса twipsy elements.

$ ( '#элемент' ). твипси ( правда )

Обратите внимание . В качестве альтернативы это можно получить с помощью $().data('twipsy').

Демо

Плагин popover предоставляет простой интерфейс для добавления всплывающих окон в ваше приложение. Он расширяет плагин bootstrap-twipsy.js , поэтому обязательно скачайте этот файл, когда будете включать всплывающие окна в свой проект!

Примечание Вы должны включить файл bootstrap-twipsy.js перед bootstrap-popover.js.

Скачать

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

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

Опции

Имя	тип	дефолт	описание
оживлять	логический	истинный	применить переход css затухания к всплывающей подсказке
задержка в	количество	0	задержка перед отображением всплывающей подсказки (мс)
задержка выхода	количество	0	задержка перед скрытием всплывающей подсказки (мс)
отступать	нить	''	текст для использования, когда заголовок всплывающей подсказки отсутствует
размещение	нить	'Правильно'	как расположить всплывающую подсказку - выше | ниже | слева | Правильно
HTML	логический	ЛОЖЬ	разрешает html-контент во всплывающей подсказке
жить	логический	ЛОЖЬ	использовать делегирование событий вместо отдельных обработчиков событий
компенсировать	количество	0	смещение всплывающей подсказки в пикселях от целевого элемента
заглавие	строка, функция	'заглавие'	атрибут или метод для получения текста заголовка
содержание	строка, функция	'содержание данных'	строка или метод для получения текста содержимого. если ничего не указано, контент будет получен из атрибута data-content.
курок	нить	'парить'	как срабатывает всплывающая подсказка - наведите курсор | фокус | руководство
шаблон	нить	[разметка по умолчанию]	HTML-шаблон, используемый для отображения всплывающего окна.

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

<a data-placement = "ниже" href = "#" class = "опасность btn" rel = "popover" > text     </a>

Методы

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

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

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

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

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

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

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

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

Демо

наведите курсор для всплывающего окна

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

Скачать

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

$ ( ".alert-сообщение" ). предупреждение ()

Разметка

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

Опции

Имя	тип	дефолт	описание
селектор	нить	'.Закрыть'	Какой селектор использовать для закрытия оповещения.

Методы

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

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

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

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

$ ( ".alert-сообщение" ). предупреждение ( «закрыть» )

Демо