Разное

Не работает tooltip bootstrap: Почему не работает tooltip на сайте от Bootstrap? — Хабр Q&A

Содержание

Подсказки · Bootstrap на русском

Вдохновленный отличным навеселе jQuery плагин написанный Jason Frame. Всплывающие подсказки-это обновленная версия, которая не полагаться на изображения, использовать CSS3 для анимации, и сведения-атрибуты для местных Заголовок хранения.

Содержание

Обзор

Что нужно знать при использовании плагин всплывающей подсказки:

  • Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
  • Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
  • Подсказки с нулевой длины названия не отображаются.
  • Укажите container: 'body' чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.).
  • Вызывая подсказки на скрытые элементы не будут работать.
  • Подсказки для .disabled или disabled элементы должны быть вызваны на элемент оболочки.
  • При срабатывании из гиперссылок, которые охватывают несколько строк, подсказки будут центрироваться. Используйте white-space: nowrap; на <a>, чтобы избежать этого поведения.

Получил все это? Отлично, давайте посмотрим, как они работают с некоторыми примерами.

Одним из способов инициализации все подсказки на странице будет выбрать их data-toggle атрибута:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Примеры

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

Статические демо

Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.

Интерактивная демо-версия

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

<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

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

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

Вызвать подсказку через JavaScript:

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

Разметки

Требуемая разметка для подсказки только data атрибут title на HTML элемент, который вы хотите иметь подсказку. Созданный разметки подсказки достаточно проста, хотя и требует установки (по умолчанию значение top плагином).

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

Следует только добавить всплывающие подсказки для элементов HTML, которые традиционно клавиатурой и интерактивным (например, ссылки или элементы управления формы). Хотя произвольный HTML-элементы (такие как <span>) может быть сделан фокус на добавление tabindex="0" атрибута, это может Добавить закладку раздражает и смущает останавливается на неинтерактивные элементы для пользователей клавиатуры. Кроме того, большинство технологий, в настоящее время не озвучит подсказки в этой ситуации.

<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Сгенерированной разметке плагин -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, а на data-animation="".

Имя Тип По умолчанию Описание
animation boolean true Нанесите CSS плавного перехода к подсказке
container string | false false

Добавляет всплывающую подсказку к конкретному элементу. Пример: container: 'body'. Эта опция особенно полезна тем, что позволяет позиционировать подсказку в потоке документа рядом с пусковым элементом, который позволит предотвратить подсказки от того, чтобы улететь с пусковым элементом при изменении размеров окна.

delay number | object 0

Задержка отображения и скрытия подсказки (мс) — не применяется к ручной запуск Тип

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

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

html boolean false Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак.
placement string | function ‘top’

Как подсказка — сверху | снизу | слева | справа | авто.
когда «авто» указано, оно будет динамически переориентировать подсказке. Например, если размещение «авто слева», подсказка будет показывать налево, когда это возможно, в противном случае будет отображаться правильно.

Когда функция используется для определения размещения, это называется с tooltip DOM узел в качестве первого аргумента и пусковым элемент DOM узле в качестве второго. В this контекст имеет значение экземпляра подсказки.

selector string false Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример.
template string '<div role="tooltip"><div></div><div></div></div>'

Базовый HTML-для использования при создании всплывающей подсказки.

Подсказки title вводится в поток .tooltip-inner.

.tooltip-arrow станет стрелка подсказки.

Элемент внешней оболочки должен иметь .tooltip класс.

title string | element | function »

По умолчанию название значение, если атрибут title Нет.

Если дана функция, она будет вызвана с его this ссылки на элемент, что подсказка прилагается.

trigger string ‘hover focus’ Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. «вручную» не может сочетаться с любой другой триггер.
constraints Array [] Множество препятствий — прошел на Tether. Дополнительные сведения см. в разделе Tether’ы ограничение документы.
offset string ‘0 0’ Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether’ы смещение документы.
Атрибуты данных для отдельных подсказки

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

Методы

