Javascript плагины для Bootstrap

Bootstrap поставляется с 13-ю jQuery плагинами для оживления Вашего проекта.


Собранный индивидуально или скомпилированный.

Если Вы скачали последнюю версию Bootstrap, оба bootstrap.js и bootstrap.min.js все плагины перечисленные на этой странице.

Дата атрибуты

Вы можете использовать все js-плагины Bootstrap'а через API-разметку без написания и единой строчки на JavaScript.

Не смотря на удобность в некоторых ситуациях Вам может потребоваться отключить связку дата-атрибутов с bootstrap.js. Для отвязки всех эвентов от элемента body используйте следующий код:

$('body').off('.data-api')

Альтернативно для отключения конкретного плагина, добавьте имя плагина:

$('body').off('.alert.data-api')

Программируемое API

Так же мы предоставляем возможность Вам управлять всеми плагинами напрямую через JavaScript API.

$(".btn.danger").button("toggle").addClass("fat")

Все методы принимают объекты в качестве пареметров, или строку (string) в некоторых случаях см. документацию конкретного плагина:

$("#myModal").modal()                      // Инициализация настроек по умолчанию
$("#myModal").modal({ keyboard: false })   // Инициализация с параметрами (без клавиатуры)
$("#myModal").modal('show')                // Инициализация и вызов немедленно

Каждый плагин имеет доступ напрямую через параметр конструктора `Constructor`: $.fn.popover.Constructor. Если Вы хотите получить текущий инстанс плагина, вызовите его напрямую ссылаясь на элемент: $('[rel=popover]').data('popover').

Эвенты

Для контроля плагинов Bootstrap предоставляет свои уникальные эвенты. В основе они определяют состояние отработки плагина - во время старта (прим. show) эвент сообщает о запуске, а по окончании (прим. shown) эвент сообщает об окончании.

Все эвенты имеют поддержку preventDefault метода. Этот метод позволяет приостановить действие плагина до его непосредсвенного старта.

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // Закрытие модального окна (точнее предотвращение его открытия)
})

Плавный переход

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

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

  • Анимированное открытие и скрытие всплывающих окон
  • Смена вкладок
  • Скрытие сообщений
  • Каруселька

Всплывающее окно

Простые в использовании и легкие в настройке - всплывающие окна для Вашего проекта.

Пример

Ниже Вы видите пример статичного всплывающего окна.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Всплывающее окно в действии

Запустите всплывающие окно, нажав на кнопку ниже. Всплывающее окно плавно появится сверху и становится в середине окна браузера.

<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Использование

Через дата-атрибуты

Активируйте модальное окно без единой строчки JavaScript кода. Установите data-toggle="modal" на котрольный элемент, например кнопку, вместе с data-target="#foo" или href="#foo" для открытия конкретного модального окна.

<button type="button" data-toggle="modal" data-target="#myModal">Открыть модальное окно</button>

Через JavaScript

Вызов модального окна с id myModal через JavaScript:

$('#myModal').modal(options)

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-backdrop="".

Имя Тип Значение по умолчанию Описание
backdrop boolean true Включает элемент modal-backdrop. Опционально, укажите static для backdrop (задний темный фон) который не вызовет закрытие модального окна
keyboard boolean true Закрытие модального через кнопку esc (эскейп)
show boolean true Открытие модального окна после инициализации.
remote path false

Исли указан url - jQuery's подгрузит его через метод load и вставит ответ в элемент с классом .modal-body. При использовании data api, Вы можете указать url в теге href см. пример ниже:

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Методы

.modal(options)

Активирует контент как всплывающее окно. Поддерживает дополнительные опции в object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Скрыть/показать элемент при вызове метода.

$('#myModal').modal('toggle')

.modal('show')

Показать элемент при вызове метода.

$('#myModal').modal('show')

.modal('hide')

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

$('#myModal').modal('hide')

События

Bootstrap поддерживает вызов событий для работы с всплывающими элементами.

