Html метод jquery: Метод .html() | jQuery справочник

Содержание

Jquery HTML / CSS Methods

В следующей таблице перечислены все методы, используемые для управления HTML и CSS.

Приведенные ниже методы работают как для HTML, так и для XML-документов. Исключение: метод HTML ().

Метод Описание
addClass() Добавление одного или нескольких имен классов в выбранные элементы
after() Вставка содержимого после выбранных элементов
append() Вставка содержимого в конец выбранных элементов
appendTo() Вставка элементов HTML в конец выбранных элементов
attr() Задает или возвращает атрибуты/значения выбранных элементов
before() Вставка содержимого перед выбранными элементами
clone() Создает копию выбранных элементов
css() Задание или возврат одного или нескольких свойств стиля для выбранных элементов
detach() Удаляет выбранные элементы (хранит данные и события)
empty() Удаляет все дочерние узлы и содержимое из выбранных элементов
hasClass() Проверяет, имеет ли какой-либо из выбранных элементов указанное имя класса
height() Задание или возврат высоты выбранных элементов
html() Задает или возвращает содержимое выбранных элементов
innerHeight() Возвращает высоту элемента (включая отступы, но не границы)
innerWidth() Возвращает ширину элемента (включая отступы, но не границы)
insertAfter() Вставка элементов HTML после выбранных элементов
insertBefore() Вставка элементов HTML перед выбранными элементами
offset() Задание или возврат координат смещения для выбранных элементов (относительно документа)
offsetParent() Возвращает первый позиционный родительский элемент
outerHeight() Возвращает высоту элемента (включая отступы и границы)
outerWidth() Возвращает ширину элемента (включая отступы и границы)
position() Возвращает позицию (относительно родительского элемента) элемента
prepend() Вставка содержимого в начало выбранных элементов
prependTo() Вставка элементов HTML в начало выбранных элементов
prop() Задает или возвращает свойства/значения выбранных элементов
remove() Удаление выбранных элементов (включая данные и события)
removeAttr() Удаление одного или нескольких атрибутов из выбранных элементов
removeClass() Удаление одного или нескольких классов из выбранных элементов
removeProp() Удаляет свойство, заданное методом Prop ()
replaceAll() Заменяет выбранные элементы новыми элементами HTML
replaceWith() Замена выбранных элементов новым содержимым
scrollLeft() Задает или Возвращает горизонтальное положение полосы прокрутки выбранных элементов
scrollTop() Задание или возврат вертикального положения полосы прокрутки выбранных элементов
text() Задает или возвращает текстовое содержимое выбранных элементов
toggleClass() Переключение между добавлением/удалением одного или нескольких классов из выбранных элементов
unwrap() Удаляет родительский элемент выбранных элементов
val() Задает или возвращает атрибут value выбранных элементов (для элементов формы)
width() Задает или возвращает ширину выбранных элементов
wrap() Перенос элементов HTML вокруг каждого выбранного элемента
wrapAll() Перенос элементов HTML вокруг всех выбранных элементов
wrapInner() Перенос элементов HTML вокруг содержимого каждого выбранного элемента

jQuery HTML / CSS методы

метод Описание
addClass() Добавляет один или несколько имен классов выбранных элементов
after() Вставляет содержимое после того, как выбранные элементы
append() Содержание Вставки в конце выбранных элементов
appendTo() Вставляет HTML элементы в конце выбранных элементов
attr() Устанавливает или возвращает атрибуты / значения выбранных элементов
before() Вставляет содержимое перед тем выбранные элементы
clone() Делает копию выбранных элементов
css() Устанавливает или возвращает одно или несколько свойств стилей для выбранных элементов
detach() Удаляет выбранные элементы (сохраняет данные и события)
empty() Удаляет все дочерние узлы и содержимого из выбранных элементов
hasClass() Проверяет, является ли какой-либо из выбранных элементов имеют определенное имя класса
height() Устанавливает или возвращает высоту выбранных элементов
html() Устанавливает или возвращает содержимое выбранных элементов
innerHeight() Возвращает высоту элемента (включает в себя прокладку, но не граница)
innerWidth() Возвращает ширину элемента (включает в себя прокладку, но не граница)
insertAfter() Элементы Вставки HTML после выбранных элементов
insertBefore() Элементы Вставки HTML до выбранных элементов
offset() Устанавливает или возвращает координаты смещения для выбранных элементов (по отношению к документу)
offsetParent() Возвращает первый элемент, расположенный родительский
outerHeight() Возвращает высоту элемента (включает отступы и границы)
outerWidth() Возвращает ширину элемента (включает отступы и границы)
position() Возвращает позицию (относительно родительского элемента) элемента
prepend() Содержание Вставки в начале выбранных элементов
prependTo() Вставка HTML-элементов в начале выбранных элементов
prop() Устанавливает или возвращает свойства / значения выбранных элементов
remove() Удаляет выбранные элементы (в том числе данных и событий)
removeAttr() Удаляет один или несколько атрибутов из выбранных элементов
removeClass() Удаляет один или несколько классов из выбранных элементов
removeProp() Удаляет свойство , установленный prop() метод
replaceAll() Заменяет выбранные элементы с новыми элементами HTML
replaceWith() Заменяет выбранные элементы с новым содержанием
scrollLeft() Устанавливает или возвращает горизонтальное положение полосы прокрутки выбранных элементов
scrollTop() Устанавливает или возвращает вертикальное положение полосы прокрутки выбранных элементов
text() Устанавливает или возвращает текстовое содержимое выбранных элементов
toggleClass() Переключение между добавление / удаление одного или нескольких классов из выбранных элементов
unwrap() Удаляет родительский элемент из выбранных элементов
val() Устанавливает или возвращает значение атрибута выбранных элементов (для элементов формы)
width() Устанавливает или возвращает ширину выбранных элементов
wrap() Обертывания HTML element(s) вокруг каждого выбранного элемента
wrapAll () Обертывания HTML element(s) вокруг всех выбранных элементов
wrapInner () Обертывания HTML element(s) вокруг содержания каждого выбранного элемента

Поиск DOM элементов с помощью jQuery

В этом уроке мы разберем, как искать елементы с помощью jQuery.

У нас есть html файл с подключенным скриптом code, где мы будем писать наш javascript. Давайте подключим скрипт jQuery до нашего скрипта. Таким образом библиотека будет нам доступна, когда мы будем писать наш код

<body>
  <script src='jquery.js'></script>
  <script src='code.js'></script>
</body>

Как же нам использовать jQuery? Когда мы установили библиотеку jQuery у нас в window появилась две переменных jQuery и $. Это то, как мы можем обращатся к нашей библиотеке, чтобы ее использовать. Обычно все использую знак доллар, так как он короче и код получается лаконичнее.