$().tooltip(options)

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

.tooltip('show')

Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip события). Это считается “ручного” срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.

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

.tooltip('hide')

Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.

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

.tooltip('toggle')

Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip или hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.

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

.tooltip('dispose')

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

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

События

Тип События Описание
show.bs.tooltip Это событие возникает сразу же, когда show вызывается способ экземпляра.
shown.bs.tooltip Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения).
hide.bs.tooltip Это событие сразу же уволили, когда hide метод экземпляра называется.
hidden.bs.tooltip Это событие запускается, когда подсказка закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделать что-то...
})

Tooltip CSS уроки для начинающих академия


Создание всплывающих подсказок с помощью CSS.


Демонстрация: примеры подсказок

Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент:


Базовая подсказка

Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:

Пример

/* Tooltip container */
.tooltip {
    position: relative;
   
display: inline-block;
    border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}

/* Tooltip text
*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
   
background-color: black;
    color: #fff;
   
text-align: center;
    padding: 5px 0;
   
border-radius: 6px;
 
   
/* Position the tooltip text — see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
    visibility: visible;
}
</style>

<div>Hover
over me
  <span>Tooltip
text</span>
</div>

Пример объяснено

HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip" . Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.

Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip использует position:relative , который необходим для размещения текста подсказки ( position:absolute ).
Примечание: Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptext содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.

Свойство CSS border-radius используется для добавления скругленных углов в текст подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с class="tooltip" .



Размещение всплывающих подсказок

В этом примере подсказка помещается справа ( left:105% ) «парящего» текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине его элемента контейнера.
Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.

Подсказка справа

.tooltip .tooltiptext {
    top: -5px;
   
left:
105%;
}

Result:

Hover over me
Tooltip text

Левая подсказка

.tooltip .tooltiptext {
    top: -5px;
   
right:
105%;
}

Result:

Hover over me
Tooltip text

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
    width: 120px;
   
bottom: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text

Нижняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text


Стрелки подсказки

Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after вместе со свойством content . Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 100%;
/* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: black transparent transparent transparent;
}

Result:

Hover over me
Tooltip text

Пример объяснено

Поместите стрелку в подсказку: top: 100% будет размещать стрелку в нижней части всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. При изменении этого параметра также измените значение margin-left. Это будет держать стрелку в центре.

border-color используется для преобразования содержимого в стрелку. Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.

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

Верхняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent black transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку слева от подсказки:

Стрелка влево

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
top: 50%;
    right: 100%; /* To the left of the tooltip
*/
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent black transparent transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку справа от подсказки:

Стрелка вправо

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the
tooltip */
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent transparent black;
}

Result:

Hover over me
Tooltip text


Исчезать в подсказках (анимация)

Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition свойство вместе с opacity свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :

Пример

.tooltip .tooltiptext {
    opacity: 0;
   
transition: opacity 1s;
}

.tooltip:hover
.tooltiptext {
    opacity: 1;
}

Использование атрибута aria-describedby — Доступность

Описание

Атрибут aria-describedby используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на aria-labelledby: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.

Атрибут aria-describedby используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе Examples ниже приведено больше информации о том как использовать атрибут в этих случаях.

Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена  ARIA role .

Значение

разделенный пробелами список ID элементов

Возможные последствия для пользовательских агентов и вспомогательных технологийP

Примечание: Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведенная выше информация является одним из таких мнений и поэтому не носит нормативного характера.

Примеры

Пример 1: Связвание приложения и описания

В примере ниже, вводный параграф описывает приложение календаря. aria-describedby используется для связывания параграфа с контейнером приложения.

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h2>Calendar</h2>
    <p>
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>
Пример 2: Кнопка закрытия

В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.

<button aria-label="Close" aria-describedby="descriptionClose"
   >X</button>

...

<div>Closing this window will discard any information entered and
return you back to the main page</div>

Рабочие примеры:

