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

Скачать

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

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

Опции

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

Разметка

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

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Модальное окно запуска </a>    

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

Методы

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

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

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

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

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

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

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

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

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

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

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

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

.modal(правда)

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

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

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

События

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

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

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

Демо

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

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

Скачать

Использование boostrap-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 класс = "разделитель" ></li> 
      <li><a href = "#" > Другая ссылка </a></li> 
    </ul>
  </li>
</ul>

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

Методы

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

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

Демо

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

Скачать

Использование boostrap-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, просто вызовите обновление в теле.

$ ( 'тело' ). прокрутка ( «обновить» )

Демо

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

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

Скачать

Использование boostrap-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> 
</ul>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs' ). вкладки ()
  })
</скрипт>

Демо

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

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

Скачать

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

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

Опции

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

Методы

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

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

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

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

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

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

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

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

.twipsy(правда)

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

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

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

Демо

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

Скачать

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

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

Опции

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

Методы

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

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

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

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

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

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

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

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

Демо

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

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

Скачать

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

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

Разметка

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

Методы

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

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

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

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

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

Демо