Событие Описание
show Это событие срабатывает немедленно после вызова метода show.
shown Это событие срабатывает после отображения всплывающего элемента и окончания анимации.
hide Это событие срабатывает немедленно после вызова метода hide.
hidden Это событие срабатывает после скрытия всплывающего элемента и окончания анимации.
$('#myModal').on('hidden', function () {
  // код…
})

Пример в navbar

Плагин ScrollSpy используется для автоматического обновления навигационных элементов при скроллинге (прокручивании) страницы. Прокрутите пример ниже и Вы увидите как плагин взаимодействует с навигацией. Выпадающие списки и суб-элементы так же обновляются как и их родители.

@fat

Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай. Иван Андреич Лаевский, молодой человек лег двадцати восьми, худощавый блондин, в фуражке министерства финансов и в туфлях, придя купаться, застал на берегу много знакомых и между ними своего приятеля, военного доктора Самойленко.

@mdo

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

Один

Со всеми в городе он был на "ты", всем давал деньги взаймы, всех лечил, сватал, мирил, устраивал пикники, на которых жарил шашлык и варил очень вкусную уху из кефалей; всегда он за кого-нибудь хлопотал и просил и всегда чему-нибудь радовался. По общему мнению, он был безгрешен, и водились за ним только две слабости: во-первых, он стыдился своей доброты и старался маскировать ее суровым взглядом и напускною грубостью, и, во-вторых, он любил, чтобы фельдшера и солдаты называли его вашим превосходительством, хотя был только статским советником.

Два

Я недавно читал у одного французского ученого, что львиная морда совсем не похожа на человеческий лик, как думают ученыи. И насщот этого мы поговорим. Приежжайте, сделайте милость. Приежжайте хоть завтра например. Мы теперь постное едим, но для Вас будим готовить скоромное. Дочь моя Наташенька просила Вас, чтоб Вы с собой какие нибудь умные книги привезли. Она у меня эманципе все у ней дураки только она одна умная. Молодеж теперь я Вам скажу, дает себя знать. Дай им бог! Через неделю ко мне прибудет брат мой Иван (Маиор), человек хороший но между нами сказать, Бурбон и наук не любит.

Три

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера. Если же привезет его пожже, то побейте его по щекам, по профессорски, нечего с этим племенем церемонится. Если доставит пожже то значит в кабак анафема заходил. Обычай ездить к соседям не нами выдуман не нами и окончится, а потому непременно приежжайте с машинками и книгами. Я бы сам к Вам поехал, да конфузлив очень и смелости не хватает.

Этого не может быть, потому что этого не может быть никогда. Как Вы могли видеть на солнце пятны, если на солнце нельзя глядеть простыми человеческими глазами, и для чего на нем пятны, если и без них можно обойтиться? Из какого мокрого тела сделаны эти самые пятны, если они не сгорают? Может быть, по-вашему и рыбы живут на солнце? Извените меня дурмана ядовитого, что так глупо съострил! Ужасно я предан науке! Рубль сей парус девятнадцатого столетия для меня не имеет никакой цены, наука его затемнила у моих глаз своими дальнейшими крылами. Всякое открытие терзает меня как гвоздик в спине. Хотя я невежда и старосветский помещик, а все же таки негодник старый занимаюсь наукой и открытиями, которые собственными руками произвожу и наполняю свою нелепую головешку, свой дикий череп мыслями и комплектом величайших знаний. Матушка природа есть книга, которую надо читать и видеть.


Использование

Via data attributes

Для добавления функционала плагина scrollspy к вашему навигационному бару (navbar) добавьте атрибут data-spy="scroll" к элементу внутри которого необходимо отслеживать прокрутку (скроллинг) (обычно это элемент body). И атрибут data-target=".navbar" для ассоциации с элементом навигации.

<body data-spy="scroll" data-target=".navbar">...</body>

Через JavaScript

Вызов плагина scrollspy через JavaScript:

$('#navbar').scrollspy()
Внимание! Ссылки в навигационном элементе (navbar) должны ссылаться на существующие id элементов. Например - <a href="#home">home</a> должен ссылаться на <div id="home"></div>.