Примечания

  • Атрибут aria-describedby не предназначен для ссылки, описывающей внешний ресурс — так как это ID, он должен ссылаться на элемент в том же документе  DOM.

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

все элементы базовой разметки

Связанные ARIA методы

Совместимость

Дополнительные ресурсы

javascript — всплывающая подсказка Bootstrap не работает в моем веб-проекте

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

Это буквально очень странно.Вот моя реализация, которая отлично работает с JsFiddle.

  

  
    
    

    
    

    
    
    
    
    
  
  
     <раздел>
      

Легкость


каждому дому

А для решений я много чего сделал, но, к сожалению, все не сработало.

  1. С учетом названия класса

      
      
  2. Чтобы использовать элемент body для нацеливания на переключатель данных:

      
      
  3. Чтобы использовать контейнер как тело и сфокусироваться на секции:

      
      

Это то, что я получаю в своем веб-проекте:

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

РЕДАКТИРОВАТЬ

Я проверил консоль и получил сообщение об ошибке .всплывающая подсказка не является функцией :

Всплывающие подсказки · Bootstrap

Документация и примеры для добавления пользовательских всплывающих подсказок Bootstrap с помощью CSS и JavaScript с использованием CSS3 для анимации и атрибутов данных для локального хранилища заголовков.

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

  • Всплывающие подсказки полагаются на стороннюю библиотеку Popper.js для позиционирования. Вы должны включить popper.min.js перед загрузкой.js или используйте bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper.js, чтобы всплывающие подсказки работали!
  • Если вы создаете наш JavaScript из исходного кода, для него требуется util.js .
  • Всплывающие подсказки включены по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
  • Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
  • Укажите контейнер : 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т. Д.).
  • Всплывающие подсказки для скрытых элементов не работают.
  • Всплывающие подсказки для .disabled или disabled элементов должны запускаться для элемента оболочки.
  • При запуске из гиперссылок, охватывающих несколько строк, всплывающие подсказки будут центрированы. Используйте пробел : nowrap; на ваших s, чтобы избежать такого поведения.
  • Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.

Поняли? Отлично, давайте посмотрим, как они работают, на некоторых примерах.

Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по их атрибуту data-toggle :

  $ (function () {
  $ ('[data-toggle = "tooltip"]'). tooltip ()
})  

Примеры

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

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

  


  

И с добавлением собственного HTML:

    

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

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

Запуск всплывающей подсказки через JavaScript:

  $ ('# example'). Tooltip (параметры)  
Переполнение

авто и прокрутка

Позиция всплывающей подсказки пытается автоматически измениться, когда родительский контейнер имеет overflow: auto или overflow: прокрутите , как наш .table-responsive , но по-прежнему сохраняет исходное расположение размещения. Чтобы решить эту проблему, установите для параметра border любое значение, отличное от значения по умолчанию, 'scrollParent' , например 'window' :

.

  $ ('# пример').всплывающая подсказка ({граница: 'окно'})  

Разметка

Требуемая разметка для всплывающей подсказки — это только атрибутов данных и заголовка в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top ).

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

Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно ориентированы на клавиатуру и являются интерактивными (например, ссылки или элементы управления формы).Хотя произвольные элементы HTML (например, s) можно сделать доступными для фокусировки, добавив атрибут tabindex = "0" , это добавит потенциально раздражающие и сбивающие с толку позиции табуляции на неинтерактивных элементах для пользователей клавиатуры. Кроме того, большинство вспомогательных технологий в настоящее время не выводят всплывающую подсказку в этой ситуации.

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

  
 Наведите указатель мыши на меня 


Текст всплывающей подсказки!

Отключенные элементы

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

или , в идеале сделанной с фокусировкой на клавиатуре, используя tabindex = "0" , и переопределить события указателя на отключенный элемент.

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-animation = "" .

Номер

Номер

Имя Тип По умолчанию Описание
анимация логический правда Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер строка | элемент | ложь ложный

Добавляет всплывающую подсказку к определенному элементу.Пример: контейнер: 'body' . Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

