Товаров: 0 (0р.)

Аккордеон js: Меню аккордеон на JS

Содержание

Все вопросы по теме accordion

Я разрабатываю веб-сайт и часть этого — JSP, который принимает данные из базы данных. Эти данные представлены в аккордеоне. Проблема в том, что первое значение повторяется, поэтому вам придется группировать первое значение как кнопку Acblenion, а второе в качестве содержимого. У меня есть JSP, котор….

У меня есть настройка, которая работает аналогично аккордеону, но вертикально. Я хотел бы добавить класс «unset» в класс «Выбор», также при удалении «расширения» и «маленьких» классов. Я отредактировал код jQuery, чтобы включить, чтобы сказать, когда нажат класс Card-Close, выбор удаляет развернуть ….

Это мой компонент Accordion: Я хочу, чтобы вышеуказанный компонент выглядел так: Я хочу сделать эти заголовки (аккордеон 1, аккордеон 2) выровнены в центре. Но я не могу этого сделать.

Пожалуйста, помогите, ниже код из веб-сайта материала-интерфейса: import Accordion from ‘@material-ui/core/Accord….

Итак, у меня есть тема с опцией аккордеона, но аккордеон открывает первый элемент. Я бы хотел, чтобы он был закрыт — я знаю, что он управляется с помощью JS, что не является моей сильной стороной. Я вижу, что JS добавляет в эту область «открытые» и «активные» классы, но я не вижу, как это работает ….

Мне нужна помощь с бутстрап-аккордеоном Я хочу добавить border-bottom-color: red для заголовка элемента div «Collapsible Group Item» , когда он открыт , и удалить его, когда div закрыт Я пытаюсь добавить класс через JQuery, и этот класс будет иметь border-bottom-color: red CSS. но он не работает….