Главный смысл jQuery заключается в том, что как аргумент функции $ мы можем передать строку либо DOM елемент. Тогда jQuery попробует найти его в DOM и вернет не сам DOM елемент, а специальный jQuery обьект на который можно вызывать другие jQuery методы.

Давайте добавим див с классом app

<div>App</div>

Давайте попробуем найти этот елемент. Я предпочитаю переменные, в которые записаны jQuery елемент начинать с знака $. Это позволяет сразу понимать что внутри.

var $app = $('.app')
console.log($app)

Как мы видим в консоли, мы получили массив, в котором первый елемент является нашим DOM елементом.

Теперь мы можем вызывать jQuery методы прямо на нашу переменную $app, так как это у нас jQuery елемент.

Например давайте поменяем цвет елемента.

var $app = $('.app')
$app.css('color', 'red')

То есть мы вызвали метод jQuery .css, который принимает стиль и значение. Как вы видите, этот код намного лаконичнее, чем мы писали на чистом javascript и мы всегда можем быть уверенны в том, что он работает кроссбраузерно.

Еще jQuery замечателен тем, что после каждом операции мы получаем обратно jQuery елемент. Это значит, что мы можем писать цепочки вызовов.

Например:

var $app = $('.app')

$app.css('color', 'red')
  .css('font-size', '24px')
  .css('border', '1px solid red')

Поиск елементов может так же осуществлятся по тегу, классу, id. Давайте попробуем.

Добавим добавим id к нашему елементу.

<div>App</div>

Теперь мы можем искать елемент по id вот так.

var $app = $('#app')

Либо по тегу.

var $app = $('div')

Еще один плюс, если вы заметили, это то, что мы всегда работаем с массивом и применяем стили на все елементы. В данном случае $app массив.

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

<div>App 1</div>
<div>App 2</div>
<div>App 3</div>

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

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

Методы jQuery

Манипуляции с DOM Эти методы каким-либо образом манипулируют элементами DOM, например изменение атрибута, атрибута стиля, добавление и удаление элементов и т. д. после (),
добавить (),
attr (),
before (), еще
..
Перемещение Эти методы помогают переходить от элемента DOM к другому элементу в родительской дочерней иерархии. E.г. поиск предков, потомков или родственных элементов указанного элемента. детей (),
ближайший (),
каждый (),
первый (),
следующая (),
фильтр (),
родитель (),
siblings (), еще
..
CSS Эти методы получают и устанавливают свойства элементов, связанные с CSS. addClass (),
css (),
hasClass (),
removeClass (),
toggleClass () еще
..
Атрибуты Эти методы получают и устанавливают атрибуты DOM элементов. attr (),
html (),
removeAttr (),
опора (),
val (),
подробнее ..
События Эти методы используются для обработки событий DOM или JavaScript. привязка (),
размытие (),
изменять(),
нажмите (),
dblclick (),
фокус (),
keyup (),
keydown (), еще
..
Эффекты Эти методы используются для добавления анимации к элементам. animate (),
fadeIn (),
fadeOut (),
скрыть (),
показать (),
stop (), еще
..
Размеры Эти методы используются для получения и установки размеров CSS для различных свойств. высота (),
ширина (),
innerHeight (),
innerWidth (), еще
..
Формы Эти методы и обработчики событий обрабатывают формы и их различные элементы. размытие (),
изменить (),
val (),
submit (), еще
..
Ajax Эти методы позволяют использовать функции Ajax с jQuery, например. получить (),
getJson (),
post (),
load (), еще
..
Ядро Эти методы являются основными в jQuery API. jQuery (),
holdReady (),
when (), еще
..
Данные Эти методы позволяют нам связывать произвольные данные с конкретными элементами DOM. данных (),
removeData (),
очередь (),
dequeue (),
clearQueue (), еще
..
Разное Эти методы полезны в различных задачах, например: обход элементов, преобразование в массив и т. д. каждый (),
index (),
получить (),
toArray () и еще
..
Коммунальные услуги Служебные методы полезны для получения информации о различных вещах, например, браузер, функция, массив, окно и т. д. inArray (),
isArray (),
isFunction (),
isNumeric (),
isWindow (),
isXmlDoc (), еще
..

5 различных способов объявления функций в jQuery

В этой статье мы исследуем несколько способов определения блока функций JavaScript.

Выбор способа объявления функции JavaScript может сбить с толку новичков, поскольку существует несколько различных вариантов синтаксиса. У каждого есть свои преимущества, недостатки и подходящие способы использования, которые могут вас привлечь.

1. Обычные функции JavaScript

Первый и наиболее очевидный способ объявить функцию в JavaScript - использовать объявление функции .Функция с именем multiply () , которая принимает два параметра x и y , умножает их и возвращает значение, может быть реализована со следующим синтаксисом:

  функция умножить (x, y) {
  вернуть x * y;
}

console.log (умножить (2, 2));

  

Функции, определенные таким образом (объявление функции), поднимаются на на вершину текущей области. console.log () можно поместить перед функцией, и она все равно будет работать.

2. Выражения функций JavaScript

Эту же функцию можно записать как выражение, которое явно устанавливает переменную:

  const multiply = function (x, y) {
  вернуть x * y;
}

console.log (умножить (2, 2));

  

Функция , а не поднят, поэтому ее можно использовать только после того, как она была определена.

3. Определения метода литерала объекта

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

  const mathLib = {

  
  PI: 3,14,

  
  multiply: function (x, y) {
    вернуть x * y;
  },

  
  div: function (x, y) {
    вернуть x / y;
  }

}

console.log (mathLib.multiply (2, 2));

  

Опять же, этот метод объекта можно вызвать только после того, как он был определен.

4. ES2015 Стрелочные функции

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

  const multiply = (x, y) => {return x * y; };

console.log (умножить (2, 2));

  

Поскольку у нас есть только один оператор, возврат является неявным, и скобки могут быть опущены для идентичной функциональности с более коротким синтаксисом:

  const умножить = (x, y) => x * y;
  

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

  const квадрат = x => x ** 2;
  

Хотя скобки по-прежнему необходимы для одного параметра:

  const оценкаPI = () => 22/7;
  

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

5. Функции расширения jQuery

jQuery - это библиотека JavaScript, поэтому создание функций почти такое же. Однако функциональность jQuery можно расширить, добавив свои собственные методы. Метод jQuery.fn.extend () расширяет объект прототипа jQuery ( $ .fn ), поэтому новые функции могут быть связаны с основной функцией jQuery () .