задержка | объект 0

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

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

Структура объекта: задержка: {"показать": 500, "скрыть": 100}

HTML логический ложный

Разрешить HTML во всплывающей подсказке.

Если true, теги HTML в заголовке всплывающей подсказки будут отображаться во всплывающей подсказке. Если false, метод jQuery text будет использоваться для вставки содержимого в DOM.

Используйте текст, если вас беспокоят XSS-атаки.

размещение строка | функция ‘верх’

Как разместить всплывающую подсказку — авто | наверх | внизу | слева | верно.
Если указано auto , всплывающая подсказка будет динамически переориентирована.

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

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

'

Базовый HTML-код для использования при создании всплывающей подсказки.

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

.arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь .tooltip class и role = "tooltip" .

название строка | элемент | функция

Значение заголовка по умолчанию, если атрибут заголовок отсутствует.

Если функция задана, она будет вызываться со своей ссылкой this , установленной на элемент, к которому прикреплена всплывающая подсказка.

триггер строка ‘hover focus’

Как запускается всплывающая подсказка — щелкните | зависать | фокус | руководство.Вы можете передать несколько триггеров; разделите их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно с помощью методов .tooltip ('show') , .tooltip ('hide') и .tooltip ('toggle') ; это значение нельзя комбинировать с каким-либо другим триггером.

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

смещение | строка 0 Смещение всплывающей подсказки относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение строка | массив ‘переворот’ Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поведение Popper.js docs
граница строка | элемент ‘scrollParent’ Граница ограничения переполнения всплывающей подсказки.Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.
Атрибуты данных для отдельных всплывающих подсказок

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

Методы

Асинхронные методы и переходы