Методы

.scrollspy('refresh')

При изменнии DOM'а Вам необходимо обновить плагин:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-offset="".

Имя Тип Значение по умолчанию Описание
offset number 10 Отступ сверху в пикселях - используется для вычисления текущего положения на странице.

События

Событие Описание
activate Срабатывает в момент активации элемента навигации плагином scrollspy.

Example tabs

Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia 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.


Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

Events

Event Description
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Examples

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions


Usage

Trigger the tooltip via JavaScript:

$('#example').tooltip(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean true Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
placement string|function 'top' how to position the tooltip - top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function '' default title value if `title` tag isn't present
trigger string 'hover' how tooltip is triggered - click | hover | focus | manual
delay number | object 0

delay showing and hiding the tooltip (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Heads up! Options for individual tooltips can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="#" rel="tooltip" title="first tooltip">hover over me</a>

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element's tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element's tooltip.

$('#element').tooltip('toggle')

.tooltip('destroy')

Hides and destroys an element's tooltip.

$('#element').tooltip('destroy')

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.

Static popover

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo


Usage

Enable popovers via JavaScript:

$('#example').popover(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean true Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
placement string|function 'right' how to position the popover - top | bottom | left | right
selector string false if a selector is provided, tooltip objects will be delegated to the specified targets
trigger string 'click' how popover is triggered - click | hover | focus | manual
title string | function '' default title value if `title` attribute isn't present
content string | function '' default content value if `data-content` attribute isn't present
delay number | object 0

delay showing and hiding the popover (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Heads up! Options for individual popovers can alternatively be specified through the use of data attributes.

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

.popover('toggle')

Toggles an elements popover.

$('#element').popover('toggle')

.popover('destroy')

Hides and destroys an element's popover.

$('#element').popover('destroy')

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Holy guacamole! Best check yo self, you're not looking too good.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this


Usage

Enable dismissal of an alert via JavaScript:

$(".alert").alert()

Markup

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.

<a class="close" data-dismiss="alert" href="#">&times;</a>

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert").alert('close')

Events

Bootstrap's alert class exposes a few events for hooking into alert functionality.

Event Description
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed (will wait for css transitions to complete).
$('#my-alert').bind('closed', function () {
  // do something…
})

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Single toggle

Add data-toggle="button" to activate toggling on a single button.

<button type="button" class="btn" data-toggle="button">Single Toggle</button>

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>

Usage

Enable buttons via JavaScript:

$('.nav-tabs').button()

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

About

Анимация и функционал горизонтальных вкладок.
Анимация и функционал горизонтальных вкладок для группы элементов. Например, навигации или контента.

* Для работы необходим плагин Transitions.

Пример

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

Жизнь нашу можно удобно сравнивать со своенравною рекою, на поверхности которой плавает чёлн, иногда укачиваемый тихоструйною волною, нередко же задержанный в своём движении мелью и разбиваемый о подводный камень. - Нужно ли упоминать, что сей утлый чёлн на рынке скоропреходящего времени есть не кто иной, как сам человек?
Нет столь великой вещи, которую не превзошла бы величиною ещё большая. Нет вещи столь малой, в которую не вместилась бы ещё меньшая.
Если бы тени предметов зависели не от величины сих последних, а имели бы свой произвольный рост, то, может быть, вскоре не осталось бы на всём земном шаре ни одного светлого места.
"Зачем, - говорит эгоист, - стану я работать для потомства, когда оно ровно ничего для меня не сделало?" - Несправедлив ты, безумец! Потомство сделало для тебя уже то, что ты, сближая прошедшее с настоящим и будущим, можешь по произволу считать себя: младенцем, юношей и старцем.
Три дела, однажды начавши, трудно кончить: а) вкушать хорошую пищу; б) беседовать с возвратившимся из похода другом и в) чесать, где чешется.
Если у тебя спрошено будет: что полезнее, солнце или месяц? - ответствуй: месяц. Ибо солнце светит днём, когда и без того светло; а месяц - ночью.
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Меню #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Жизнь нашу можно удобно...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Меню #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Если бы тени предметов зависели не...
      </div>
    </div>
  </div>
</div>
...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in"> … </div>

Использование

Через дата атрибут

Добавьте атрибут data-toggle="collapse" и data-target к элементу контроля для автоматической активации плагина. Атрибут data-target в качестве значения принимает css-селектор. Не забудьте добавить класс collapse к элементам с отображаемым/скрываемым контентом. Для создания по умолчанию раскрытого элемента добавьте дополнительный класс in.

Для создания эффекта аккордиона, добавьте атрибут data-parent="#selector". Смотрите демо выше для демонстрации.

Через JavaScript

$(".collapse").collapse()

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-parent="".

Имя Тип Значение по умолчанию Описание
parent selector false Если указан селектор - то при открытии вкладки все остальные вкладки в пределах родительского будут срыты. (эффект аккордиона)
toggle boolean true Включает складной элемент при вызове

Методы

.collapse(options)

Активирует скрипт по отношению к элементам. Принимает дополнительные опции в виде object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Переключает показ/скрытие элемента.

.collapse('show')

Показывает (раскрывает) элемент.

.collapse('hide')

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

События

Плагин collapse от Bootstrap имеет ряд доступных событий.

Событие Описание
show Срабатывает немедленно при вызове метода show.
shown Срабатывает немедленно после показа элемента и окончания анимации.
hide Срабатывает немедленно при вызове метода hide.
hidden Срабатывает немедленно после скрытия элемента и окончания анимации.
$('#myCollapsible').on('hidden', function () {
  // Ваш код или функция…
})

Пример

Начните вводить имя города или штата в поле ниже для теста:

<input type="text" data-provide="typeahead" data-items="4" data-source='[...]'>

Использование

Через дата атрибуты

Добавьте атрибут data-provide для инициализации скрипта по отношению к элементу. Как в примере выше.

Через JavaScript

Вызов через метод typeahead():

$('.typeahead').typeahead()

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-source="".

Имя Тип Значение по умолчанию Описание
source array, function [ ] Источник с искомыми значениями. Может быть как массив содержащий строки, так и функция. Функция принимает два параметра, query значение введенное в элемент input и колбек (callback) process. Функция может быть синхронной возвращая источник с искомыми значениями (массив) или асинхронной через аргумент в колбеке (callback) process.
items number 8 Максимальное количество показываемых значений в выпадающем меню..
minLength number 1 Минимальное кол-во символов необходимое для показа выпадающего списка
matcher function case insensitive Метод поиска совпадений. Принимает только одно значение item. Доступ к текущему запросу можно получить через this.query. Возвращает true при совпадении.
sorter function exact match,
case sensitive,
case insensitive
Метод сортировки совпадающих значений. Принимает только одно значение items. Доступ к текущему запросу можно получить через this.query.
highlighter function highlights all default matches Метод выделения совпавших значений. Принимает только одно значение item. Возвращает html.

Методы

.typeahead(options)

Инициализация скрипта.

Пример

Суб-навигация справа в этой документации - живой пример плагина affix.


Использование

Через дата-атрибуты

Добавбте к элементу атрибут data-spy="affix". Затем data-offset-top="200" для контроля отступа.

<div data-spy="affix" data-offset-top="200">...</div>
Внимание! Вы должны контроллировать поведение закрепленного элемента, и его родителя. Положение упраляется через affix, affix-top, и affix-bottom.

Через JavaScript

Вызов плагина affix через JavaScript:

$('#navbar').affix()

Методы

.affix('refresh')

При изменении DOM, Вам может потребоваться метод для обновления:

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-offset-top="200".

Имя Тип Значение по умолчанию Описание
offset number | function | object 10 Отступ к пикселях от экрана до котроллируемого элемента. Если указано одно число правило будет применено к left и top. Для задания множества отступов - Вы можете пережать объект в метод: offset: { x: 10 }.