Например, следующий код определяет новую проверку и снимают отметку методы jQuery для изменения полей ввода флажка:

  jQuery.fn.extend ({

  
  check: function () {
    return this.each (function () {
      this.checked = true;
    });
  },

  
  снимите отметку: function () {
    return this.each (function () {
      this.checked = false;
    });
  }

});


$ ("input [type = 'checkbox']") .check ();
  

Сохранение работоспособности

Синтаксис функции часто зависит от личных предпочтений, но постарайтесь сделать так, чтобы ваш код оставался читаемым. Возможно, лучше использовать оператор function , чем через несколько недель запутать себя умной, но нечитаемой мешаниной из стрелок и скобок.

HTML-методы jQuery с примерами

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

.
Метод jQuery Описание
после () Вставить содержимое после выбранных элементов
добавить () Вставляет содержимое в конец выбранных элементов
attr () Устанавливает значения атрибутов или возвращает значения атрибутов выбранных элементов
перед () Вставить содержимое перед выбранными элементами
клон () Клонировать (копировать) выбранные элементы
отсоединить () Удалить выделенные элементы
пустой () Удалить все дочерние узлы и содержимое выбранных элементов
HTML () Устанавливает или возвращает HTML-содержимое (innerHTML) выбранных элементов
вставка После () Вставляет элементы HTML после выбранных элементов
insertBefore () Вставляет элементы HTML перед выбранными элементами
добавить () Вставляет содержимое в начало выбранных элементов
prependTo () Вставляет элементы HTML в начало выбранных элементов
опора () Устанавливает или возвращает свойства CSS для выбранных элементов
удалить () Удалить выделенные элементы
removeAttr () Удалить один или несколько атрибутов из выбранных элементов
removeProp () Удалить свойство из выбранных элементов
replaceAll () Заменяет все выбранные элементы новыми элементами HTML
заменить на () Заменяет выбранные элементы новым содержимым
текст () Задает или возвращает текстовое содержимое выбранных элементов
развернуть () Удалить родительский элемент из выбранных элементов
вал () Устанавливает или возвращает текущее значение выбранных элементов формы
обертка () Обернуть структуру HTML вокруг каждого выбранного элемента
wrapAll () Обернуть структуру HTML вокруг всех выбранных элементов
обертка Внутренняя () Обернуть структуру HTML вокруг содержимого каждого выбранного элемента

Общие сведения о методах jQuery - Введение в jQuery

https: // vimeo.com / 162362464

После того, как вы выбрали элементы в jQuery, вы хотите воплотить их в жизнь, верно ?! Вы сделаете это с помощью методов jQuery. Давайте перейдем к методам с теоретическим подходом. Если до этого курса вы работали только с HTML и CSS, методы - это новая концепция. Однако они напоминают функции JavaScript, рассмотренные ранее в этом курсе.