Все методы API являются асинхронными и запускают переход .Они возвращаются к вызывающей стороне, как только начинается переход, но до его завершения . Кроме того, вызов метода для переходного компонента будет проигнорирован .

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Подсказка (опции)

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

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

Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка будет отображена на самом деле (т.е.е. до того, как произойдет событие shown.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.

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

.tooltip ('hide')

Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие hidden.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки.

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

.tooltip ('toggle')

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (т.е. до того, как произойдет событие shown.bs.tooltip или hidden.bs.tooltip ). Это считается «ручным» запуском всплывающей подсказки.

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

.tooltip ('dispose')

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

  $ ('# element'). Tooltip ('dispose')  

.tooltip ('enable')

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

  $ ('# element'). Tooltip ('enable')  

.tooltip ('disable')

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

  $ ('# element'). Tooltip ('disable')  

.tooltip ('toggleEnabled')

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

  $ ('# element'). Tooltip ('toggleEnabled')  

.tooltip ('update')

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

  $ ('# element'). Tooltip ('update')  

События

Показан

Тип события Описание
показать.bs.tooltip Это событие запускается немедленно при вызове метода экземпляра show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.всплывающая подсказка Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  

Всплывающие подсказки для начальной загрузки - примеры и руководство

Номер

Номер

анимация логический правда Применить переход CSS постепенного изменения к всплывающей подсказке
контейнер строка | элемент | ложь ложный

Добавляет всплывающую подсказку к определенному элементу.Пример:
контейнер: 'body' . Эта опция особенно полезна тем, что позволяет
вы разместите всплывающую подсказку в потоке документа рядом с элементом запуска
- что предотвратит отрыв всплывающей подсказки от триггерного элемента
во время изменения размера окна.

customClass строка | функция '

Добавляйте классы в всплывающую подсказку, когда она отображается.Обратите внимание, что эти классы будут добавлены в
дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите
их с пробелами: 'класс-1 класс-2' .

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

задержка | объект 0

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

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

Структура объекта: задержка: {"показать": 500, "скрыть": 100}

HTML логический ложный

Разрешить HTML во всплывающей подсказке.

Если true, HTML-теги в заголовке всплывающей подсказки будут отображаться в
всплывающая подсказка. Если false, innerText свойство будет использоваться для вставки содержимого в
ДОМ.

Используйте текст, если вас беспокоят XSS-атаки.

размещение строка | функция 'верх'

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

Когда функция используется для определения размещения, она вызывается с помощью DOM всплывающей подсказки.
node в качестве первого аргумента, а DOM-узел триггерного элемента - в качестве второго. В
этот контекст установлен для экземпляра всплывающей подсказки.

селектор строка | ложь ложный Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям.На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM.
( jQuery. При поддержке ). Видеть
это
и
информативный пример.
шаблон строка '

'

Базовый HTML-код для использования при создании всплывающей подсказки.

Заголовок всплывающей подсказки будет вставлен в
.tooltip-внутренний .

.tooltip-arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь
.tooltip class и role = "tooltip" .

титул строка | элемент | функция '

Значение заголовка по умолчанию, если атрибут заголовок отсутствует.

Если задана функция, она будет вызываться со своим
- это ссылка , установленная для элемента, к которому прикреплена всплывающая подсказка.

триггер строка 'hover focus'

Как запускается всплывающая подсказка - щелкните | зависать | фокус | руководство. Вы можете пройти несколько
триггеры; разделите их пробелом.

'manual' указывает, что всплывающая подсказка будет запускаться программно
через .tooltip ('show') , .tooltip ('hide') и
.tooltip ('toggle') методов; это значение нельзя комбинировать с другими
спусковой крючок.

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

смещение | строка | функция 0

Смещение всплывающей подсказки относительно цели.

Когда функция используется для определения смещения, она вызывается с объектом
содержащий данные смещения в качестве первого аргумента. Функция должна возвращать объект
с такой же структурой.Узел DOM запускающего элемента передается как второй
аргумент.

Для получения дополнительной информации обратитесь к Поппера
офсетные документы.

резервное размещение строка | массив "переворот" Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поппера
документы о поведении
граница строка | элемент 'scrollParent' Граница ограничения переполнения всплывающей подсказки.Принимает значения
'viewport' , 'window' , 'scrollParent' или
Справка по HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к Поппера
preventOverflow docs.
продезинфицировать логический правда Включите или отключите дезинфекцию. Если активировано
"шаблон" и "заголовок" параметры будут очищены.
белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
sanitizeFn null | функция null Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать
специальная библиотека для выполнения дезинфекции.
popperConfig null | объект null Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, см.
Конфигурация Поппера

Размещение всплывающей подсказки начальной загрузки

Введение

Иногда, особенно на рабочем столе, полезно иметь уточненную выноску вместе с некоторыми подсказками, появляющимися, когда посетитель наводит указатель мыши на элемент.Таким образом, мы уверены, что наиболее подходящая информация, безусловно, была предоставлена ​​в нужное время и, мы надеемся, повысила удобство и комфорт посетителей сайта при использовании наших веб-страниц. Об этой деятельности заботится элемент всплывающей подсказки, который, в свою очередь, имеет отличный и регулярный внешний вид для всего дизайна фреймворка в новейшей версии Bootstrap 4, и, безусловно, их очень легко включить и настроить - почему бы нам не увидеть, как это получается выполнила .

Подробности, которые нужно изучить при использовании класса всплывающей подсказки Bootstrap:

- Всплывающие подсказки Bootstrap используют для настройки стороннюю библиотеку Tether.Вам необходимо предоставить tether.min.js перед bootstrap.js, чтобы всплывающие подсказки работали!

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

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

- Укажите контейнер : 'body' , чтобы избежать сложностей рендеринга в сверхсложном

элемента (например, группы ввода, группы кнопок и т. Д.).

- Активация всплывающих подсказок для скрытых компонентов определенно не работает.

- всплывающие подсказки для .disabled или disabled компонентов необходимо активировать в элементе оболочки.

- При срабатывании ссылки на веб-странице, занимающей множество строк, всплывающие подсказки будут сосредоточены. Примените white-space: nowrap ; на ваших -s, чтобы держаться подальше от этой деятельности.

Понятно? Отлично, почему бы нам не посмотреть, как они работают, на нескольких примерах.

Способы применения всплывающих подсказок Bootstrap:

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

Переключатель одиночный

Добавьте data-toggle = "button" , чтобы активировать переключение на одной кнопке.

Предварительно переключенным кнопкам необходимо

.active и aria -olved = "true"

Для кнопок с предварительным переключением необходимо самостоятельно добавить класс .active и атрибут aria -hibited = "true" к кнопке button .

Одиночный переключатель

    

Флажок / Радио

Добавьте data-toggle = "buttons" в .btn-group , содержащий флажки или радиовходы, позволяющие переключаться между соответствующими стилями.

Требуется предварительно выбранные опции

.активно

Для предварительно выбранных опций необходимо самостоятельно добавить класс .active к метке входа .

Состояние визуальной проверки обновляется только при нажатии

Если отмеченное состояние кнопки флажка обновляется без запуска события click на кнопке (например,через или установив свойство checked для входа), вам нужно будет самостоятельно переключить класс .active на метку входа.

  
<метка> Флажок 1 (предварительно установлен) <метка> Флажок 2 <метка> Флажок 3
  
<метка> Радио 1 (предварительно выбрано) <метка> Радио 2 <метка> Радио 3

Методы

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

Переключает состояние push. Придает кнопке вид, что она была активирована.

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

Сбрасывает состояние кнопки - заменяет текст исходным текстом. Этот метод является асинхронным и возвращается до фактического завершения сброса.

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

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

  

<сценарий>
  $ ('# myStateButton'). on ('щелчок', function () {
    $ (this) .button ('complete') // текст кнопки будет "готово!"
  })
  

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

Зависимость плагина

Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap.

Пример

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

  • .свернуть скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.in показывает содержимое

Можно использовать ссылку с атрибутом href или кнопку с атрибутом data-target . В обоих случаях требуется data-toggle = "collapse" .

Ссылка на href

Кнопка с целью данных

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.

  

...

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

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

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

  
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.
Anim pariatur cliche проницательно, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer от фермы до стола, из сырого денима, эстетичного синтеза, вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

Также можно заменить .panel-body s на .list-group s.

  • Загрузочный
  • One itmus ac Facilin
  • Второй эрос
Сделать доступными элементы управления разворачиванием / свертыванием

Не забудьте добавить aria-extended к элементу управления. Этот атрибут явно определяет текущее состояние сворачиваемого элемента для программ чтения с экрана и аналогичных вспомогательных технологий.Если складной элемент закрыт по умолчанию, он должен иметь значение aria-extended = "false" . Если вы установили открываемый складной элемент по умолчанию с использованием класса в , вместо этого установите aria-extended = "true" в элементе управления. Плагин автоматически переключает этот атрибут в зависимости от того, был ли открыт или закрыт складной элемент.

Кроме того, если ваш элемент управления нацелен на один складной элемент, т. Е.Атрибут data-target указывает на селектор id - вы можете добавить дополнительный атрибут aria-controls к элементу управления, содержащий id сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу.

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

Плагин коллапса использует несколько классов для работы с тяжелой работой:

  • .collapse скрывает содержимое
  • .collapse.in показывает содержимое
  • .collapsing добавляется при запуске перехода и удаляется при его завершении

Эти классы можно найти в component-animations.less .

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

Просто добавьте data-toggle = "collapse" и data-target к элементу, чтобы автоматически назначить управление сворачиваемым элементом.Атрибут data-target принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс в .

Чтобы добавить управление группами в виде гармошки к складному элементу управления, добавьте атрибут данных data-parent = "# selector" . Обратитесь к демонстрации, чтобы увидеть это в действии.

Через JavaScript

Включить вручную с помощью:

  $ ('.коллапс '). коллапс ()  

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-parent = "" .

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

Методы

. Свернуть (опции)

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

  $ ('# myCollapsible').крах({
  toggle: false
})  

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

Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse ).

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

Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан. (т.е.е. перед событием shown.bs.collapse ).

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