Я пытаюсь сделать многоуровневый аккордеон для навигационного aside на странице и обнаруживаю, что один тип элемента выходит слишком длинным: при изменении background-color при наведении курсора выделенный фон этого расширяется до основной части страницы. Это происходит с элементом типа папки (с д….

У меня есть стандартный аккордеон Bootstrap, и я не хочу, чтобы все карты были закрыты одновременно, у меня их всего две. Прямо сейчас … Если я нажимаю на один, он открывается, а если я снова нажимаю на него, он закрывается. Первая карта начинает открываться, и я хочу, чтобы она автоматически отк….

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

У меня есть аккордеон, созданный с помощью van11y-available-accordion-aria Разметка выводится как: <div className=»c-accordion__items js-accordion accordion» data-accordion-cool-selectors=»1″ aria-multiselectable=»true» role=»tablist» data-hashaccordion-id=»3o3nlqickh»> <!— note. …

Думаю, я смотрел на это СЛИШКОМ долго, а теперь просто хожу по кругу. Проблемы программирования. Мое мобильное меню не открывает никаких аккордеонов; может кто-нибудь указать мне в правильном направлении. Я пробовал заменить JS, переместить JS, порядок перемещения вызываемых файлов и т. Д. ЗАГОЛО….

Прямо сейчас, если вы щелкните, чтобы открыть один раздел, этот JS-аккордеон закроет любой другой открытый раздел. Что мне нужно сделать с этим, чтобы он открывал и закрывал только свой собственный раздел? jQuery(‘.accordion’).each(function () { var accordian = jQuery(….

Мне нужна помощь в исправлении ошибки в моем компоненте аккордеона: В моем примере ниже щелкните Панель 1, чтобы открыть, и еще раз щелкните Панель 1, чтобы закрыть ее.

Затем щелкните по панели 2. Вы увидите, что панели 1 и 2 активизируют класс одновременно, и это неправильно. Активный класс должен….

У меня есть базовый компонент FAQ в React. Моя проблема в том, что когда я открываю элемент аккордеона, я не могу закрыть его снова, когда нажимаю на него. Единственный способ закрыть аккордеон — это щелкнуть другой вопрос. Но я также хочу закрыть его, когда нажимаю на вопрос. Вот мой код: impor….

Итак, у меня есть проблема, которую, я думаю, нужно решить прогулкой в ​​парке. Я использую приведенный ниже фрагмент JS на веб-сайте, который я создаю, и он создает аккордеоны для некоторых элементов HTML …….

Вот фрагмент кода из документации Bootstrap4, которую можно найти по адресу: https://getbootstrap.com/docs /4.0/components/collapse/ <p> <a data-toggle=»collapse» href=»#multiCollapseExample1″ role=»button» aria-expanded=»false» aria-controls=»multiCollapseExample1″>Toggle.

…

Нужна помощь с аккордеоном внизу. Когда вы нажимаете на заголовок, аккордеон опускается вниз, что здорово и хорошо работает. Однако, когда вы нажимаете + / -, аккордеон не раскрывается. …….

У меня есть этот аккордеон в elementor, который заполняет информацию о продуктах Woocommerce: <div role=»tablist»> <div> <h5><a href=»»>Directions</a></h5> <div>Mix the recommended amount of cr….

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

Я пытаюсь заставить мои кнопки-аккордеоны сохранять фиолетовый цвет фона при отображении и возвращаться к белому при закрытии, а также для удаления синей границы выделения после щелчка. Я работаю с boostrap v5. Это тот CSS, который я пробовал, результаты которого показаны на изображениях ниже: ….

У меня есть раздел часто задаваемых вопросов, в котором есть разделы с подпружиненными аккордеонами, все они сделаны с помощью TailwindCSS (т.е. без Javascript). Ссылки внутри открытых разделов не работают (они просто закрывают FAQ, когда вопрос теряет фокус). Кто-нибудь знает, как я могу запустить….

Я пытаюсь сделать свой заголовок / баннер (который в конечном итоге будет введен на главную страницу SharePoint) отзывчивым. У меня есть заданная высота для заголовка, и обычно, если я делаю что-то отзывчивое, я устанавливаю высоту автоматически. Я использую гибкий график для размещения информации ….

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

Я делаю информационный раздел с тремя раскрывающимися вариантами: «Продолжительность курса», «Стоимость» и «Отмена». Смотрите здесь в прямом эфире По какой-то причине чекбоксы можно нажимать только последовательно (т.е. я не могу щелкнуть, чтобы развернуть «Отмена», если я не развернул «Продолжитель….

Я хочу переключаться между аккордеоном и вкладками в зависимости от ширины экрана, используя материальную реализацию UI (MUI). Это возможно? Документация, похоже, не охватывает этот вариант использования, но я думал, что это будет довольно распространено. В настоящее время я делаю это, что очень х….

Я построил несколько аккордеонов рядом друг с другом внутри стола. Идея заключалась в том, чтобы открыть первый аккордеон, чтобы получить новые возможности, и открыть их, чтобы получить информацию внутри. Теперь у меня проблема, что если я открою 2-й аккордеон, аккордеон рядом с ним переместится в ….

Аккордион на JavaScript | Трепачёв Дмитрий

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

Вот образец:

Изучите также верстку, на которой мы будем решать задачу:

<div> <div> <div> <a href="#" >вкладка 1</a> </div> <div> текст вкладки 1 </div> </div> <div> <div> <a href="#" >вкладка 2</a> </div> <div> текст вкладки 2 </div> </div> <div> <div> <a href="#" >вкладка 3</a> </div> <div> текст вкладки 3 </div> </div> </div> #parent { margin: 0 auto; width: 400px; } . tab { margin-bottom: 10px; } .tab .link a { display: block; padding: 10px; color: black; text-decoration: none; text-align: center; background: #f8f8f8; border: 1px solid gray; } .tab .link:hover a { background: #f2f2f2; } .tab:not(.active) .text { display: none; } .tab .text { border: 1px dashed gray; border-top: none; padding: 10px; height: 300px; }

Обсуждение

Технически HTML код аккордеона удобнее, чем код вкладок: в нем ссылки расположены непосредственно над спойлером, который они открывают и закрывают. Кроме того, класс active в нашей верстки дается общему родителю ссылки и спойлера.

Это значит, что при нажатии на ссылку нужно просто деактивировать старую вкладку и активировать новую. Чтобы деактивировать старую вкладку нужно найти вкладку с классом active и удалить из нее этот класс.

Чтобы активировать новую вкладку нужно по клику на ссылку найти вкладку-родителя этой ссылки и дать ей класс active. Технически такой поиск можно сделать так: просто найти ближайшего родителя ссылки, имеющего класс tab.

Скопируйте себе приведенный HTML и CSS коды. Реализуйте аккордеон согласно описанному алгоритму.

Аккордеон jquery · GitHub

Аккордеон jquery · GitHub

Instantly share code, notes, and snippets.

Аккордеон jquery

// Accordeon jquery
$(«.js-faq-title»).on(«click», function(e) { // .on приcоединяет для выбранных элементов функцию обработчика события
e.preventDefault(); // отмена стандартных поведения ссылок
var $this = $(this); // $this — это перменная // this — это ссылка на объект, который был выбран -> («. js-faq-title»)
if (!$this.hasClass(«active»)) {
$(«.js-faq-content»).slideUp(); // .slideUp() плавно скрывает выбранные элементы
$(«.js-faq-title»).removeClass(«active»); // .removeClass() удаляет один или несколько имен классов для выбранных элементов
}
$this.toggleClass(«active»); // .toggleClass() добавляет или удаляет один, или несколько классов каждому выбранному элементу
$this.next().slideToggle(); // .slideToggle() позволяет плавно отобразить или скрыть выбранные элементы скользящим движением
});
// Accordeon Pug
. faq__item
a(href=’#’).faq-title.js-faq-title Question 1 // .js-faq-title для отлавлывания кликов
.faq-content.js-faq-content // .js-faq-content для отлавлывания кликов
p Lorem ipsum dolor sit amet
// Accordeon sass
.js-faq-content
display: none
You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Accordion

13 179 Скрипты / Accordion

Вертикальное accordion меню

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

4 840 Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

4 358 Скрипты / Accordion

Akordeon — плагин аккордеона

Akordeon — jQuery плагин добавляющий на страницу стильно оформленный аккордеон. Полностью настраиваемый с возможностью отображения большого объема информации в ограниченном пространстве.

5 171 Скрипты / Accordion

Аккордеон на CSS3

Типичный аккордеон, но реализованный только с помощью CSS3 свойств.

6 408 Скрипты / Accordion

Спойлер — spoiler

Рассмотрим toggleClass атрибут jquery для создания спойлера или аккордеона.

3 315 Скрипты / Accordion

Гибкий аккордеон

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

4 132 Скрипты / Accordion

Эффект раздвижных шторок

Похоже на аккордеон — при наведении происходит, как бы раздвигание шторок и мы видим полное изображение.

2 112 Скрипты / Accordion

Вертикально-горизонтальный аккордион

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

2 927 Скрипты / Accordion

Горизонтальный аккордион c вкладками

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

2 959 Скрипты / Accordion

Плагин zAccordion — слайдер

Простой плагин zAccordion — слайдер изображений. Замечательно впишется в любой дизайн сайта.

2 346 Скрипты / Accordion

Эффект accordion с вкладками

  Эффект разворачивающейся панели состоящей из вкладок.

JavaScript · Bootstrap

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

Плагины

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

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

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

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

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

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

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

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

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

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

  $ (документ).выкл. ('. 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 предоставляет настраиваемые события для уникальных действий большинства плагинов.Как правило, они бывают в форме причастия прошедшего времени и инфинитива, где инфинитив (например, показывает ) запускается в начале события, а его форма причастия прошедшего времени (например, показано ) запускается после завершения действие.

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

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

  $ ('# myModal').ария - [\ 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: []
}

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

  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 Concectetur 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 Concectetur 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 Concectetur 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'). Модальный (параметры)

Параметры

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

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

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

Если предоставлен удаленный URL-адрес, содержимое будет загружено один раз с помощью метода jQuery load и вставлено в 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 ('скрыть')

Вручную скрывает модальное окно. Возврат к вызывающей стороне до фактического скрытия модального окна (т.е. до того, как произойдет событие 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 запускаются в родительском элементе .dropdown-menu .

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

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

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

@ жир

Рекламные леггинсы 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 минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд 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 DIY Minim. Cred ex in, прочная сумка на пояс delectus Conctetur для iphone.

два

В парке Incididunt Echo, видный мастер Officia deserunt McSweeney очищает thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel Laborum крафтовое пиво. Кофе-подорожники одного происхождения irure four loko, cupidatat terry richardson master cleanse. Предположим, вы, вероятно, не слышали о них: поясная сумка для арт-вечеринки, временная реклама татуированного кардигана NULLProident 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 минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона.Нихил татуировал акусамус, ирония судьбы, биодизель, куфия, ремесленник, улламко, конскват.

Keytar twee blog, сумка-мессенджер culpa marfa any delectus food truck. Sapiente synth id предположительно. Locavore sed helvetica клише ирония, громовые кошки, о которых вы, вероятно, не слышали, консервируют толстовку с капюшоном без глютена lo-fi 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 .

  кузов {
  положение: относительное;
}  
  
  ...
  

    
    
      ...
    

  

  ...

Через 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-битные экологически чистые джинсовые шорты с бородами, этическая вина Терри Ричардсон, биодизель, сделанная своими руками. Художественная вечеринка 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 без глютена, вилы carles biodiesel fixie etsy retro mlkshk Vice blog. Вы, наверное, никогда о них не слышали, блог о крафтовом пиве из виниловых пластинок. Вилы из экологически чистого тофу, синтезатор, шамбре г.

трастовый фонд 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. В приведенных выше примерах вкладки — это с атрибутами 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. Показано .bs.tab (на только что активной только что показанной вкладке та же, что и для события show.bs.tab )

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

Показано
Тип события Описание
show.bs.tab Это событие возникает при отображении вкладки, но до отображения новой вкладки. Используйте event.target и event.relatedTarget для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно.
.bs.tab Это событие запускается при отображении вкладок после того, как вкладка была показана.Используйте 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

продезинфицировать логический правда Включение или отключение очистки. Если активирован «шаблон» , «контент» и «заголовок» параметры будут очищены.
белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
очиститьFn 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 ('уничтожить')

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

  $ ('# элемент').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 .
closed.bs.alert Это событие вызывается, когда предупреждение закрывается (ожидает завершения переходов 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" к кнопке button .

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

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

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

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

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

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

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

  

  <метка>
     Флажок 1 (установлен заранее)
  
  <метка>
     Флажок 2
  
  <метка>
     Флажок 3
  

  
  

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

Методы

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

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

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

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

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

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

  

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

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

Зависимость подключаемого модуля

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

Пример

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

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

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

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

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

  



  

    ...

Пример «Аккордеон»

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

Anim pariatur cliche correhenderit, 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 farm-to-table, необработанный деним, эстетичный синтезатор, который вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

Anim pariatur cliche correhenderit, 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 farm-to-table, необработанный деним, эстетичный синтезатор, который вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

Anim pariatur cliche correhenderit, 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 farm-to-table, необработанный деним, эстетичный синтезатор, который вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

  

  

    
    

      

        Anim pariatur cliche correhenderit, 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 farm-to-table, необработанный деним, эстетичный синтезатор, который вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

    

  

  

    
    

      

        Anim pariatur cliche correhenderit, 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 farm-to-table, необработанный деним, эстетичный синтезатор, который вы, вероятно, не слышали о них, accusamus labore, устойчивые VHS.

    

  

  

    
    

      

        Anim pariatur cliche correhenderit, 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 farm-to-table, необработанный деним, эстетичный синтезатор, который вы, вероятно, не слышали о них, 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 для применения коллапса. Обязательно добавьте к складному элементу класс collapse . Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс в .

Чтобы добавить управление группами в виде гармошки к складному элементу управления, добавьте атрибут данных 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

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

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

Опции

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

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

Методы

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

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

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

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

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

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

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

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

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

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

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

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

События

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

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

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

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

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

).

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

Пример

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

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

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

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

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

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

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

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

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

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

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

  

  ...

Через JavaScript

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

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

18 jQuery Accordions

Коллекция бесплатных вертикальных и горизонтальных примеров и плагинов jQuery Accordion. Обновление коллекции за октябрь 2019 г.6 новинок.

  1. Аккордеоны CSS
  2. Аккордеоны для бутстрапа
  3. Аккордеоны React
  1. Примеры аккордеона jQuery
  2. Плагины jQuery Accordion
Автор
  • Марлон
О коде

Раскрывающийся список / Гармошка

Анимированный аккордеон в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Джон Хаблер
О коде

Аккордеон на заказ для правой руки

Пользовательский аккордеон jQuery с иконическим шрифтом Material Design.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: material-design-iconic-font.css

Автор
  • Джейкоб Коллинз
О коде

Аккордеон jQuery

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Верхняя часть со свитком-гармошкой

Аккордеон с анимацией прокрутки в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

Автор
  • Ахмет Аксунгур
О коде

Аккордеон и схема Google

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

О коде

Стили аккордеона jQuery

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • rajeshdn
О коде

Простой раздвижной аккордеон

Простая вертикально-сдвижная гармошка с маленьким jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Юсуке Сайо
О коде

Слайдер-гармошка

Простой горизонтальный слайдер jQuery-гармошки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • январь
О коде

Изображение Аккордеоны

Демонстрация изображения аккордеонов с использованием swiper.js

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js, swiper.css, swiper.js

Автор
  • Андрей Шарапов
Сделано с
  • HTML (мопс) / CSS (Sass) / JS
О коде

Аккордеон с кнопкой закрытия

Это простой пример того, как вы можете создать гармошку из обычного тега HTML и пары строк jquery.Мы часто прибегаем к использованию сложных шаблонов и написанию длинного кода при создании слайдеров и аккордеонов, совершенно забывая, что есть очень простые способы решения этих проблем. Здесь не нужно хорошо разбираться в коде, чтобы его стилизовать и добавить анимацию.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Халида Астатин
О коде

Аккордеон с тегами dt & dd.

jQuery accordion с использованием списков определений.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js, font-awesome.css

О коде

CSS-анимация для jQuery Accordion

Accordion для метео-приложения в jQuery с CSS-анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js, шрифт-awesome.js

Автор
  • Аня Мельник
О коде

Аккордеонное меню

Гамбургер-слайд-меню аккордеона с jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Давиде Тризолини
О коде

Араи Аккордеон

HTML, CSS и JS аккордеонный UI-компонент для масштабируемых проектов.Дружественный и доступный: совместимость с WAI ARIA 1.1.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Мохаммад Лимон
О коде

Простые вкладки jQuery и аккордеон

Легкий скрипт для активных вкладок jquery и аккордеона в вашей теме.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Тититан Аттакасем
О коде

Ziehharmonika

Легкий плагин jQuery для аккордеона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Харис Хасан Хан
О коде

Простой JQuery Multi Accordion

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js, bootstrap.css

Автор
  • Николас Хоффманн
О коде

Доступная аккордеонная система jQuery

Этот плагин jQuery преобразует простой список hx и div в фантастически блестящую систему аккордеона с использованием ARIA.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор
  • Виктор Фернандес
О коде

Аккордеон jQuery

Адаптивный jQuery-плагин с поддержкой CSS. Jquery Accordion использует переходы CSS для анимации открытия / закрытия с откатом к анимации jQuery, когда переходы CSS не поддерживаются.Чтобы использовать его в вашем проекте, требуется небольшая конфигурация или код.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

51 CSS Accordions

Коллекция бесплатных HTML и CSS Accordion примеров кода: по горизонтали, по вертикали, простые, адаптивные, анимированные и т. Д. . Обновление коллекции за март 2020 года. 14 новых примеров.

  1. Горизонтальные аккордеоны
  2. Вертикальные аккордеоны
  1. CSS Аккордеонные меню
  2. Аккордеоны для бутстрапа
  3. Аккордеоны jQuery
  4. Аккордеоны React
  5. HTML <подробности> и с CSS

Автор
  • Doniyor11
О коде

Адаптивный слайдер-аккордеон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • @keyframers
О коде

Линейная панель навигации только для CSS

Стержневые стержни.Линейная навигация только с помощью CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Мерт Цукурен
О коде

Эффект наведения изображения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Даниэль Субат
О коде

Галерея аккордеонов

CSS-адаптивная галерея аккордеонов с анимацией масштабирования.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Богачев Иван
О коде

Аккордеон на чистом CSS

Горизонтальный аккордеон на чистом CSS с эффектами transform и box-shadow .

Автор
  • Стефан К.
О коде

Галерея изображений аккордеона

CSS Галерея изображений аккордеона . Меньше кода и отличный анимационный эффект.

Автор
  • fox_hover
О коде

CSS3 Слайдер-гармошка с переходами и Flexbox

CSS3 аккордеон с 5 различными эффектами.

Демонстрационное изображение: Расширение горизонтального аккордеона в React

Расширение горизонтального аккордеона в React

Быстрая альтернатива стандартному паттерну «Аккордеон», полностью построенная с помощью React.
Сделано Шоном
7 января 2017 г.

Демо-изображение: Pure CSS Accordion

Pure CSS Accordion

Изображение аккордеона только с CSS и цветными фильтрами с использованием функции rgba ().
Сделано Эдуардо Морено
26 ноября 2016 г.

Автор
  • Майлз Маннерс
О коде

Горизонтальная гармошка

Полная страница горизонтальная гармошка .

Демонстрационное изображение: Адаптивный аккордеон

Адаптивный аккордеон

Адаптивный аккордеон (фоновые изображения).
Сделано Майклом Ферри
1 октября 2015 г.

Демонстрационное изображение: Accordion Navigation

Accordion Navigation

Ни javascript, ни flexbox.
Сделано Оливером Кноблихом
25 августа 2015 г.

Демонстрационное изображение: Flexbox Accordion

Flexbox Accordion

Простой горизонтальный аккордеон flexbox.
Сделано Арьяном Джассалом
28 декабря 2014 г.

О коде

Семантический анимированный аккордеон только для CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Håvard Brynjulfsen
О коде

Аккордеон

Демонстрация того, что можно делать с элементами сведений и сводки.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Яхим Яноусек
О коде

Встроенный элемент сведений HTML, стилизованный с помощью CSS

Реализация компонента, подобного гармошке, с использованием только встроенного HTML-элемента подробностей / сводки и CSS для стилизации.Наилучшие результаты можно увидеть в браузерах на основе Chrome или Blink. Firefox и другие тоже имеют неплохие результаты, но их можно улучшить, создав альтернативные значки открытия / закрытия.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Усман Диалло
О коде

Аккордеон Flexbox

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Билал ПФ
О коде

Аккордеон с чистым CSS и HTML

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Аккордеон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

Автор
  • CodiesBugs
О коде

Аккордеон без использования JavaScript

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Блок Анна
О коде

HTML CSS Accordion без JavaScript / jQuery

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Кодирующий зверь
О коде

Аккордеонное меню только с HTML и CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Bilal.Rizwaan
О коде

Простое меню аккордеона с HTML и CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

О коде

Аккордеонное меню HTML Только CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • раул кумар райдас
О коде

Чистый HTML CSS Аккордеон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Kniw Studio
О коде

Сворачивающийся аккордеон Pure CSS

Этот пример будет свернут без использования какого-либо JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Мерт Цукурен
О коде

Анимированный аккордеон

Анимированный аккордеон с элементами HTML детали .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • ZingGrid
О коде

Аккордеонный контент

Air цитирует сетку режима карты и содержимое аккордеона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: zinggrid.js

Автор
  • Наталья
О коде

Аккордеонные вкладки Pure SCSS

Аккордеонных вкладок без JS. Эти вкладки имеют адаптивный дизайн.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Автор
  • Моника Уилер
О коде

CSS Вертикальный аккордеон

CSS вертикальный аккордеон для часто задаваемых вопросов.

Сделано с
  • HTML / Pug
  • CSS / SCSS
  • JavaScript / Babel (Vue.js)
О коде

Аккордеоны, пожалуйста,

Вертикальный аккордеон с HTML, CSS и JS (Vue.js).

Автор
  • Хорхе Брунетто
О коде

Аккордеон с редактированием ввода

Аккордеон на чистом CSS с редактированием ввода.

Автор
  • Элиор Табека
О коде

Анимированный аккордеон CSS

Анимированный компонент сворачивания / расходования.

Автор
  • Давиде Кантелли
О коде

Аккордеон в Js

Аккордеон на ванильном JS с переходом CSS.

Автор
  • Стелиос Багларидис
О коде

Аккордеон 2.0

Вертикальная гармошка с HTML, CSS и JS.

Автор
  • Льюис Бриффа
Сделано с
  • HTML
  • CSS (Ionicons.css)
  • JavaScript (jQuery.js)
О коде

Аккордеон

Функциональность

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

Автор
  • Кири Эгингтон
Сделано с
  • HTML
  • CSS / SCSS
  • JavaScript (jQuery.js)
О коде

Аккордеон для людей с ограниченными возможностями ARIA

Простой аккордеон, который может использовать как мышь, так и клавиатура.

Автор
  • Кэтрин Като
О коде

FAQ Аккордеон

Minimal FAQ accordion , сделанный с небольшим ванильным JavaScript.

Сделано с
  • HTML
  • CSS / SCSS (Animate.css)
  • JavaScript (jQuery.js)
О коде

Базовый аккордеон

Базовый аккордеон в HTML, CSS и JS.

Демо-изображение: Simple Accordion Concept

Simple Accordion Concept

HTML, CSS и JavaScript простая концепция аккордеона.
Сделано Кайл Брамм
24 марта 2017 г.

Демо-изображение: Funky Pure CSS Accordion

Funky Pure CSS Accordion

Еще одна часть пользовательского интерфейса на чистом CSS, использующая переключатели для активных состояний.
Сделано Джейми Коултером
19 марта 2017 г.

Демо-изображение: CSS Accordion

CSS Accordion

Простое решение для создания аккордеона на чистом CSS с переходом CSS по высоте панели, достигаемое установкой «max-height» панели «аккордеон» вместо «height».
Сделано Мэтью Скоттом
28 октября 2016 г.

Демонстрационное изображение: 3D Accordion

3D Accordion

Простой аккордеон с трехмерным эффектом складывания бумаги в HTML, CSS и JavaScript.
Автор Павел Таргоски
13 июня 2016 г.

Автор
  • Шехаб Эльтавель
Сделано с
  • HTML
  • CSS (Bootstrap.js)
  • JavaScript (jQuery.js, Bootstrap.js)
О коде

Аккордеон Material Design - Bootstrap 3

Коллапс

Bootstrap 3 переработан в соответствии с концепцией Material Design с возможностью добавления значков при отображении / скрытии с плавным переходом путем добавления активного класса в заголовок панели при отображении / скрытии.

Демонстрационное изображение: Flat Accordion

Flat Accordion

Плоский аккордеон в HTML, CSS и JavaScript.
Сделано Суфиан Абид
12 апреля 2016 г.

Демо-изображение: Чистый HTML и CSS Accordion

Чистый HTML и CSS Accordion

Создал и спроектировал (в браузере) расширяемый аккордеон на чистом HTML и CSS для развлечения.
Сделано Крисом Ота
21 января 2016 г.

Демонстрационное изображение: CSS-адаптивный анимированный аккордеон

CSS-отзывчивый анимированный аккордеон

HTML и CSS адаптивный анимированный аккордеон.
Сделано Крисом Райтом
19 января 2016 г.

О коде

Аккордеон на чистом CSS

Версия 2.0: переработан SCSS и плавная анимация. Добавлена ​​вкладка «закрыть» в опции «открыть одну», чтобы закрыть другую вкладку. Acordeon создан только на CSS. На основе ввода флажка + label трюк с активными вкладками.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Демо-изображение: Swanky Little Accordian List

Swanky Little Accordian List

Вот еще одно небольшое создание CSS с использованием уловки «Label for».
Сделано Джейми Коултером
22 февраля 2015 г.

Демо-изображение: Только CSS + HTML Accordion Element

CSS + HTML Only Accordion Element

Прочтите копию в разделах аккордеона, чтобы узнать, как это было сделано.
Сделано Алексом Бергином
18 апреля 2014 г.

Демонстрационное изображение: Адаптивный анимированный аккордеон SCSS

Адаптивный анимированный аккордеон SCSS

Отзывчивый анимированный аккордеон SCSS с некоторым вырезанием фона текста и наложением линейного фона.
Сделано MrPirrera
11 декабря 2014 г.

Bootstrap Accordion - примеры и руководство 

 
          

            

              

                кнопка 
<
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseOne"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseOne"
                >
                  Аккордеонный предмет # 1
                
              
              

                

                  Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry
                  Ричардсон и кальмар.3 волк луна официа аут, скейтборд не купидат
                  поздний завтрак. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор,
                  sunt aliqua положила на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch
                  et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labore Уэс Андерсон Кред Несюнт
                  sapiente ea proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat
                  крафтовое пиво от фермы к столу, из сырого денима эстетичный синтезатор, которого вы, вероятно, не знали
                  слышал о них accusamus labore устойчивые VHS.

              

            

            

              

                кнопка 
<
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseTwo"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseTwo"
                >
                  Аккордеонный предмет # 2
                
              
              

                

                  Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry
                  Ричардсон и кальмар.3 волк луна официа аут, скейтборд не купидат
                  поздний завтрак. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор,
                  sunt aliqua положила на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch
                  et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labore Уэс Андерсон Кред Несюнт
                  sapiente ea proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat
                  крафтовое пиво от фермы к столу, из сырого денима эстетичный синтезатор, которого вы, вероятно, не знали
                  слышал о них accusamus labore устойчивые VHS.

              

            

            

              

                кнопка 
<
                 
                  type = "кнопка"
                  data-mdb-toggle = "свернуть"
                  data-mdb-target = "# flush-collapseThree"
                  ария-расширенный = "ложь"
                  aria-controls = "flush-collapseThree"
                >
                  Аккордеонный предмет # 3
                
              
              

                

                  Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry
                  Ричардсон и кальмар.3 волк луна официа аут, скейтборд не купидат
                  поздний завтрак. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор,
                  sunt aliqua положила на него птицу кальмар кофе одного происхождения nulla acceptnda shoreditch
                  et. Nihil Anim Keffiyeh Helvetica, Craft Beer Labore Уэс Андерсон Кред Несюнт
                  sapiente ea proident. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat
                  крафтовое пиво от фермы к столу, из сырого денима эстетичный синтезатор, которого вы, вероятно, не знали
                  слышал о них accusamus labore устойчивые VHS.

JavaScript Accordion Упражнение по программированию на JavaScript

Я здесь, чтобы помочь вам научиться , достичь своей мечты , приходите присоединяйтесь ко мне в этом удивительном приключении сегодня
Google Developers Expert - GSuite

Предоставление Курсы веб-разработки и стратегии цифрового маркетинга с 2002 года.

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

«У меня есть страсть ко всему, что связано с цифровыми технологиями, мне нравится программировать и решать задачи успешного развития цифровых технологий. Как опытный разработчик, я создал свои первые компьютерные приложения в 1990 году и свой первый веб-сайт в 1998 году. Мне нравится делиться своими знания с другими и хочу помочь вам поделиться чудесными возможностями, которые предоставляет Интернет."

" Обучение, понимание и сильная страсть к образованию. Интернет предоставил нам новые возможности для расширения знаний и обмена ими. ».

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

«Мои курсы разработаны, чтобы помочь вам достичь ваших целей, изучить и обновить навыки»

Предпосылки : опытный разработчик веб-приложений, работавший над несколькими приложениями корпоративного уровня, сотнями веб-сайтов, бизнес-решениями и множеством уникальных и инновационных веб-приложения. Специализация в области разработки веб-приложений включает HTML, CSS, JavaScript, JQuery, Bootstrap, PHP и MySQL . Все, что связано с веб-созданием и цифровым опытом.Увлечен всем, что связано с разработкой веб-приложений , программированием и интернет-маркетингом с упором на социальных сетей и SEO .

" Понимание технологий предоставляет средства для лучшего взаимодействия с пользователями . Оно также открывает множество дверей. Знание - ключ к успеху, и я хочу помочь вам узнать, что могут предложить технологии. Я увлечен веб-технологиями, и с нетерпением жду возможности поделиться с вами своими знаниями и опытом! "

Как создать прогрессивно улучшенный аккордеонный компонент с помощью vanilla JS

Как создать прогрессивно улучшенный аккордеонный компонент с помощью vanilla JS | Иди и сделай вещи Иди и сделай вещи

Я слышу большой энтузиазм по поводу моей серии статей о преобразовании популярных методов и плагинов jQuery в ванильный JS.

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

Давайте копнем.

Детализация

и сводка элементов

Я люблю подробностей и сводных элементов.

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

  <подробности>
 Нажми меня 

 Здравствуйте!

Click Me

О, привет!

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

Open details Элементы имеют атрибут open , и вы можете сделать свой компонент открытым по умолчанию, но жестко закодировав его в HTML.

  <подробности открыты>
 Нажмите, чтобы закрыть 

 Это будет расширено по умолчанию

Нажмите, чтобы закрыть

По умолчанию будет развернуто

Преобразование

деталей и сводки в настоящий аккордеон

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

  <подробности>
 Нажмите на меня, чтобы увидеть больше 

 Привет! 



<подробности>
 Нажми меня, чтобы показать больше, тоже 

 Привет!

Для групп аккордеона довольно часто разрешается открывать только один раздел контента за раз.Открытие раздела аккордеона закрывает все существующие открытые.

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

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

Я записал себя кодирующим этот проект, если вы хотите посмотреть.

Вы можете найти исходный код на GitHub.


🚀 Новое и обновленное! Карманные руководства Vanilla JS были полностью обновлены новыми методами и современными подходами JS.

Нравится? Я отправляю короткие электронные письма каждый будний день с фрагментами кода, инструментами, методами и интересными вещами со всего Интернета. Присоединяйтесь к 12 200+ ежедневным подписчикам.

Сделано с ❤️ в Массачусетсе. Если не указано иное, весь код можно использовать бесплатно в соответствии с Лицензией MIT.Я также очень нерегулярно делюсь мыслями, не связанными с кодированием.

Accordion - CSS скрипт

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

ДемоСкачать

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

ДемоСкачать

Анимированное многоуровневое меню аккордеона, созданное с помощью вложенного списка навигации и ванильного JavaScript.

ДемоСкачать Теги: аккордеонное меню

Минималистичная, чистая, настраиваемая библиотека аккордеона, написанная на ванильном JavaScript.

ДемоСкачать

Очень простая библиотека JavaScript для аккордеона, которая позволяет переключать видимость содержимого блока, щелкая его заголовок.

ДемоСкачать

Простой и удобный компонент-гармошка FAQ, созданный с использованием элементов сводки деталей CSS и HTML.

No related posts.

alexxlab

Народные средства от простуды у детей: 9 эффективных методов лечения

Вязаные спицами рейтузы: теплые и стильные модели для женщин и детей

Применение Темпалгина при беременности: безопасность, риски и альтернативы

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

Развитие ребенка до года: основные этапы и достижения малыша по месяцам

Почему грудничок часто пукает: норма или отклонение — советы педиатров

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

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