Вы « вызывает » метода для набора объектов, тем самым применяя действия метода. Вот ваш стандартный формат оператора jQuery:

  1. Выбор элемента преобразован в объект jQuery с помощью $ ()

  2. Период

  3. Имя метода

  4. Круглые скобки, пустые или содержащие параметры

  5. 9047 К настоящему времени у нас нет # 1 и # 2, а # 3 будет предопределенным методом из самого jQuery.Я всегда считал, что параметры, которые вы передаете методу, - одна из самых сложных концепций для обучения программированию. Параметры - это информация, которую вы передаете методу, чтобы он мог выполнять определенные действия. В реальной жизни представьте, что я нанимаю кого-нибудь, чтобы он покрасил мой офис. Я даю им действие - раскрашиваю - но если я не дам больше информации, я не получу желаемого результата. Информация, которую я передаю, будет включать цвет краски, узор, стены, которые нужно красить, и т. Д. Эта информация является эквивалентом параметра в коде.

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

    Вы примените методов в следующей главе! А пока остановимся на самих методах.

    Эффекты

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

    .show () : отображает выбранный элемент (ы).
    .hide () : скрывает выбранные элементы.
    .toggle () : отображает или скрывает элемент (ы) в зависимости от текущего состояния элемента.
    .fadeIn () : исчезает элемент (ы).
    .fadeOut () : исчезает элемент (ы).
    .fadeTo () : переходить элемент (ы) к определенной непрозрачности.
    .slideUp () : скрыть элемент (ы) скользящим движением вверх.
    .slideDown () : скрыть элемент (ы) скользящим движением вниз.
    .slideToggle () : скрыть или показать элемент (ы) скользящим движением в зависимости от текущего состояния элемента.

    Для всех вышеперечисленных элементов вы можете передать несколько необязательных параметров. Обычно продолжительность эффекта передается в миллисекундах. Например, .fadeIn (1000) вызовет постепенное исчезновение элемента в течение 1000 миллисекунд (1 секунда). Чем выше число, тем медленнее эффект. В качестве альтернативы вместо чисел можно передавать строки «быстро» и «медленно» . «медленный» представляет продолжительность 600 миллисекунд, а «быстрый» представляет продолжительность 200 миллисекунд.

    Без каких-либо параметров эффекты проявляются в течение установленной по умолчанию продолжительности 400 миллисекунд.

    Управление содержимым

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

    .html () : заменить содержимое HTML страницы
    .text () : заменить текст страницы
    .replaceWith () : полностью заменить элемент (ы), а не только его текст или HTML
    .remove ( ) : удалить элементы страницы
    .before () : вставить содержимое перед элементом (ами)
    .after () : вставить содержимое после элемента (ов)
    .prepend () : вставить содержимое внутри выбранного элемента (s) (после открывающего HTML-тега)
    .append () : вставить содержимое внутри выбранных элементов (перед закрывающим HTML-тегом)
    .attr () : установить атрибут и его значение или просто получить его атрибут
    .removeAttr () : удалить attribute, RIP
    .addClass () : добавить новый класс к элементу (ам) (без замены его текущих классов)
    .removeClass () : удалить класс из элемента (ов)
    .css () : личное любимое. Получить или установить свойства CSS элемента, даже несколько свойств за раз.

    Обход DOM

    Иногда вам нужно изменить элементы относительно других элементов в DOM. Идентифицируя элементы таким образом, вы можете изменять элементы, которые только внутри других элементов, элементы, которые происходят от других элементов и т. Д. У вас есть несколько доступных методов для этого:

    .find () : find element (s) в пределах текущего выбора, который соответствует параметру
    .parent () : доступ к прямому родительскому элементу (-ам) или родительским элементам if.Родители ()
    .children () : доступ к дочерним элементам элемента (ов)

    Размер и расположение

    Методы jQuery, ориентированные на размер и положение, позволяют настраивать размер и расположение элементов.

    .height () : высота поля без полей, отступов или границ
    .width () : ширина поля без полей, отступов или границ

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

    .innerHeight () : высота, включая отступы
    .innerWidth () : ширина, включая отступы
    .outerHeight () : высота, включая отступы и границу
    .outerWidth () : ширина, включая отступы и границу
    .outerHeight (true) : тот же метод, что и выше, но передача параметра true включает также маржу.
    .outerWidth (true) : тот же метод, что и выше, но передача параметра true включает также маржу.

    Позиционирование элемента может выполняться двумя методами:

    .offset () : установить координаты элемента относительно самого верхнего левого угла объекта документа
    .position () : установить координаты элемента относительно его родительского смещения , полезно для позиционирования элементов в одном элементе DOM. Вы, вероятно, будете использовать .offset больше.

    jQuery .html () clone · GitHub

    jQuery .html () clone · GitHub

    Мгновенно делитесь кодом, заметками и фрагментами.

    jQuery .html () клон

    jQuery .html () клон

    (Надеюсь) идеальный клон метода jQuery .html ()

    Если у него есть аргумент, он установит для innerhtml элемента значение аргумента.

    Если у него нет аргумента, он возвращает innerHTML элемента.

    Он также может быть соединен цепью! ура!

    функция (a, b) {
    возврат
    б == а? // если a не определено
    это.innerHTML // вернуть innerHTML
    : // еще
    (this.innerHTML = a, this) // установить для innerHTML значение a, затем вернуть это (позволяет объединение в цепочку)
    }
    function (a, b) {return b == a? This.innerHTML: (this.innerHTML = a, this)}
    {
    "имя": "jQueryHTML",
    "description": "Клон jQuery.html () метод ",
    "ключевых слов": [
    "jQuery",
    "дом",
    "innerHTML",
    «метод»
    ]
    }
    Foo
    foo
    бар
    <сценарий>
    foo = документ.getElementsByTagName ('i') [0]
    бар = document.getElementsByTagName ('b') [0]
    inp = document.getElementsByTagName ('ввод') [0]
    Element.prototype.html = function (a, b) {return b == a? This.innerHTML: (this.innerHTML = a, this)}
    foo.html («текст изменен!»);
    bar.html («Это будет перезаписано, потому что .html () имеет цепочку!»)
    .html (
    foo.html ()
    )
    Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс. Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

    JavaScript · Bootstrap

    Индивидуальные или составленные

    Плагины

    могут быть включены индивидуально (с использованием отдельных файлов * .js Bootstrap) или все сразу (с использованием bootstrap.js или уменьшенного bootstrap.min.js ).

    Использование скомпилированного JavaScript

    Оба бутстрапа.js и bootstrap.min.js содержат все плагины в одном файле. Включите только один.

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

    Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина). Обратитесь к нашему bower.json , чтобы узнать, какие версии jQuery поддерживаются.

    Атрибуты данных

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

    Тем не менее, в некоторых ситуациях может потребоваться отключить эту функцию. Следовательно, мы также предоставляем возможность отключить API атрибутов данных, отключив все события в документе с пространством имен data-api .Это выглядит так:

      $ (document) .off ('. Data-api')  

    В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api, например:

      $ (документ) .off ('. Alert.data-api')  
    Только один плагин на элемент через атрибуты данных

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

    Программный API

    Мы также считаем, что вы сможете использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую были выполнены действия.

      $ ('. Btn.danger'). Button ('toggle'). AddClass ('fat')  

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

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

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

    Настройки по умолчанию

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

      $ .fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет значение по умолчанию для опции `keyboard` модального плагина на false  

    Нет конфликта

    Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен.Если это произойдет, вы можете вызвать .noConflict для плагина, значение которого вы хотите вернуть.

      var bootstrapButton = $ .fn.button.noConflict () // вернуть $ .fn.button к ранее присвоенному значению
    $ .fn.bootstrapBtn = bootstrapButton // дать $ (). bootstrapBtn функциональность Bootstrap  

    События

    Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени — где инфинитив (напр. show ) запускается в начале события, а его форма причастия прошедшего времени (например, показано ) запускается после завершения действия.

    Начиная с 3.0.0, все события Bootstrap имеют пространство имен.

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

      $ ('# myModal'). On ('show.bs.modal', function (e) {
      if (! data) return e.preventDefault () // останавливает отображение модального окна
    })  

    Дезинфицирующее средство

    Всплывающие подсказки и всплывающие окна используют наше встроенное средство очистки для очистки параметров, которые принимают HTML.ария — [\ w -] * $ / i var DefaultWhitelist = { // Глобальные атрибуты разрешены для любого указанного ниже элемента. ‘*’: [‘класс’, ‘каталог’, ‘идентификатор’, ‘язык’, ‘роль’, ARIA_ATTRIBUTE_PATTERN], a: [‘target’, ‘href’, ‘title’, ‘rel’], площадь: [], b: [], br: [], col: [], код: [], div: [], em: [], час: [], h2: [], h3: [], h4: [], h5: [], h5: [], h6: [], я: [], img: [‘src’, ‘alt’, ‘title’, ‘width’, ‘height’], li: [], ол: [], п: [], pre: [], s: [], небольшой: [], охватывать: [], sub: [], Как дела: [], сильный: [], u: [], ul: [] }

    Если вы хотите добавить новые значения к этому по умолчанию whiteList , вы можете сделать следующее:

      var myDefaultWhiteList = $.data-my-app - [\ w -] + /
    myDefaultWhiteList ['*']. push (myCustomRegex)  

    Если вы хотите обойти наше средство очистки, потому что вы предпочитаете использовать выделенную библиотеку, например DOMPurify, вам следует сделать следующее:

      $ ('# yourTooltip'). Tooltip ({
      sanitizeFn: function (content) {
        вернуть DOMPurify.sanitize (контент)
      }
    })  
    Браузеры без
    document.implementation.createHTMLDocument

    В случае браузеров, которые не поддерживают документ .implementation.createHTMLDocument , как и в Internet Explorer 8, встроенная функция очистки возвращает HTML как есть.

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

    Номера версий

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

      $.fn.tooltip.Constructor.VERSION // => "3.4.1"  

    Нет специальных резервных вариантов при отключенном JavaScript

    Плагины

    Bootstrap не очень изящно отключаются, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте

    Сторонние библиотеки

    Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на .noConflict и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно.

    О переходах

    Для простых эффектов перехода включите transition.js один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минифицированный) bootstrap.js , нет необходимости включать его — он уже есть.

    Что внутри

    Transition.js — это базовый помощник для событий transitionEnd , а также эмулятор перехода CSS.Он используется другими плагинами для проверки поддержки переходов CSS и для обнаружения зависших переходов.

    Отключение переходов

    Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен быть после загрузки transition.js (или bootstrap.js или bootstrap.min.js , в зависимости от обстоятельств):

      $ .support.transition = false  

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

    Несколько открытых модальных окон не поддерживаются

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

    Размещение модальной разметки

    Всегда старайтесь размещать HTML-код модального окна на верхнем уровне в вашем документе, чтобы другие компоненты не влияли на внешний вид и / или функциональность модального окна.

    Из-за того, как HTML5 определяет свою семантику, атрибут autofocus HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный код JavaScript:

      $ ('# myModal'). On ('shown.bs.modal', function () {
      $ ('# myInput'). фокус ()
    })  

    Примеры

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

    Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.

      
    Модальный заголовок

    Одно прекрасное тело & hellip;

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

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

    Текст в модальном окне

    Duis mollis, est nonmodo luctus, nisi erat porttitor ligula.

    Поповер в модальном окне

    Эта кнопка должна вызывать всплывающее окно при нажатии.

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

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


    Переполнение текста для отображения поведения прокрутки

    Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

    Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

    Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

    Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

    Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

    Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

    Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.

    Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

    Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

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

      
    
    
    
    
    Модальный заголовок
    ...
    Сделать модальные окна доступными

    Не забудьте добавить role = "dialog" и aria-labelledby = "..." со ссылкой на модальный заголовок в .modal и role = "document" в .modal- диалог сам.

    Кроме того, вы можете дать описание вашего модального диалога с aria, описанным на .modal .

    Встраивание видео с YouTube

    Встраивание видео YouTube в модальные окна требует дополнительного JavaScript, отсутствующего в Bootstrap, для автоматической остановки воспроизведения и т. Д. См. Этот полезный пост о переполнении стека для получения дополнительной информации.

    Дополнительные размеры

    Модалы

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

    Большой модальный Малый модальный

      
    
    
    
    ...
    ...

    Удалить анимацию

    Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из модальной разметки.

      
    ...

    Использование системы сеток

    Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите .row в .modal-body , а затем используйте обычные классы системы сеток.

    .col-md-4

    .col-md-4 .col-md-offset-4

    .col-md-3 .col-md-offset-3

    .col-md-2 .col-md-offset-4

    .col-md-6 .col-md-offset-3

    Уровень 1: .col-sm-9

    Уровень 2: .col-xs-8 .col-sm-6

    Уровень 2: .col-xs-4 .col-sm-6

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

      
    Модальный заголовок
    .col-md-4
    .col-md-4 .col-md-offset-4
    .col-md-3 .col-md-offset-3
    .col-md-2 .col-md-offset-4
    .col-md-6 .col-md-offset-3
    Уровень 1: .col-sm-9
    Уровень 2: .col-XS-8 .col-sm-6
    Уровень 2: .col-xs-4 .col-sm-6

    У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержанием? Используйте атрибуты event.relatedTarget и HTML data- * (возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о relatedTarget ,

    . Открыть модальное окно для @mdo Открыть модальное окно для @fat Открыть модальное окно для @getbootstrap … еще кнопки …
      
    
    
    ...больше кнопок ...
    
    
    Новое сообщение
    <форма>
      $ ('# exampleModal').on ('show.bs.modal', функция (событие) {
      var button = $ (event.relatedTarget) // Кнопка, запускающая модальное окно
      var recipient = button.data ('Any') // Извлекаем информацию из атрибутов data- *
      // При необходимости вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
      // Обновляем содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
      var modal = $ (это)
      modal.find ('. modal-title'). text ('Новое сообщение' + получателю)
      модальный.find ('. ввод модального тела'). val (получатель)
    })  

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

    Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open к , чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop , чтобы предоставить область щелчка для отклонения показанных модальных окон при щелчке вне модального окна.

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

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

        

    Через JavaScript

    Вызов модального окна с идентификатором myModal с помощью одной строки JavaScript:

      $ ('# myModal'). Modal (параметры)  

    Параметры

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

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

    Этот параметр не рекомендуется, начиная с версии v3.3.0 и был удален в v4. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или структуру привязки данных или вызывать jQuery.load самостоятельно.

    Если предоставлен удаленный URL-адрес, содержимое будет загружено один раз с помощью метода load jQuery и вставлено в div .modal-content . Если вы используете data-api, вы также можете использовать атрибут href для указания удаленного источника. Пример этого показан ниже:

       Нажми меня   

    Методы

    .modal (опции)

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

      $ ('# myModal'). Modal ({
      клавиатура: ложь
    })  
    .modal ('toggle')

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

      $ ('# myModal'). Modal ('toggle')  
    .modal ('показать')

    Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (то есть до того, как произойдет событие shown.bs.modal ).

      $ ('# myModal'). Modal ('показать')  
    .modal ('hide')

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

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

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

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

      $ ('# myModal').модальный ('handleUpdate')  

    События

    Модальный класс

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

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

    ).

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

    Примеры

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

    На панели навигации

    Внутри таблеток

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

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

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

    Примечание. Атрибут data-toggle = "dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

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

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

      
      ...

    Чтобы URL-адреса оставались неизменными с кнопками ссылок, используйте атрибут data-target вместо href = "#" .

        

    Через JavaScript

    Вызов раскрывающихся списков с помощью JavaScript:

      $ ('.dropdown-toggle '). dropdown ()  
    data-toggle = "dropdown" по-прежнему требуется

    Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle = "dropdown" всегда должен присутствовать в элементе триггера раскрывающегося списка.

    Опции

    Нет

    Методы

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

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

    События

    Все выпадающие события запускаются в родительском элементе .dropdown-menu .

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

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

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

    @fat

    Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui.Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you, вероятно, не слышали о них et кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона. Нихил татуировал акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват.

    @mdo

    Скейтборд Veniam marfa с усами, жирная борода с вилами. Freegan борода aliqua cupidatat mcsweeney’s vero.Cupidatat four loko nisi, ea helvetica nulla carles. Татуированный свитер с косби, фургон с едой, винил mcsweeney’s quis non freegan Lo-fi wes anderson +1 портной. Карлес неэстетическое упражнение quis jentrify. Brooklyn adipisicing Craft Beer Vice Keytar deserunt.

    один

    Occaecat Commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore, кофе одного происхождения в magna veniam. Виниловая пластинка High Life, Echo Park Concequat Quis Aliquip Banh Mi Willy.Vero VHS очень популярный. Сумка-мессенджер Consectetur nisi «сделай сам». Cred ex in, прочная сумка на пояс delectus Conctetur для iphone.

    два

    В парке Incididunt Echo, видный мастер Officia deserunt McSweeney очищает thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel Laborum craft beer. Кофе-подорожники одного происхождения irure four loko, cupidatat terry richardson master cleanse. Предположим, вы, вероятно, не слышали о них: поясная сумка для арт-вечеринки, временная реклама татуированного кардигана nulla.Proident wolf nesciunt sartorial keffiyeh eu banh mi устойчивый. Элитный волк сладострастный, lo-fi ea portland, прежде чем они продали четыре локо. Locavore enim nostrud mlkshk brooklyn nesciunt.

    три

    Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui. Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you, вероятно, не слышали о них et кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона.Нихил татуировал акусамус, ирония судьбы, биодизель, кефия, ремесленник, улламко, конскват.

    Keytar twee blog, culpa сумка-мессенджер marfa any delectus food truck. Sapiente synth id предположительно. Locavore sed helvetica cliche ирония, thundercats, о которых вы, вероятно, не слышали, conquat безглютеновый lo-fi fap aliquip. Элитное место работы перед распродажей, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Кардиган крафтовый пивной сейтан готовый велит.VHS chambray labouris tempor veniam. Anim mollit Minimum Commodo Ullamco Thundercats.

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

    Независимо от метода реализации, scrollspy требует использования position: relative; на элементе, за которым вы шпионите. В большинстве случаев это . При прокрутке элементов, отличных от , убедитесь, что для высоты установлено значение и overflow-y: scroll; Подано .

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

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

      body {
      положение: относительное;
    }  
      
      ...
      
      ...
    ...

    Через JavaScript

    После добавления позиция: относительная; в вашем CSS, вызовите scrollspy через JavaScript:

      $ ('body'). Scrollspy ({target: '# navbar-example'})  

    Методы

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

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

      $ ('[data-spy = "scroll"]').each (function () {
      var $ spy = $ (это) .scrollspy ('обновить')
    })  

    Опции

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

    Имя тип по умолчанию описание
    вычет номер 10 пикселей для смещения сверху при вычислении положения прокрутки.

    События

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

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

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

    Необработанный деним Вы, наверное, не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очистки ретро-синтезатора. Усы cliche tempor, williamsburg carles vegan helvetica. Репрезендерит мясник ретро кефиех ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure terry richardson ex squid. Аликвип плац для шалфея cillum iphone. Кардиган Seitan aliquip quis американская одежда, мясник сладострастный nisi qui.

    Food truck fixie locavore, кофейный кальмар одного происхождения accusamus mcsweeney’s marfa nulla. Exercitation +1 labore velit, блог портняжные леггинсы PBR следующего уровня wes anderson artisan four loko-farm to table craft beer twee. Qui photo booth высокой печати, коммодо enim craft пиво млкшк аликвип джинсовые шорты ullamco ad винил cillum PBR. Homo nostrud organic, предположительно, работает эстетическая magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.Vegan fanny pack odio cillum wes anderson 8-битные экологически чистые джинсовые шорты с бородами, этическая вина Терри Ричардсон, биодизель, сделанная своими руками. Art party sceneter stumptown, tumblr butcher vero sint qui sapiente accusamus татуированный эхо-парк.

    Etsy mixtape wayfarers, этичный тофу уэса андерсона до того, как они распродали органический ломо ретро фанни-пакет от mcsweeney в готовом виде. Сумка-мессенджер с татуировкой в ​​виде вилок, крафтовое пиво, iphone skateboard locavore carles etsy salvia banksy с капюшоном helvetica.DIY synth PBR Банки ирония. Поножи джентрификации кальмара 8-битный кредит вилы. Williamsburg banh mi без глютена, карлес вилы биодизель fixie etsy retro mlkshk Vice blog. Вы, наверное, никогда о них не слышали, блог о крафтовом пиве, виниловом пиве, stumptown. Вилы из экологически чистого тофу, синтезатор, шамбре г.

    трастовый фонд seitan высокой печати, keytar raw denim keffiyeh etsy art party перед распродажей свитера master cleanse без глютена с кальмарами.Fanny pack portland seitan DIY, арт-вечеринка locavore волк клише светская жизнь эхо-парк в Остине. Кред винил keffiyeh DIY salvia PBR, banh mi до того, как они распродали свитер VHS с вирусным locavore cosby. Lomo wolf viral, готовые усы thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

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

    Включить вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно):

      $ ('# myTabs a').click (function (e) {
      e.preventDefault ()
      $ (это) .tab ('показать')
    })  

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

      $ ('# myTabs a [href = "# profile"]'). Tab ('show') // Выбрать вкладку по имени
    $ ('# myTabs a: first'). tab ('show') // Выбрать первую вкладку
    $ ('# myTabs a: last'). tab ('show') // Выбрать последнюю вкладку
    $ ('# myTabs li: eq (2) a'). tab ('show') // Выбрать третью вкладку (с индексом 0)  

    Разметка

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

        

    Эффект затухания

    Чтобы вкладки постепенно появлялись, добавьте .fade к каждой .tab-pane . Первая панель вкладок также должна иметь значение в , чтобы исходное содержимое было видимым.

      
    ...
    ...
    ...
    ...

    Методы

    $ (). Вкладка

    Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь цель data-target или href , нацеленную на узел контейнера в DOM. В приведенных выше примерах вкладки — это s с атрибутами data-toggle = "tab" .

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

    Выбирает данную вкладку и показывает связанное с ней содержимое. Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанное с ней содержимое скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (то есть до того, как произойдет событие shown.bs.tab ).

      $ ('# someTab'). Tab ('show')  

    События

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

    1. скрыть.bs.tab (на текущей активной вкладке)
    2. show.bs.tab (на вкладке для показа)
    3. hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab )
    4. shown.bs.tab (на недавно активированной только что показанной вкладке та же самая, что и для события show.bs.tab )

    Если ни одна вкладка еще не была активной, то события hide.bs.tab и hidden.bs.tab запускаться не будут.

    Тип события Описание
    показать.bs.tab Это событие возникает при отображении вкладок, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
    показано на табличке Это событие возникает при отображении вкладок после того, как вкладка была показана.Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
    hide.bs.tab Это событие возникает, когда должна быть показана новая вкладка (и, таким образом, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно.
    скрыто.bs.tab Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для таргетинга на предыдущую активную вкладку и новую активную вкладку соответственно.
      $ ('a [data-toggle = "tab"]'). On ('shown.bs.tab', function (e) {
      e.target // недавно активированная вкладка
      e.relatedTarget // предыдущая активная вкладка
    })  

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

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

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

    Статическая подсказка

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

    Четыре направления

      
    
    
    
    
    
      

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

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

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

    Разметка

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

      
     Наведите указатель мыши на меня 
    
    
    
    Текст всплывающей подсказки!

    Опции

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

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

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

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

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

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

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

    HTML логическое ложь Вставить HTML во всплывающую подсказку.Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки.
    размещение строка | функция ‘верх’

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

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

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

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

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

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

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

    титул строка | функция »

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

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

    триггер строка ‘парящий фокус’ Как запускается всплывающая подсказка — щелкните | парить | фокус | руководство по эксплуатации. Вы можете передать несколько триггеров; разделите их пробелом. ручной нельзя комбинировать с каким-либо другим спусковым крючком.
    область просмотра строка | объект | функция {селектор: ‘тело’, отступ: 0}

    Сохраняет всплывающую подсказку в пределах этого элемента.Пример: viewport: '#viewport' или {"selector": "#viewport", "padding": 0}

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

    продезинфицировать логическое правда Включение или отключение очистки. Если активирован «шаблон» , «содержимое» и «заголовок» параметры будут очищены.
    белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
    sanitizeFn null | функция null Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.

    Методы

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

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

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

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

      $ ('# element'). Tooltip ('show')  
    .подсказка ('скрыть')

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

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

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

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

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

      $ ('# элемент').tooltip ('destroy')  

    События

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

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

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

    Возможность подписки

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

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

      $ (function () {
      $ ('[data-toggle = "popover"]'). popover ()
    })  
    Всплывающие окна в группах кнопок, группах ввода и таблицах требуют специальной настройки

    При использовании всплывающих окон на элементах в пределах .btn-group или .input-group , или на элементах, связанных с таблицами ( , , , < thead> , , ), вам нужно будет указать опцию container: 'body' (задокументировано ниже), чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или теряет закругленные углы при срабатывании всплывающего окна).

    Не пытайтесь отображать всплывающие окна на скрытых элементах

    Вызов $ (...). Popover ('show') , когда целевой элемент - display: none; приведет к неправильному расположению всплывающего окна.

    Для всплывающих окон на отключенных элементах требуются элементы-оболочки

    Чтобы добавить всплывающее окно к элементу disabled или .disabled , поместите элемент внутри

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

    Многострочные ссылки

    Иногда вы хотите добавить всплывающее окно к гиперссылке, которая переносит несколько строк. По умолчанию плагин popover центрирует его по горизонтали и вертикали. Добавьте пробелов: nowrap; к вашим якорям, чтобы избежать этого.

    Примеры

    Статическое всплывающее окно

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

    Топ с открытой спиной

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

    Поповер правый

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

    Поповер снизу

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

    Поповер слева

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

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

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

        
    Четыре направления

    Всплывающее окно справа Поповер сверху Поповер внизу Поповер слева

      
    
    
    
    
    
      
    Закрыть при следующем нажатии

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

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

    Для правильного кроссбраузерного и кросс-платформенного поведения необходимо использовать тег , не тег

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

    Методы

    $ (). Alert ()

    Заставляет предупреждение прослушивать события щелчка на дочерних элементах, которые имеют атрибут data-dismiss = "alert" .(Не требуется при использовании автоматической инициализации data-api.)

    $ (). Alert ('закрыть')

    Закрывает предупреждение, удаляя его из модели DOM. Если в элементе присутствуют классы .fade и .in , предупреждение исчезнет, ​​прежде чем оно будет удалено.

    События

    Плагин предупреждений

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

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

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

    с сохранением состояния

    Добавьте data-loading-text = "Loading ..." , чтобы использовать состояние загрузки для кнопки.

    Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4.

    Состояние загрузки

      
    
    <сценарий>
      $ ('# myButton'). on ('щелчок', function () {
        var $ btn = $ (это) .button ('загрузка')
        // бизнес-логика...
        $ btn.button ('сбросить')
      })
      

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

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

    Предварительно переключенным кнопкам необходимо
    .active и aria -olved = "true"

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

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

        

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

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

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

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

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

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

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

    Методы

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

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

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

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

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

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

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

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

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

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

    Пример

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

    • .свернуть скрывает содержимое
    • . Сворачивание применяется во время переходов
    • .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.

    • Bootply
    • 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 для применения коллапса. Обязательно добавьте к складному элементу свернутый элемент класса . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс в .

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

    Через JavaScript

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

      $ ('.collapse '). collapse ()  

    Параметры

    Параметры можно передавать через атрибуты данных или 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 .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

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

      $ ('. Carousel'). Carousel ()  

    Опции

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

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

    Методы

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

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

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

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

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

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

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

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

    .carousel ('предыдущая')

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

    .carousel ('next')

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

    События

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

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

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

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

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

    ).

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

    Пример

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


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

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

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

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

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

    Вот как работает надстройка аффиксов:

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

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

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

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

      
    ...

    Через JavaScript

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

      $ ('# myAffix').affix ({
      компенсировать: {
        верх: 100,
        bottom: 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 Это событие срабатывает непосредственно перед тем, как элемент будет прикреплен сверху.
    прикрепленный верхний аффикс Это событие вызывается после того, как элемент был прикреплен сверху.
    аффикс-дно аффикс Это событие запускается непосредственно перед прикреплением элемента снизу.
    прикрепленное нижнее крепление Это событие запускается после того, как элемент был прикреплен снизу.

    Повторная реализация методов jQuery в прототипе HTMLElement

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

    Я подумал, что для программистов n00b будет весело и поучительно повторно реализовать эти методы jQuery в прототипе HTMLElement.

    QuerySelector

    Давайте сначала определим ярлык для документа querySelectors. долларов - для одного элемента, а $$ - для всех совпадений.Мы хотим иметь возможность предоставить второй аргумент контекста , например jQuery, который по умолчанию используется для всего документа. Я предполагаю, что ES6 + поддерживает значения по умолчанию в объявлениях функций.

      / **
     * $ для document.querySelector
     * $$ для document.querySelectorall
     * с необязательным контекстом, как jQuery (по умолчанию документ)
     * /
    window. $ = (запрос, ctx = документ) => ctx.querySelector (запрос)
    window. $$ = (запрос, ctx = документ) => ctx.querySelectorAll (запрос)
      
      $ ('h3') // вернет одиночный элемент _ & lt; h3 & gt; _
    $$ ('h3') // вернет массив со всеми элементами _ & lt; h3 & gt; _
      

    Используя аргумент context, мы можем выбрать все элементы

    в другом элементе (

    )

    NodeList итерация

    Согласитесь, jQuery.prototype.each тоже довольно аккуратный. Добавьте свойство каждый к прототипу NodeList и установите значение функции, которая преобразует NodeList в массив , а затем выполняет итерацию, используя предоставленную функцию обратного вызова.

      / **
     * Это позволяет вам "forEach" NodeList, возвращаемый querySelectorAll или $$.
     * аналогично jQuery.prototype.each
     * используйте: $$ ('li'). each (обратный вызов)
     * /
    Object.defineProperty (NodeList.prototype, 'каждый', {
        value: function (fn) {
            вернуть массив.from (это) .forEach ((узел, индекс) => fn (узел, индекс))
        }
    })
      

    Атрибуты

    Другой распространенный метод jQuery - attr . Мы можем использовать attr для чтения и записи атрибутов элементов в DOM с помощью одного метода. Мы добавим в наш метод одну крошечную функцию. Он возвращает все атрибуты, если не указаны аргументы.
    С атрибутом attr также идет removeAttr (удалить атрибут), а имеет для определения существования аргумента.

      / **
     * единственный метод для получения / установки / перечисления атрибутов HTMLElement.
     * получить идентификатор аргумента: $ ('div'). attr ('id')
     * установить идентификатор аргумента: $ ('div'). attr ('id', 'post123')
     * перечислить все аргументы: $ ('div'). attr () // Да ну да
     * /
    HTMLElement.prototype.attr = function (ключ, значение) {
        if (! value) {
            if (! key) {
                вернуть this.attributes
            }
            вернуть this.getAttribute (ключ)
        }
        this.setAttribute (ключ, значение)
        верни это
    }
    
    / **
     * удалить атрибут из HTMLElement по ключу
     * /
    HTMLElement.prototype.removeAttr = function (key) {
        this.removeAttribute (ключ)
        верни это
    }
    
    / **
     * проверить, есть ли у узла DOM определенный атрибут.
     * /
    HTMLElement.prototype.has = function (attribute) {
        вернуть this.hasAttribute (атрибут)
    }
      

    innerText и innerHTML

      / **
     * единственная функция для получения и установки innerHTML
     * получить: $ ('тело'). html ()
     * набор: $ ('body'). html ('

    привет!

    ') * / HTMLElement.prototype.html = function (строка) { если (! строка) верни это.innerHTML this.innerHTML = строка верни это } / ** * единственная функция для получения и установки innerText * получить: $ ('тело'). текст () * набор: $ ('тело'). текст ('привет!') * / HTMLElement.prototype.text = function (строка) { если (! строка) вернуть this.textContent this.innerText = строка верни это }

    Добавить и добавить

    Следующий метод append позволяет вставить элемент HTML в конец указанного целевого элемента.Метод prepend вставит его непосредственно перед.

      / **
     * добавить HTMLElement к другому HTMLElement
     * как jQuery append ()
     * /
    HTMLElement.prototype.append = function (child) {
        if (дочерний экземпляр HTMLElement) {
            this.appendChild (ребенок)
            верни это
        }
        this.append (ребенок)
        верни это
    }
    
    / **
     * добавить HTMLElement к другому HTMLElement
     * как jQuery prepend ()
     * /
    HTMLElement.prototype.prepend = function (sibling) {
        if (родственный экземпляр HTMLElement) {
            это.parentNode.insertBefore (брат, это)
            верни это
        }
        this.parentNode.insertBefore (брат, это)
        верни это
    }
      

    Удаление элементов

    Удаление элемента в JavaScript происходит путем доступа к его родительскому узлу для вызова removeChild (). Да, странно, я знаю.

      HTMLElement.prototype.remove = function () {
        this.parentNode.removeChild (это)
    }
      

    Как вы, наверное, знаете, не может использовать стрелочные функции в jQuery.Однако

      $ ('# foo'). Remove ()
    // или
    $$ ('div'). каждый (элемент => element.remove ())
      

    Родитель

    Получить родителя узла.

      / **
     * получить родительский узел HTMLElement
     * используйте: $ ('h2'). parent ()
     * /
    HTMLElement.prototype.parent = function () {
        вернуть this.parentNode
    }
      

    События

    Современные библиотеки JavaScript реализуют на , на и испускают для получения, установки и отправки событий.

      / **
     * добавить прослушиватель событий в HTMLElement
     * $ (документ) .on ('щелчок', событие => ...)
     * /
    HTMLElement.prototype.on = function (событие, обратный вызов, параметры) {
        this.addEventListener (событие, обратный вызов, параметры)
        верни это
    }
    
    / **
     * удалить прослушиватель событий из HTMLElement
     * $ (документ) .off ('щелчок', обратный вызов)
     * /
    HTMLElement.prototype.off = функция (событие, обратный вызов, параметры) {
        this.removeEventListener (событие, обратный вызов, параметры)
        верни это
    }
    
    / **
     * отправка события на HTMLElement без необходимости создания экземпляра объекта Event.* $ (документ) .emit ('изменить', {foo: 'bar'})
     * /
    HTMLElement.prototype.emit = function (event, args = null) {
        this.dispatchEvent (событие, новое CustomEvent (событие, {detail: args}))
        верни это
    }
      

    DataSet

    И последний, но не менее важный метод для доступа к данным атрибутов .

      / **
     * единственный метод для получения / установки / вывода значений набора данных HTMLElement
     * get: $ ('div'). data ('color') при условии, что 
    * установить: $ ('div').data ('цвет', '# 0099ff') * / HTMLElement.prototype.data = function (ключ, значение) { if (! value) { if (! key) { вернуть this.dataset } вернуть this.dataset [ключ] } this.dataset [ключ] = значение верни это }

    Определять

    Это не связано с jQuery, но все же является хорошим ярлыком.

      / **
     * Удобный ярлык
     * используйте: define ('свойство', {... дескриптор})
     * /
    Object.defineProperty (окно, 'определить', {
        значение: (свойство,...meta) => meta.length == 2? Object.defineProperty (мета [0], свойство, мета [1]): Object.defineProperty (окно, свойство, мета [0]),
        доступный для записи: false,
        перечислимый: истина
    })
      

    Теперь мы можем сделать, например, следующее:

      / **
     * сейчас | одинарный метод доступа, который возвращает текущее время
     * @returns {number}
     * /
    define ('сейчас', {
        получить: Date.now
    })
      

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

      setInterval (() => console.log (сейчас), 10)
    / *
    1543

    5785 1543

    5795 1543

    5805 1543

    5815 1543

    5825 1543

    5835 * /

    Суть

    Для вашего удобства кратко изложу все вышеперечисленное.
    https://gist.github.com/jochemstoel/856d5b2735c53559372eb7b32c44e9a6

    .

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

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