Скрывает складной элемент. Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента (т.е. до того, как произойдет событие hidden.bs.collapse ).

События

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

Показано

Тип события Описание
показать.bs.collapse Это событие запускается немедленно при вызове метода экземпляра show .
.bs.collapse Это событие вызывается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS).
hide.bs.collapse Это событие запускается сразу после вызова метода hide .
скрыто.bs.collapse Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myCollapsible'). On ('hidden.bs.collapse', function () {
  // сделай что-нибудь…
})  

Компонент слайд-шоу для циклического просмотра элементов, например карусели. Вложенные карусели не поддерживаются.

Примеры

    
Проблема доступности

Компонент карусели обычно не соответствует стандартам доступности.Если вам нужно соответствовать требованиям, рассмотрите другие варианты представления вашего контента.

Анимация перехода не поддерживается в Internet Explorer 8 и 9

Bootstrap использует исключительно CSS3 для своей анимации, но Internet Explorer 8 и 9 не поддерживает необходимые свойства CSS. Таким образом, при использовании этих браузеров анимация перехода между слайдами отсутствует. Мы намеренно решили не включать резервные варианты на основе jQuery для переходов.

Требуется начальный активный элемент

Модель .Активный класс необходимо добавить на один из слайдов. В противном случае карусель не будет видна.

