Аккордеон jquery: Accordion | jQuery UI
Простой аккордеон для сайта с помощью jQuery
Думаю не раз Вы встречали подобный эффект на сайтах, это весьма удобно, ведь позволяет значительно сэкономить место, при этом не отвлекать посетителя различной информацией, которая ему, возможно, вообще не пригодится. В данном уроке мы рассмотрим как создать достаточно простой эффект аккордеона для сайта, который будет по умолчанию собран и скрыт, но при нажатии он будет раздвигаться и нести посетителю целевую информацию. Такие спойлеры будут удобны на сайтах, где много текстовой информации и по умолчанию она должна быть невидимой.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
У нас будет четыре блока, каждый из которых стилизован заголовком и плюсом, который информирует о том, что у нас скрыта некая информация, при нажатии курсором, меню будет разворачиваться, при это активное окно будет подсвечиваться, и так, давайте приступим.
Шаг 1. HTML
Разметка будет проста, у нас будет общий параметр контейнера, в котором будет содержаться вся наша разметка, для демонстрации мы устанавливаем заголовок нашей аккордеона:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div> <h3>Заголовок</h3> <div> <a href=»#»> Текст <i></i> </a> <div> <p>Текст</p> </div> </div> <div> <a href=»#»> заголовок <i></i> </a> <div> <p> Текст.</p> </div> </div> <div> <a href=»#»> Заголовок <i></i> </a> </div> |
Затем у нас будет класс set который будет обозначать наш один подвид контейнера, в него мы погружаем класс content в котором будет содержаться все описание в аккордеоне.
Шаг 2. CSS
Теперь все это нам необходимо стилизовать, для этого нам понадобиться несколько достаточно простых правил, в которых мы изначально стилизуем контейнер-
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | .accordion-container{ position: relative; width: 500px; height: auto; margin: 20px auto; } .accordion-container > h3{ text-align: center; color: #fff; padding-bottom: 5px; margin-bottom: 30px; border-bottom: 1px solid #ddd; } .set{ position: relative; width: 100%; height: auto; background-color: #f5f5f5; } .set > a{ display: block; padding: 10px 15px; text-decoration: none; color: #555; font-weight: 600; border-bottom: 1px solid #ddd; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; transition:all 0.2s linear; } .set > a i{ position:relative; float: right; margin-top:4px; color: #666; } .set > a.active{ background-color:#3399cc; color: #fff; } .set > a.active i{ color: #fff; } .content{ position:relative; width: 100%; height: auto; background-color: #fff; border-bottom: 1px solid #ddd; display:none; } .content p{ padding: 10px 15px; margin: 0; color: #333; } |
Затем мы стилизуем сам блок, иконки и содержание нашего аккордеона, обратите внимание, что для класса set у нас будет использоваться активное и пассивное состояние, это позволит нам выделять выбранный нами пункт.
Шаг 3. JS
Теперь всю нашу задумку необходимо оживить, для этого мы используем несколько строчек скрипта, с помощью которых мы обеспечим работоспособность активных и пассивных вкладок, а также добавим иконку «плюс» и «минус»:
$(document).ready(function(){ $(«.set > a»).on(«click», function(){ if($(this).hasClass(‘active’)){ $(this).removeClass(«active»); $(this).siblings(‘.content’).slideUp(200); $(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»); }else{ $(«.set > a i»).removeClass(«fa-minus»).addClass(«fa-plus»); $(this).find(«i»).removeClass(«fa-plus»).addClass(«fa-minus»); $(«.set > a»).removeClass(«active»); $(this).addClass(«active»); $(‘.content’).slideUp(200); $(this).siblings(‘.content’).slideDown(200); } }); }); |
В результате мы получаем замечательный аккордеон, который легко внедрить на сайт и достаточно просто изменить под свой дизайн сайта.
Вот и все. Готово!
Читайте также:
Автор admin На чтение 10 мин.
Вертикальное меню, сделанное в стиле аккордеон с несколькими уровнями подменю. В состав использования входит jQuery и подключение шрифта Font Awesome. Он служит набором иконок, которые присутствуют в меню для визуального оформления. Аккордеон меню выполнено в плоском дизайне в пяти различных цветах. В верхнюю область меню так же возможно добавить поисковую строку, как фильтр для категорий.
Шаг 1-й. Разметка HTML
Обычная разметка с древовидным построением и с наличием тега для вывода иконок. Стоит обратить внимание лишь на один класс во второй строчке кода, класс green (зеленый). Именно этот класс определяет каким цветом будет меню. Чтобы изменить цвет достаточно, к примеру, указать класс red (красный), вместо зеленого. Всего цветов пять: blue (синий), green (зеленый), red (красный), white (белый), black (черный).
Шаг 2-й. Стили оформления CSS
Стилизация всех основный деталей, включая и самого меню.
Шаг 3-й. jQuery
На третьем шаге подключаем скрипты и библиотеку jQuery. Последний скрипт добавит в меню поисковую строку, она служит как фильтр разделов. Если она вам не нужна, то просто удалите этот скрипт из подключения.
All the Free jQuery Plugins about ‘Accordion menu’ are listed here.
A really small jQuery navigation plugin that makes it easier to generate a multi-level, accordion-style, expanding/collapsing menu from nested HTML elements.
A minimal clean semantic sidebar accordion menu for documentation websites or reading web applications. Built with jQuery, CSS, and nested HTML lists.
A responsive, semantic, SEO-friendly, multi-level, accordion-style sidebar (dropdown) navigation system written in jQuery, CSS and HTML unordered list.
Mobile-friendly Navigation Plugin With jQuery — Ace Responsive MenuA lightweight, flexible, cross-browser, multi-level, mobile-friendly jQuery responsive menu plugin for your modern web project.
VerticalMenu is a small jQuery script to create a responsive vertical accordion navigation where the menu item will be expanded to the fullscreen when clicked/tapped.
metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.
json2menu is a jQuery plugin that dynamically renders a multi-level accordion menu using JSON, AJAX, and HTML unordered list.
A fancy jQuery & CSS powered hamburger navigation that reveals a vertical accordion menu sliding from the edge of the screen when activated.
Mobile Accordion Menu With jQuery And CSS3
A mobile-friendly hamburger toggle navigation built using jQuery/CSS that will slide in a multi-level, accordion-style expanding menu when toggled.
An easy jQuery plugin to create a multi-level and fully responsive accordion menu (dropdown list) from any nested Html elements.
collapsible is a jQuery plugin used to create a vertical collapsible or accordion menu that allows the visitor to open multiple (or single) menu items at the same time.
edlcCollapsibleNav is a jQuery/jQuery UI widget which allows you to create a vertical, accordion-style tree / navigation menu with CSS3 powered smooth expand/collapse animations.
A simple and tiny jQuery plugin that helps you create a modern, mobile-friendly, off-canvas, sidebar accordion menu for your cross-platform webpages.
crbnMenu is a lightweight jQuery plugin for creating an accordion-style collapsible sidebar navigation with sub menus on your webpage.
Auroramenu is a super light jQuery plugin used for creating a vertical accordion menu from html unordered lists that has the ability to persist the open/close states using cookies.
Lightweight jQuery Accordion Plugin With Smooth Animations — Woco Accordion
A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.
eosMenu helps you create a responsive, multi-level, accordion-style menu where all the menu items will be collapsed into a dropdown toggle menu on small screens.
Nav Accordion is a jQuery plugin that lets you generate a vertical, multilevel, collapsible accordion menu from a nested unordered list for your site navigation.
lazeemenu is a dead simple jQuery plugin used for generating a multi-level, vertical accordion menu from nested html lists.
A cool, themeable, retina-ready, jQuery based accordion menu that opens with an awesome 3D flipping effect using several CSS3 properties.
Pretty Accordion Menu with jQuery and CSS3 — MenuToggle
MenuToggle is a simple jQuery based vertical accordion menu that uses CSS3 transition for smooth toggle slide animations.
A nice, modern jQuery accordion plugin which gives you the ability to create a touch-enabled multilevel accordion menu with CSS3 powered expand / collapse animations.
vmenu is a accordion menu plugin for jQuery/Zepto that generates a vertical, multi-level, expanding/collapsing navigation menu from nested Html lists.
A jQuery & jQuery UI based accordion image menu that allows to smoothly expand & collapse images on mouse hover.
jQuery Plugin For Accordion Style Responsive Select Menu
A small (2kb) jQuery plugin that transforms a select list into a modern, smooth and fully responsive accordion menu for easier access.
Creating an accordion-style dropdown menu using jQuery and CSS3 transitions & transforms.
A jQuery plugin for creating a Bootstrap style vertical nav menu which allows you to expand/collapse menu categories with smooth slide effects.
Nxeed Tree Menu is a simple jQuery plugin to create an accordion-style vertical tree menu that is collapsible and expandable with smooth sliding effects.
mtree.js is a jQuery plugin that enables you to create an animated vertical accordion menu based on jQuery velocity.js and CSS3 transitions.
A small jQuery plugin for creating a vertical collapsible menu that allows to expand and collapse sub-menus with multiple transitions.
A nice-looking and animated animated accordion menu built on top of Font Awesome, CSS3 and a little jQuery script.
rocker is a jQuery plugin for creating a responsive, mobile-friendly multi-column navigation menu sliding from the bottom of the web page.
Slight Submenu is a jQuery accordion menu plugin that allows to expand/collapse sub menus with smooth transitions by using mouse events (click or mouse hover.)
Quiccordion is a simple and fast jQuery plugin for creating recursive accordion menus with smooth sliding effects.
jQuery accordion image menu plugin allows you to create a Accordion-Style menu with image backgrounds.
acxmenu is a lightweight, cross-browser, and search engine friendly jQuery plugin that allows you to create multilevel accordion menu with animated open and close actions.
accordionMenu is a lightweight and easy-to-use jQuery that enables you to quickly create accordion Menus with smooth collapse and expand effects on your web page.
A jQuery Menu plugin that allows you to create a fancy accordion menu using jQuery.
Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu W >
Плагин
Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.
Ещё огромный плюс плагина — это простота установки. Всего лишь нужно его скачать, затем установить, после плагин создаст виджет, который Вам просто нужно будет добавить в сайдбар Вашего блога.
Ну а теперь давайте перейдём к процессу установки и настройки плагина.
Установка плагина
Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.
Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.
На рисунке выше я подчеркнул название самого виджета.
После Вам всего лишь понадобится перетащить его в сайдбар, который находится сплава, в нужно Вам место.
Настройки плагина
После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.
Важный момент: рубрики и подрубрики.
Если на Вашем блоге есть подрубрики к рубрикам, Вам нужно создать произвольное меню. Это нужно для того, чтобы плагин меню корректно их отображал и вообще работал.
Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.
Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.
Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.
После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.
Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.
19 Jquery аккордеонов и экспандеров для сайта
1. javascript плагин аккордеон «TinyAccordion»
Отображение информации с эффектом аккордеона. Поддержка нескольких уровней.
2. jQuery плагин «Easy Expand»
Плагин для реализации раскрывающейся области. Контент появляется при нажатии на ссылку.
3. Красивый слайдер-аккордеон на jQuery
4. jQuery плагин аккордеон «Jaws»
Плагин для реализации блока последних новостей с эффектом аккордеона и постраничным разбиением.
5. CSS jQuery аккордеон
Аккуратный аккордеон с использованием jQuery.
6. jQuery плагин «liteAccordion»
Создание слайдеров изображений в стиле горизонтального аккордеона. Три различных варианта плагина можете посмотреть на демонстрационной странице.
7. jQuery плагин «Fade and slide»
Легкий плагин для отображения/скрывания информации в блоке.
8. jQuery слайдер-аккордеон
Аккуратный jQuery слайдер в стиле аккордеон. Есть возможность установить автоматическую смену слайдов и время показа для каждого слайда.
9. «Toggle Effect»
Плагин работает в двух вариантах: при нажатии либо наведении курсора мыши на ссылку, появляется скрытый контент.
10. Вертикальный аккордеон на jQuery
Блок разъезжается при нажатии на него мышкой. При этом блоки можно прокручивать либо с помощью колеса мыши, либо при помощи стрелок вверх/вниз. На странице с демонстрацией представлено 5 вариантов исполнения.
11. jQuery аккордеон
12. Вертикальный аккордеон на jQuery
Раскрывающаяся область.
13. Горизонтальный и вертикальный javascript аккордеон «Aga»
Плагин для отображения контента и изображений с эффектом аккордеона.
14. Сетка-аккордеон
Вы, наверное, встречались с реализацией меню в виде аккордеона. Когда меню подобно аккордеону растягивается либо вертикально, либо горизонтально. Я предлагаю вам посмотреть расширенную реализацию этой техники, которая представляет собой сетку. При нажатии на какую-нибудь клетку, её границы разъезжаются по горизонтали и вертикали для отображения полного содержимого клетки
15. Динамическая реализация страницы FAQ (вопрос-ответ)
На странице отображается список вопросов. У каждого вопроса имеется кнопка «ответ», по нажатию на которую выплывает ответ на интересующий вопрос. Внешний вид можно отредактировать в файле style.css
16. Вертикальный jQuery аккордеон «Flexible Slide-to-top Accordion»
Область с контентом раскрывается при нажатии на ссылку. Плагин выполнен в двух вариантах: в одном случае раскрыть можно все блоки контента одновременно, во втором — при отркытии какого-либо одного блога сварачивается тот, что был развернут перед этим.
17. jQuery плагин «Facets»
Плагин в стиле аккордеон для реализации необычной навигации на сайте. Для того чтобы посмотреть плагин в действии в различном исполнении, пройдитесь по ссылкам Demo1 — Demo4 на демонстрационной странице.
18. jQuery вкладки-аккордеон
Нет возможности поставить прямую ссылку, поэтому ссылка «Скачать» ведет на страницу, с которой вы сможете загрузить скрипт.
19. JQuery аккордеон
jQuery плагин для аккордеона с 7 примерами
Плагин аккордеона в jQuery UIПлагин аккордеона от jQuery UI похож на плагин вкладок, который позволяет сворачивать информационные разделы на вашей веб-странице. Плагин аккордеона особенно полезен, если у вас есть длинная информация, которую можно разделить на разные разделы на веб-странице. Аккордеон помогает уменьшить необходимое пространство, которое в противном случае будет занято.
Создание аккордеона с помощью плагина jQuery — это просто вопрос включения библиотеки jQuery UI и вызова аккордеона в разделе JavaScript, где он связан с таким элементом, как div, абзац и т. Д.который будет действовать как аккордеон.
В этом руководстве я также рассмотрю различные варианты, предоставляемые подключаемым модулем jQuery UI accordion. Для различных вариантов также приведены примеры, которые можно увидеть в Интернете вместе с демонстрационным кодом.
Базовый пример использования jQuery accordionВ этом примере я создам базовый аккордеон с тремя секциями. Хотя вы можете использовать свой собственный стиль, чтобы согласовать аккордеон с остальной темой сайта. В этом примере я буду использовать CSS по умолчанию, просто чтобы показать, как выглядит аккордеон.
См. Онлайн-демонстрацию и кодПрежде всего, вам необходимо подключить библиотеку jQuery. Далее следует библиотека пользовательского интерфейса jQuery. Хотя мы включили все как использование CDN, вы можете создать свой собственный облегченный файл jQuery UI JS на основе необходимого компонента.
В этом случае, поскольку требуется только виджет аккордеона, поэтому вы можете создать индивидуальную загрузку, если вам не нужен какой-либо другой компонент, здесь: http://jqueryui.com/download/
Главный аккордеон создается с помощью тега div.Вы можете размещать произвольные теги в разделе заголовка, где в примере используются теги
. Например, вы можете использовать там
h2, h3 или даже тег span, однако убедитесь, что каждая панель является следующим родственником после соответствующего заголовка.1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 22 | заголовок 1Это раздел 1.Разместите здесь свой контент в абзацах или используйте элементы div и т. Д. header 2Это секстенция 2. Вы также можете включать такие изображения: заголовок 3Это раздел 3. Содержимое может включать список также.
|
Раздел скрипта просто вызывает div с аккордеоном:
$ («#jQuery_accordion»).аккордеон (); |
В следующем примере виджета «аккордеон» jQuery UI я собираюсь создать опцию сворачиваемой панели содержимого. Это означает, что в отличие от приведенного выше примера, где должна быть открыта одна панель содержимого. Используя опцию сворачивания как true , вы можете открывать и закрывать панель, щелкая по ней. При этом все панели тоже могут быть закрыты.
Просто добавьте эту строку в раздел сценария к первому примеру:
или посмотрите пример в действии, щелкнув ссылку ниже:
См. Онлайн-демонстрацию и код Код jQuery:
CSS для этого аккордеона:
.ui-accordion .ui-accordion-header { display: block; курсор: указатель; позиция: относительная; поле: 2px 0 0 0; заполнение: .5em .5em .5em.7em; мин-высота: 0; / * поддержка: IE7 * / font-size: 100%; граница: сплошная 1px # FDF8E4; фон: # 846733; цвет: #fff; } |
Цветовая схема по умолчанию плагина jQuery UI для Accordion — сероватого цвета. Однако для своих веб-проектов вы захотите сопоставить его с остальной темой сайта. В этом примере я покажу вам, как изменить стиль, цвет, фон, текст в аккордеоне с помощью классов / идентификаторов внутри веб-страницы.
Вы можете просто использовать классы CSS-аккордеона jQuery-UI и переопределить их в соответствии с вашей темой. Кроме того, вы также можете добавить стиль / свойства.
Классы, необходимые для изменения заголовков и содержимого:
.ui-accordion .ui-accordion-header ui-accordion .ui-accordion-content |
Кроме того, сюда входят классы, связанные со значком, используемым с заголовками (если вы этого хотите).Это:
ui-accordion .ui-accordion-icons ui-accordion .ui-accordion-icons .ui-accordion-icons ui-accordion .ui-accordion-header .ui-accordion-header- значок |
Вместо включения всего файла CSS вы можете просто извлечь эти классы для использования виджета «аккордеон» jQuery .Вы также можете изменить их, переопределив стиль по умолчанию.
В следующем примере я создал аккордеон с тремя панелями содержимого с настроенным CSS. Вот как это выглядит вместе с кодом:
См. Онлайн-демонстрацию и код CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 22 23 24 25 26 27 28 29 30 34 35 | .ui-accordion .ui-accordion-header { display: block; курсор: указатель; позиция: относительная; поле: 2px 0 0 0; заполнение: .5em .5em .5em .7em; мин-высота: 0; / * поддержка: IE7 * / font-size: 100%; граница: сплошная 1px # FDF8E4; фон: # 846733; цвет: #fff; радиус границы: 10 пикселей; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { позиция: абсолютная; осталось: .5em; верх: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; переполнение: авто; фон: # FDF8E4; граница: сплошной черный 1 пиксель; верхняя граница: 0; радиус границы: 8 пикселей; ширина: 93%; поле слева: 10 пикселей; } |
Наценка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 22 23 24 25 | заголовок 1Это раздел 1.Разместите здесь свой контент в абзацах или используйте элементы div и т. Д. header 2Это секстион 2. Вы также можете включать изображения header 3Это раздел 3. Содержимое может включать список тоже.
|
jQuery
Вы можете видеть, что аккордеон использует цвет фона с border-radius для заголовков, в то время как панели содержимого также используют более светлый фон с рамкой, кроме верхней границы; все указанные в конкретных классах CSS. Аккордеон с опцией анимации, пример
В этом примере я буду использовать опцию анимации в аккордеоне jQuery.Параметр анимации указывает, как панель содержимого должна открываться или закрываться. Вы можете определить продолжительность, а также стиль замедления для анимации. См. Следующие примеры использования параметра анимации с разной динамикой и продолжительностью.
См. Онлайн-демонстрацию и код Код jQuery для этой демонстрации:
В этом примере я использовал опцию анимации с типом замедления easyInOutBounce . Простая анимация аккордеона Значение InOutQuad
В следующем примере аккордеона я буду использовать значение easyInOutQuad для ослабления. В этом примере я использовал тег для заголовков с подчеркиванием, а не тег h4.
См. Онлайн-демонстрацию и кодЧтобы увидеть полный список доступных значений замедления, перейдите по этой ссылке: http://api.jqueryui.com/easings/
Пример аккордеона с продолжительностью в анимацииВ следующем примере используется опция анимации со значением длительности 1500 миллисекунд. Это заставит панели содержимого открываться в указанное время с анимацией.
См. Онлайн-демонстрацию и код Пример сортируемого аккордеонаПри использовании аккордеона на разных сайтах вы могли заметить, что панели содержимого можно сортировать.Например, панели на панели управления веб-сайта, которые вы можете настроить в соответствии с предпочтениями. В следующий раз, когда вы войдете в систему, вы увидите те же настройки, что и в прошлый раз. Разрешить пользователям сортировать панели содержимого или переупорядочивать их по своему вкусу гораздо проще с помощью аккордеона jQuery UI.
В следующем примере показано, как создать гармошку с помощью виджета, содержащего три панели, которые можно переставлять.
См. Онлайн-демонстрацию и код Код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 |
Гармошка тоже остается разборной.
Вы также можете настроить значки в разделе заголовков панелей содержимого в подключаемом модуле jQuery UI. Вам нужно использовать классы значков. Хотя классы по умолчанию предоставляются. Если вы включаете файл CSS jQuery-UI, вы также можете создавать собственные классы CSS с фоновым изображением.
В следующем примере я создал аккордеон jQuery UI с настраиваемыми классами значков.Один класс используется для активной панели, панель содержимого которой открывается. Другой — для закрытых панелей со значком большего размера. Посмотрите пример в Интернете, щелкнув демонстрационную ссылку или изображение ниже:
См. Онлайн-демонстрацию и код Код jQuery:
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 22 23 24 25 26 27 28 29 30 34 35 36 37 38 39 40 41 42 43 44 45 | .ui-accordion .ui-accordion-header { display: block; курсор: указатель; позиция: относительная; поле: 5px 0 0 0; заполнение: .5em .5em .5em .7em; мин-высота: 0; / * поддержка: IE7 * / font-size: 100%; фон: # FDF8E4; цвет: # 846733; граница: сплошная 1px # 846733; радиус границы: 7 пикселей; } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { позиция: абсолютная; осталось: .5em; верх: 50%; margin-top: -8px; } .ui-icon.PanelOpenicon { padding-left: 2em; фон: url (‘jquery.jpg’) без повтора; размер фона: 15 пикселей; ширина: 20 пикселей; высота: 20 пикселей; } .ui-icon.PanelClosedicon { padding-left: 2em; фон: url (‘jquery.jpg ‘) no-repeat -5px; размер фона: 30 пикселей; ширина: 20 пикселей; высота: 20 пикселей; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; верхняя граница: 0; переполнение: авто; фон: # FFFF84; } |
Наценка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 | заголовок 1Содержание панели 1 — пример значка. заголовок 2Содержание панели 2 — пример значка. заголовок 3Содержание панели 3 — пример значка. |
Посмотрите живую демонстрацию, щелкнув приведенные выше ссылки.
Accordions — демонстрационные версии jQuery Mobile
Аккордеон создается в jQuery Mobile путем группирования серии отдельных сворачиваемых элементов в набор.
Разметка
Сворачиваемые наборы начинаются с той же разметки, что и отдельные сворачиваемые наборы, у которых есть заголовок, за которым следует сворачиваемое содержимое. При добавлении родительской оболочки с атрибутом data-role = "collapsible-set" к сворачиваемым элементам они будут визуально сгруппированы и будут вести себя как гармошка, поэтому одновременно может быть открыта только одна секция.
Раздел 1
Я сворачиваемый контент для раздела 1
Раздел 2
Я сворачиваемый контент для раздела 2
Раздел 3
Я сворачиваемый контент для раздела 3
Врезка по сравнению с полной шириной
Для полноразмерных складных элементов без стилизации углов добавьте в набор атрибут data-inset = "false" .Это делает складной набор больше похожим на расширяемый список.
Планеты
- Земля
- Юпитер
- Марс
- Меркурий
Мини
Для более компактной версии, полезной в ограниченном пространстве, добавьте в набор атрибут data-mini = "true" .
Я мини разборный
Подходит для ограниченного пространства.
Я еще один мини
Вот несколько сворачиваемых материалов.
Последний
Последний бит сворачиваемого содержимого.
Иконки
Значки по умолчанию сворачиваемых заголовков можно переопределить с помощью атрибутов data-collapsed-icon и data-extended-icon , либо на уровне сворачиваемого набора , либо на любом из его сворачиваемых элементов по отдельности.
Набор иконок на набор
Укажите значки открытия и закрытия набора, чтобы применить его ко всем складным элементам внутри.
Набор иконок на набор
Этот складной тоже получает иконку из набора.
Набор иконок на складной
Значки здесь применяются именно к этому складному элементу, таким образом отменяя установленные значки.
Положение значка
Позиционирование значков по умолчанию для сворачиваемых заголовков можно изменить с помощью атрибута data-iconpos либо на уровне сворачиваемого набора , либо на любом из его сворачиваемых заголовков по отдельности.
Правый
Наследует расположение значков из атрибута data-iconpos = "right" в наборе.
слева
Установить через data-iconpos = "left" атрибут на сворачиваемой
низ
Установить через data-iconpos = "bottom" атрибут на сворачиваемой
Верх
Установить через data-iconpos = "top" атрибут на разборной
Уголки
Добавьте атрибут data-corners = "false" , чтобы получить складной набор-вставку без закругленных углов.
Раздел 1
Сворачиваемое содержимое
Раздел 2
Сворачиваемое содержимое
Раздел 3
Сворачиваемое содержимое
Тема
Добавьте атрибут темы данных в набор, чтобы установить цвет каждого сворачиваемого заголовка в наборе. Добавьте атрибут data-content-theme , чтобы указать цвет сворачиваемого содержимого.
1 - Тема A
Тема контента A
2 - Тема A
Тема контента A
Чтобы отдельные разделы в группе были стилизованы по-разному, добавьте атрибуты data-theme и data-content-theme к конкретным сворачиваемым элементам.
Заголовок секции, образец B
Сворачиваемое содержимое, образец "b"
Заголовок секции, образец A
Сворачиваемое содержимое, образец "а"
Заголовок секции, образец E
Сворачиваемое содержимое, образец "d"
jQuery Accordion
jQuery AccordionОтсутствует адаптивный плагин аккордеона на базе CSS (резервный jQuery).
Форк на Github Пожертвовать через PaypalАккордеонная группа
(одиночный открытый) Аккордеон 1 Предмет 2-го уровня ItemHoodie ennui эстетика Godard, художественная вечеринка любого трастового фонда с татуировкой медленного карбюратора kogi из кофейного банджо одного происхождения. Поздний завтрак с объемной сумкой-тоут с глубоким v-образным вырезом, изысканный стиль одежды из Вильямсбурга в стиле ручной работы вискокурни. Усы блог путников Карлеса, корма, биодизеля, мясника, уличного искусства. Хэштег мелкие партии биттеров глубокого v без глютена.Блог мясника по семиотике, палео-асимметричный мопс нарвала из селважа Вилы Ремесленник Уэс Андерсон посадил на него птицу, пьющую уксус. Artisan McSweeney's Shoreditch, wolf yr Marfa street art locavore крафтовое пиво, эстетика джентрификации 90-х. Yr hella fingerstache, Echo Park VHS +1 церковный ключ XOXO Vice selvage гастропаб готовые буквально путники. 2-й уровень ItemItem3rd Level 3-й уровень ItemItemItem Аккордеон 2
Accordion Group
(многократное открытие) Аккордеон 1 Предмет 2-го уровня ItemHoodie ennui эстетика Godard, художественная вечеринка любого трастового фонда с татуировкой медленного карбюратора kogi из кофейного банджо одного происхождения.Поздний завтрак с объемной сумкой-тоут с глубоким v-образным вырезом, изысканный стиль одежды из Вильямсбурга в стиле ручной работы вискокурни. Усы блог путников Карлеса, корма, биодизеля, мясника, уличного искусства. Хэштег мелкие партии биттеров глубокого v без глютена. Блог мясника по семиотике, палео-асимметричный мопс нарвала из селважа Вилы Ремесленник Уэс Андерсон посадил на него птицу, пьющую уксус. Artisan McSweeney's Shoreditch, wolf yr Marfa street art locavore крафтовое пиво, эстетика джентрификации 90-х. Yr hella fingerstache, Echo Park VHS +1 церковный ключ XOXO Vice selvage гастропаб, готовые буквально путники.ItemItemItemItem 2-й уровень ItemItem3rd Level 3-й уровень ItemItemItem Аккордеон 2
Одиночный аккордеон
(easyInOutQuad, продолжительность 600 мс) Одиночный аккордеон
Опции
| переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
| скорость перехода | 300 | внутренний | Скорость перехода в миллисекундах. |
| переходник | легкость | строка | Значение CSS для ослабления |
| Элемент управления | '[data-control]' | строка | Селектор CSS для элемента, действующего как кнопка внутри аккордеонов. |
| contentElement | '[содержимое-данные]' | строка | Селектор CSS для элемента, содержащего скрытый / отображаемый контент. |
| группа Элемент | '[данные-аккордеон-группа]' | строка | Селектор CSS для родительского элемента, содержащего группу аккордеонов. |
| одиночный Открыть | правда | логическое | Открывает один аккордеон за раз. Если false, несколько аккордеонов могут быть открыты одновременно. |
По умолчанию
© 2014 Виктор Фернандес / @vctrfrnndz / email / donateПерейдите к локальной ссылке в jQuery Accordion
Эта функция, скорее всего, будет использоваться веб-службами, однако она открыта для использования владельцами страниц, если вы знакомы с некоторыми базовыми знаниями HTML.Если вам удобно просматривать HTML-код своей страницы в поисках нужных имён классов или атрибутов id, то у вас не должно возникнуть проблем с этой функцией.
Эта функция позволяет пользователям создавать локальную ссылку, ссылку, которая ведет к части содержимого на текущей странице, которая находится внутри аккордеона, будь то встроенный аккордеон jquery (синий аккордеон) ИЛИ аккордеон абзаца. Обычно локальная ссылка будет иметь хеш-значение в конце URL-адреса, например: www.csn.edu/benefits-retirnement#my-content.Эта ссылка обычно ссылается на элемент со значением атрибута id "my-content", которое является частью URL-адреса, идущей непосредственно после знака решетки / решетки.
Однако со свернутыми аккордеонами вы не можете просто прокрутить до содержимого, потому что аккордеон скрывает его. Вот здесь и вступает в игру этот маленький драгоценный камень. Теперь вы можете вложить несколько селекторов элементов, чтобы щелчки происходили по всем, кроме последнего. Эти щелчки используются для открытия аккордеонов до последнего элемента. Достигнув последнего элемента, страница будет прокручиваться к элементу, как это сделала бы стандартная локальная ссылка.
Есть два немного разных способа использовать это; с атрибутами id элементов и / или с именами классов элементов.
Использование атрибутов идентификатора
Вот пример того, как должна выглядеть локальная ссылка для одиночного аккордеона, содержащего целевой элемент с идентификатором «my-content»:
https://www.csn.edu/benefits-retirement # ui-accordion-jquery-ui-filter-header-2 # my-content
. Обратите внимание на двойные хеш-значения.Первое хеш-значение - это идентификатор элемента заголовка аккордеона (тот, который требует щелчка), показанного на изображении ниже:
Второе значение хеш-функции - это идентификатор элемента в содержимом аккордеона, к которому нужно прокрутить. В этом примере, когда пользователь щелкает указанную выше локальную ссылку (двойное значение хэша), система находит первый элемент, щелкает по нему, что приводит к открытию аккордеина, а затем по второму и последнему элементу система прокручивает его на странице. .
Использование селекторов имен классов:
Вы также можете использовать селекторы классов для выбора элементов с атрибутами id, автоматически созданными системой, такими как заголовки аккордеонов и панели содержимого.Например, когда аккордеоны добавляются, удаляются или переупорядочиваются, атрибуты id могут изменяться в зависимости от порядка элементов аккордеона. Чтобы приспособиться к этому, мы можем использовать имена классов, например:
https://www.csn.edu/benefits-retirement#.ui-accordion-header[1 provided#my-content
Обратите внимание на селектор после первого (#) хэша ".ui-accordion-header [1]". Это типичный селектор имени класса с предшествующей ему точкой (указывающий системе на поиск имени класса, а не идентификатора), но он также имеет селектор индекса [1], который сообщает системе: «Выбрать первый элемент с именем класса 'ui-accordion-header' ".Если бы вместо этого использовалась цифра «3», она бы «выбрала третий элемент с именем класса 'ui-accordion-header'».
В этом случае элемент найден, автоматически щелкнул, чтобы открыть его, затем он переходит к следующему хешу селектора и повторяется, пока не найдет последний селектор. Это можно делать столько раз, сколько необходимо, чтобы открыть нужный контейнер. Последнее значение хеш-функции должно быть значением атрибута id, чтобы работала стандартная функция прокрутки локальной ссылки.
Обратите внимание, что если точка для селектора имени класса НЕ используется, значение рассматривается как идентификатор элемента, который нужно найти.
jq-аккордеон - npm
Это ответвление jQuery Accordion.
Адаптивный плагин jQuery для аккордеона с поддержкой CSS.
JQuery Accordion использует переходы CSS для анимации открытия / закрытия с откатом к анимации jQuery, когда переходы CSS не поддерживаются. Чтобы использовать его в своем проекте, требуется небольшая конфигурация или код. Попробуйте демо.
Поддерживает IE9 + и современные браузеры.
Разработано Виктором Фернандесом. Под лицензией MIT.
Установка
bower install jq-accordion - сохранить
// или
npm установить jq-accordion --save
Использование
- Включить jQuery:
- Включить код плагина:
- Вызов плагина:
$ ('.аккордеон '). аккордеон ({
"transitionSpeed": 400
});
Опции
| Имя | По умолчанию | Тип | Описание |
|---|---|---|---|
| скорость перехода | 300 | внутренний | Скорость перехода в миллисекундах. |
| переходник | «легкость» | строка | CSS-значение для упрощения. |
| Элемент управления | '[data-control]' | строка | Селектор CSS для элемента, действующего как кнопка. |
| contentElement | '[data-content]' | строка | Селектор CSS для элемента, содержащего скрытый / отображаемый контент. |
| группа Элемент | '[данные-аккордеон-групп]' | строка | Селектор CSS для родительского элемента, содержащего группу. |
| одиночный Открыть | правда | логическое | Открывает один аккордеон за раз. |
События
accordion.open срабатывает при открытии любого аккордеона
accordion.close срабатывает, когда любой аккордеон закрывается
accordion.toggle переключает открытие / закрытие аккордеона при срабатывании на элементе управления. Это не сработает, если затронет более одного аккордеона, когда включен singleOpen .
Структура образца
Для простого аккордеона / раскрывающегося списка используйте следующую структуру / атрибуты данных:
Control
Row
Row
Ряд
Для группы аккордеонов вы можете использовать атрибут data-accordion-group для родителя, это позволит вам активировать / деактивировать поведение одиночного открытия, установив для singleOpen значение true / false.
Control
Строка
Ряд
Ряд
Control
Row
Row
Row
Запуск в открытом состоянии
Для инициализации аккордеона в открытом состоянии просто добавьте класс .откройте в свой элемент аккордеона.
Control
Ряд
Ряд
Ряд
Вклад
Проверить ДОПОЛНИТЕЛЬНО.md для получения дополнительной информации.
Лицензия
Лицензия MIT © Nay Zaw Oo
Пример складного аккордеона JQuery | Мобискролл
Используйте складные элементы и гармошку, чтобы создавать индивидуальные панели, группы и карточки, которые можно складывать одну за другой или поочередно закрывать и открывать. Используйте его для сегментирования длинных форм и контента или для постепенного раскрытия информации.
Разборные и аккордеонные демонстрации доступны для других фреймворков.
Просмотр демонстраций и кода для
Просмотрите различные компоненты и демонстрации ЗакрыватьДемонстрация складной панели JQuery. Используйте его для сегментирования длинных форм, делая группы полей расширяемыми / сворачиваемыми. Для jQuery или jQuery Mobile.
Демонстрация JQuery Accordion с одной открытой / расширенной панелью.Используйте это, чтобы пользователи могли сосредоточиться на одном фрагменте контента за раз. Для jQuery или jQuery Mobile.
Пример складных карточек JQuery. Используйте его, чтобы показать / скрыть содержимое карты. Развернуть и свернуть при щелчке по заголовку карточки. Для jQuery или jQuery Mobile.
Ищете что-то, чего не видели, или у вас есть вопрос о продаже?
Спросите нас об этом, мы здесь, чтобы помочь.
Настройте и попробуйте демонстрации локально
Войдите или начните пользоваться бесплатной пробной версией
Какой фреймворк вы используете?
Javascript
jQuery
AngularJS
Угловой
Реагировать
Другое
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Настройте и попробуйте демонстрации локально
Как бы вы хотели это сделать?
Установите демо в свое приложение
Следуйте этому быстрому двухминутному руководству по установке
Закрыть окно
Спасибо за скачивание
Попробуйте и настройте приложение локально
Распакуйте zip-файл и запустите проект, как любое приложение Ionic.Убедитесь, что у вас установлен Ionic CLI, и откройте терминал в корневой папке приложения.
Шаг 1. Запуск в корневой папке $ npm установить Шаг 2. Запустите приложение. $ ионная подача Сообщите нам, если мы сможем помочь и получить удовольствие!
Спасибо за скачивание
Локальная настройка демонстраций
Все настроено так, что можно сразу окунуться и начать исследовать.
Извлеките zip-файл и просто откройте демонстрационные версии в своем любимом браузере. Инструкции по установке Mobiscroll в вашем проекте следуйте этому руководству.
Сообщите нам, если мы можем помочь и получить удовольствие! 👍
Спасибо за скачивание
Локальная настройка демонстраций
Извлеките zip-файл и запустите проект, как любое приложение Angular CLI.Убедитесь, что у вас установлен Angular CLI.
Для установки и использования распакуйте zip-файл, откройте окно терминала и выполните следующие действия.
Шаг 1. Запуск в корневой папке $ npm установить Шаг 2. Запустите приложение. $ нг порция - открыть Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
Спасибо за скачивание
Локальная настройка демонстраций
Все настроено так, что можно сразу окунуться и начать исследовать.
Мы установили пробную версию, чтобы вы могли опробовать демонстрационные версии локально.
Самый простой способ начать - следовать инструкциям по установке и получение кода прямо с демонстрационной страницы. Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
В zip-файле вы найдете полнофункциональное приложение Kitchen-Wink Ionic.
Спасибо за скачивание
Локальная настройка демонстраций
В демонстрациях используется встроенный в браузер Babel преобразователь ES6 и JSX.
Извлеките zip-файл и откройте демонстрационные версии в своем браузере.
Инструкции по установке Mobiscroll в вашем проекте.
следуйте этому руководству.
Сообщите нам, если мы можем помочь и получить удовольствие!
Настройте и попробуйте эту демонстрацию локально
Войдите или начните пользоваться бесплатной пробной версией
Изменить пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Изменить пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Ваш пароль изменен!
45+ Подключаемый модуль jQuery Accordion Menu с примерами Демонстрация
Анимированная страница отзывов, созданная с помощью GSAP TweenMax, которая поможет вам произвести впечатление на ваших клиентов.
Foldable - это полный стек jQuery Accordion на базе CSS3.
Отзывчивый и готовый к работе с устройствами, с множеством опций для настройки, которые легко могут быть частью ваших проектов.
Полностью анимированные действия открытия-закрытия с использованием встроенных анимаций CSS3 с умным автоматическим откатом к анимации jQuery для старых браузеров
Панель навыков - это современный способ выставить рейтинг, например, если вы хотите сравнить мобильные телефоны с точки зрения производительности, а затем навыков Панель является одним из лучших вариантов для отображения рейтинга производительности перед пользователем. Есть несколько способов использовать эту панель навыков современного метода оценки.В этом уроке мы покажем вам, как создать анимированную панель навыков с помощью jQuery, HTML и CSS. Вам также может понравиться анимированная полоса прогресса с помощью jquery.
В этой статье объясняется, как создавать вертикальные навигационные меню без jquery или javascript. Да, мы собираемся создавать вертикальные меню только с помощью CSS. Меню навигации на веб-сайте играет важную роль в удобстве использования и удобстве использования веб-сайта. Без меню навигация по сайту похожа на контент, но бесполезна.
Сегодняшний ресурс представляет собой удобное аккордеонное меню с поддержкой групп / подпунктов.Он работает только с CSS, используя селектор псевдокласса : checked на элементах ввода флажков. Однако мы также включили версию с jQuery на тот случай, если вы предпочитаете тонкую анимацию по сравнению с мгновенным эффектом по умолчанию.
Простой, удобный и легкий плагин jQuery для аккордеона с плавной анимацией на основе переходов CSS3. Он основан на плагине Minimal Accordion / Drawer с jQuery и CSS3, разработанном alxndrwcz.
«Адаптивный аккордеон» - это компонент, готовый к использованию на мобильных и настольных устройствах.Это жидкий компонент, который прост в использовании. Он предоставляет различные скины, опции и функции для организации данных.