Глификоны не нужны

Классы .glyphicon .glyphicon-chevron-left и .glyphicon .glyphicon-chevron-right не обязательно нужны для элементов управления. Bootstrap предоставляет .icon-prev и .icon-next как простые альтернативы Unicode.

Дополнительные подписи

Легко добавляйте подписи к слайдам с помощью .carousel-caption в любом элементе .item . Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован.

Этикетка первого слайда

Nulla vitae elit libero, pharetra augue mollis interdum.

Этикетка второго слайда

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Этикетка третьего слайда

Praesentmodo cursus magna, vel scelerisque nisl consctetur.

Предыдущий

Следующий

  
...

...

...

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

Несколько каруселей

Карусели требуют использования id на самом внешнем контейнере (.карусель ) для правильной работы элементов управления каруселью. При добавлении нескольких каруселей или изменении идентификатора карусели обязательно обновите соответствующие элементы управления.

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

Используйте атрибуты данных, чтобы легко управлять положением карусели. data-slide принимает ключевые слова prev или next , которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-to , чтобы передать необработанный индекс слайда в карусель data-slide-to = "2" , который сдвигает положение слайда на конкретный индекс, начиная с 0 .

Атрибут data-ride = "carousel" используется для обозначения карусели как анимированной, начиная с загрузки страницы. Не может использоваться в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.

Через JavaScript

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

  $ ('. Карусель'). Карусель ()  

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data- , как в data-interval = "" .

Имя тип по умолчанию описание
интервал номер 5000 Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
пауза строка «парение» Приостанавливает цикл карусели на mouseenter и возобновляет цикл карусели на mouseleave.
обертка логический правда Должна ли карусель двигаться непрерывно или иметь жесткие остановки.
клавиатура логический правда Должна ли карусель реагировать на события клавиатуры.

Методы

. Карусель (опции)

Инициализирует карусель с дополнительным объектом options и начинает циклический просмотр элементов.

  $ ('. Carousel'). Carousel ({
  интервал: 2000
})  

. Карусель ('цикл')

Перебирает элементы карусели слева направо.

. Карусель ('пауза')

Запрещает карусели циклически перемещаться по элементам.

. Карусель (номер)

Циклический переход карусели к определенному кадру (на основе 0, аналогично массиву).

. Карусель ('предыдущая')

Переход к предыдущему элементу.

. Карусель ('далее')

Переход к следующему элементу.

События

Класс карусели

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

Оба события имеют следующие дополнительные свойства:

  • направление : направление, в котором движется карусель ( «влево» или «вправо» ).
  • relatedTarget : элемент DOM, который вставляется на место в качестве активного элемента.

Все события карусели запускаются в самой карусели (то есть в

).

Тип события Описание
слайд-карусель Это событие запускается немедленно при вызове метода экземпляра slide .
карусель скольжения Это событие вызывается, когда карусель завершает переход между слайдами.
  $ ('# myCarousel'). On ('slide.bs.carousel', function () {
  // сделай что-нибудь…
})  

Пример

Плагин аффикса переключает положение : фиксированное; вкл. И выкл., Имитируя эффект, обнаруженный с позицией : липкое; . Поднавигация справа - это живая демонстрация плагина аффиксов.


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

Используйте подключаемый модуль аффиксов через атрибуты данных или вручную с помощью собственного JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования и ширины вашего прикрепленного контента.

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

Позиционирование через CSS

Плагин affix переключает между тремя классами, каждый из которых представляет определенное состояние: .affix , .affix-top и .affix-bottom .Вы должны предоставить стили, за исключением position: fixed; на .affix , чтобы эти классы самостоятельно (независимо от этого плагина) обрабатывали фактические позиции.

Вот как работает плагин affix:

  1. Для начала плагин добавляет .affix-top , чтобы указать, что элемент находится в самой верхней позиции. На этом этапе позиционирование CSS не требуется.
  2. Прокрутка мимо элемента, который вы хотите прикрепить, должна вызвать фактическое прикрепление.Здесь .affix заменяет .affix-top и устанавливает position: fixed; (предоставляется CSS Bootstrap).
  3. Если задано нижнее смещение, прокрутка мимо него должна заменить .affix на .affix-bottom . Поскольку смещения являются необязательными, для их настройки необходимо установить соответствующий CSS. В этом случае добавьте position: absolute; при необходимости. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где разместить элемент оттуда.

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

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

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

  
...

Через JavaScript

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

  $ ('# myAffix').affix ({
  компенсировать: {
    верх: 100,
    внизу: function () {
      return (this.bottom = $ ('. footer'). outerHeight (true))
    }
  }
})  

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data- , как в data-offset-top = "200" .

Номер

Селектор

Имя тип по умолчанию описание
смещение | функция | объект 10 Пикселей для смещения от экрана при вычислении положения прокрутки.Если указано одно число, смещение будет применяться как в верхнем, так и в нижнем направлениях. Чтобы обеспечить уникальное смещение снизу и сверху, просто укажите смещение объекта : {top: 10} или смещение: {top: 10, bottom: 5} . Используйте функцию, когда вам нужно динамически вычислить смещение.
цель | узел | Элемент jQuery окно объект Задает целевой элемент аффикса.

Методы

. Крепление (опции)

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

  $ ('# myAffix'). Affix ({
  смещение: 15
})  

.affix ('checkPosition')

Пересчитывает состояние аффикса на основе размеров, положения и положения прокрутки соответствующих элементов. .affix , .affix-top и .affix-bottom классы добавляются или удаляются из прикрепленного содержимого в соответствии с новым состоянием. Этот метод необходимо вызывать всякий раз, когда изменяются размеры прикрепленного содержимого или целевого элемента, чтобы гарантировать правильное позиционирование прикрепленного содержимого.

  $ ('# myAffix'). Affix ('checkPosition')  

События

Плагин аффиксов

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

Тип события Описание
проставить.bs.affix Это событие запускается непосредственно перед прикреплением элемента.
прикрепленный аффикс Это событие запускается после прикрепления элемента.
affix-top.bs.affix Это событие запускается непосредственно перед прикреплением элемента вверху.
прикрепленный верхний аффикс Это событие вызывается после того, как элемент был прикреплен сверху.
прикрепление нижнее крепление Это событие запускается непосредственно перед прикреплением элемента снизу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

2021 © Все права защищены. Карта сайта