Список раскрывающийся jquery: javascript — Раскрывающийся список jquery

Содержание

Фильтр выпадающего списка сайта на jQuery

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

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

Как создать фильтр выпадающего списка сайта на jQuery. Инструкция.

Для начала загрузите и включите файлы плагина jQuery Hierarchy Select в свой проект Bootstrap:

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

<span>Выпадающий список</span>

</button>

<div>

</div>

<a href=»#»>Все категории</a>

</li>

<a href=»#»>Шаблоны</a>

</li>

<a href=»#»>Уроки</a>

</li>

<a href=»#»>Плагины</a>

</li>

<a href=»#»>Хостинг</a>

</li>

<a href=»#»>Халява</a>

</li>

</ul>

</div>

</div>

Вызовите функцию hierarchySelect для верхнего элемента:

$(‘#demo’).hierarchySelect();

По умолчанию плагин имеет следующие опции:

$(‘#demo’).hierarchySelect({

// ширина/высота

width: ‘auto’,

height: ‘208px’,

// включить иерархический выбор

hierarchy: false,

// включить поиск

search: false

});

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

Вот и все. Готово!

JQuery EasyUI Form — Создать окно дерево раскрывающийся (ComboTree)

Дерево выпадающий (ComboTree) является выпадающий ниже дерева (Tree) с (ComboBox). Она может выступать в качестве использования поля формы, он может быть представлен на удаленный сервер.

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

Создание формы (форма)

	<Div ID = "DLG" класс = "easyui-диалог" стиль = "ширина: 500px; высота: 250px; обивка: 10px 30px;"
			название = кнопки = "DLG-кнопки #" "Регистрация">
		<h3> Информация об учетной записи </ h3>
		<Форма ID = "ФФ" метод = "пост">
			<Таблица>
				<Tr>
					<Td> Имя: </ TD>
					<TD> <входной тип = "текст" имя = "имя" стиль = "ширина: 350 пикселей;" /> </ TD>
				</ TR>
				<Tr>
					<Td> Адрес: </ TD>
					<TD> <входной тип = "текст" название = "адрес" стиль = "ширина: 350 пикселей;" /> </ TD>
				</ TR>
				<Tr>
					<Td> Город: </ TD>
					<TD> <выберите класс = "easyui-combotree" URL = "Данные / city_data.json" имя = "Город" стиль = "ширина: 156px;" /> </ TD>
				</ TR>
			</ Table>
		</ Форма>
	</ Div>
	<DIV ID = "DLG-кнопки">
		<a href="#" iconCls="icon-ok"> Отправить </a>
		<a href="#" iconCls="icon-cancel"> Отмена </a>
	</ Div>

Вы можете видеть из приведенного выше кода, мы называли «город» дерево выпадающий (ComboTree) создать поле атрибута URL-адрес, это поле можно извлечь данные дерева (дерево) с удаленного сервера. Обратите внимание, что это поле имеет стиль под названием «easyui-combotree ‘, так что нам не нужно писать код JS дерева выпадающего списка (ComboTree) поля автоматически отображается.

Скачать примеры Jquery EasyUI

jeasyui-form-form2.zip

Переход при выборе пункта из выпадающего списка

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

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

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

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.

Далее вставляем сам код выпадающего списка.

<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>

Имя формы (<form name=»имя_формы»>) и имя списка (<form name=»имя_списка» … >) указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):

onChange=»имя_функции(document.имя_формы.имя_списка)»

В нашем случае onChange=»linklist(document.menu.sel)»

Если прописать тэгу элемента (<option>)списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).

В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).

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

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

А в коде списка меняем событие OnChange на OnClick

<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form>

Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.

И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».

20 лучших jQuery плагинов фильтра и сортировки

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

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

1. Shuffle

Shuffle.js – это плагин jQuery для сортировки, фильтрации и размещения группы элементов. ОН быстродействующий, отзывчивый и быстрый. Ссылка

к содержанию ↑

2. Sortable

jQuery Sortable – гибкий, удобный сортировочный плагин. Он позволяет сортировать элементы списка (или таблицы и т. Д.) По горизонтали и вертикали с помощью мыши. Поддерживает вложенные списки и чистые контейнеры перетаскивания. jQuery Sortable не зависит от jQuery UI и хорошо работает с Twitter Bootstrap (вы даже можете сортировать навигацию Bootstrap). Ссылка

к содержанию ↑

3. HTML5 Sortable

HTML5 Sortable – это плагин jQuery для создания сортируемых списков и сеток с использованием встроенного API перетаскивания HTML5. Ссылка

к содержанию ↑

4. jQuery DataTables

jQuery DataTables – мощный плагин, который может сортировать, разбивать на страницы и фильтровать миллионы записей. Ссылка

к содержанию ↑

5. jPList

jPList – гибкий плагин jQuery для сортировки, разбивки на страницы и фильтрации любой HTML-структуры. Поддерживаются источники данных: PHP + MySQL, ASP.NET + Sql Server, PHP + SQLite. Он работает с такими шаблонами JavaScript, как Handlebars, Mustache и т. Д. JPList поддерживает XML + XSLT. Работает во всех основных браузерах. Для некоммерческих, личных или открытых проектов и приложений вы можете использовать jPList бесплатно в соответствии с условиями лицензии GPL V3. Ссылка

к содержанию ↑

6. Mixitup

MixItUp – это плагин jQuery, обеспечивающий анимированную фильтрацию и сортировку. Он отлично подходит для управления любым категоризованным или упорядоченным контентом, таким как портфолио, галереи и блоги, но также может служить мощным инструментом для привлечения пользовательского интерфейса приложения и визуализации данных. MixItUp прекрасно работает с вашими существующими HTML и CSS, что делает его отличным выбором для адаптивных макетов. В отличии от подобного рода плагинов (isotope и т.п) данный плагин решает проблему динамической высоты. Если вдруг блок у Вас планирует сменить высоту, то обязательно используйте данный плагин. Ссылка

к содержанию ↑

7. Tiny Sort

TinySort – это небольшой скрипт, который сортирует HTMLElements. Он сортируется по значению текста или атрибута или по одному из его потомков. Приведенные примеры должны помочь вам в этом. Ссылка

к содержанию ↑

8. List.js

List.js – это легкий кросс-браузерный собственный JavaScript, который делает ваши простые списки HTML очень гибкими, доступными для поиска, сортируемыми и фильтруемыми. Также есть возможность добавлять, редактировать и удалять элементы с помощью простых шаблонов. Ссылка

к содержанию ↑

9. JTPS

jTPS – это подключаемый к данным плагин jQuery, который предлагает нумерацию страниц, анимированную прокрутку страниц и интеллектуальную возможность естественной сортировки. Версия для разработки в настоящее время 15 КБ. Ссылка

к содержанию ↑

10. Columns

Столбцы – это простой способ создания данных JSON в HTML-таблицах с возможностью сортировки, поиска и разбивки на страницы. Все, что вам нужно, это предоставить данные, а Columns сделает все остальное. Ссылка

к содержанию ↑

11. Quicksand

Quicksand – это плагин jQuery для переупорядочивания и фильтрации элементов с хорошей анимацией тасования. Ссылка

к содержанию ↑

12. Stupid Table

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

к содержанию ↑

13. Pour Over

PourOver – это библиотека для простой, быстрой фильтрации и сортировки больших коллекций – например, 100 000 единиц – в браузере. Он позволяет создавать приложения и архивы для исследования данных со скоростью 60 кадров в секунду, которые не должны ждать вызова базы данных для отображения результатов запроса. Ссылка

к содержанию ↑

14. jQuery Sortable Lists

jQuery Sortable Lists позволяет сортировать html-списки, а также создавать древовидные структуры путем перетаскивания мышью с плавным движением, функции обратного вызова isAllowed или экспорта и многое другое. Ссылка

к содержанию ↑

15. jQuery Sort and Order Portfolio

Плагин jQuery Sort and Order Portfolio имеет ряд функций, таких как расширяемый фильтр и кнопки заказа, настройка анимации, управляемой css3, постепенное ухудшение качества, опциональный обратный порядок, вы можете установить, поддерживает ли кнопка заказа поддержку или нет, и многое другое. Ссылка

к содержанию ↑

16. Isotope

Isotope – это изысканный плагин jQuery для магических макетов. Вы можете выявить и скрыть элементы с помощью фильтрации и переупорядочить элементы с помощью сортировки. Синтаксис очень прост, но макеты могут быть действительно динамичными и интеллектуальными. А также, прогрессивно улучшен для CSS3 преобразований и переходов. Ссылка

к содержанию ↑

17. Dynatable

Dynatable – это динамичный, семантический интерактивный плагин для таблиц, использующий jQuery, HTML5 и JSON. И это не только для таблиц. Dynatable предоставляет платформу для реализации наиболее распространенных элементов из коробки, включая сортировку, поиск и фильтрацию. Прежде всего, Dynatable – это чистый и элегантный API, который интересно использовать. Ссылка

к содержанию ↑

18. Bootstrap Dropdown

Bootstrap Dropdown Filter – это элемент управления для jPList, библиотеки с открытым исходным кодом для сортировки, фильтрации и разбиения на страницы. Он позволяет фильтровать любую структуру HTML (DIVs, UL / LI, таблицы и т. Д.) По заданному пути jQuery и использует стандартный раскрывающийся компонент Bootstrap для макета. Ссылка

к содержанию ↑

19. Table Sorter

Tablesorter – это плагин jQuery для преобразования стандартной таблицы HTML с тегами THEAD и TBODY в сортируемую таблицу без обновления страницы. Tablesorter может успешно анализировать и сортировать многие типы данных, включая связанные данные в ячейке. Ссылка

к содержанию ↑

20. WaTable

Швейцарский плагин jQuery для таблиц с фильтром, форматированием, разбивкой на страницы и сортировкой данных с легкостью и скоростью. Ссылка

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

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

13 jQuery SelectBox / Drop-down Plugins — SitePoint

Эта популярная статья была обновлена 12 октября 2016 года, чтобы отразить текущее состояние плагинов выбора / раскрывающегося списка.

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

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

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

Выбрано

Chosen — это расширенный плагин, который не только изменяет стиль выбранных элементов, но и предоставляет дополнительные функции, такие как поиск при выборе, выбор нескольких элементов и выделение.

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

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

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

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

Веб-сайт / GitHub

Выбрать2

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

Как и другие расширенные плагины выбора, он включает в себя целую кучу настраиваемых функций, таких как:

Элемент одиночного выбора / элемент с optgroups
Элемент с множественным выбором
Сортируемое / фильтруемое поле поиска для выбранных элементов
Возможность загрузки данных из удаленного источника данных (например.g из API для динамического изменения параметров)
Поддержка тегов (выбор из предопределенного списка / добавление динамических тегов на лету)

Select2 находится в разработке с 2012 года. Разработчики перешли с версии 3 на версию 4 и в процессе переписали плагин, чтобы сделать его более быстрым, отзывчивым и мобильным. Страница GitHub для Select2 впечатляет, поскольку группа старается улучшать плагин с каждым выпуском.

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

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

Веб-сайт / Демоверсии / Github

jQuery Nice Select

Этот плагин представляет собой облегченную библиотеку замены выбора. jQuery Nice Select заменяет стандартные элементы собственного выбора на измененные раскрывающиеся меню.

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

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

Веб-сайт и демонстрации / Github

Выбрать

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

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

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

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

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

Веб-сайт и демонстрации / GitHub

Поле со списком изображений

Image Combo Box — это простой плагин, который позволяет вам определять изображение и описание для каждого параметра в выбранных элементах управления.В основном он используется для демонстрации связанного изображения для каждого варианта, поэтому он полезен, когда вы хотите отобразить визуальное представление для каждого варианта.

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

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

Если ваша основная цель — сделать так, чтобы вы могли отображать изображения и / или описания с раскрывающимися элементами, то этот плагин стоит посмотреть.

Веб-сайт / Демо / Github

Плагин DropDown с возможностью поиска jQuery

Плагин Searchable DropDown — один из старых плагинов, которые вы можете найти в Интернете.Создан еще в 2012 году (и недавно не обновлялся). Его цель — преобразовать ваши основные выбранные элементы в единый список с возможностью поиска.

У этого плагина нет веб-сайта, но он живет на SourceForge. Здесь не так много документации, кроме одной демонстрационной страницы, демонстрирующей, как это работает.

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

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

Веб-сайт / Демо

Поле со списком с множественным выбором

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

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

На страницах Demo и GitHub описывается, как вы можете это настроить, и, поскольку есть несколько вариантов управления, кривая обучения довольно мелкая.

Веб-сайт / Демо / GitHub

jQuery Selectbox

jQuery Selectbox — один из старых плагинов для замены. Однако, в отличие от других плагинов, которые добавляют кучу функциональности, этот плагин в основном нацелен на изменение стиля ваших элементов управления и оставить функциональность практически нетронутой.

jQuery Selectbox имеет несколько полезных опций, которыми вы можете управлять, а также все стандартные события, которые вы ожидаете, такие как открытие, закрытие, выбор опций и т. Д.Поддержка браузеров также является всесторонней, поддерживая старые браузеры вплоть до IE7, а также возвращаясь к использованию системы по умолчанию на мобильных устройствах (если вы решите). Поскольку это более старый плагин, вероятно, в ближайшее время он не изменится. Разработчик, поддерживающий плагин, не проявлял активности в течение многих лет, поэтому на данный момент он предоставляется «как есть».

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

Веб-сайт и демонстрация / GitHub

Multiselect.js

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

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

Хотя некоторые из последних проблем, отмеченных на GitHub, так и не получили ответа, сам плагин довольно надежен с рядом опций, методов и событий, которые вы можете использовать. Он хорошо работает в нескольких браузерах и содержит несколько стилей (что позволяет вам легко диктовать, как он должен выглядеть).

Это хорошая отправная точка, если вам нужен простой плагин с множественным выбором.

Веб-сайт / GitHub

JQuery SumoSelect

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

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

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

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

Веб-сайт / Демоверсии / GitHub

Вот кое-что другое.В отличие от других независимых плагинов, таких как Chosen или Select2 (которые, хотя и популярны, но не очень широко распространены), этот плагин является частью инфраструктуры пользовательского интерфейса jQuery в виде расширяемого виджета под названием selectmenu

Виджеты

jQuery UI — это расширения, ориентированные на разработчиков, которые вы можете интегрировать в свой собственный проект. Эти виджеты были тщательно разработаны и очень стабильны, поддерживаются рядом опций, методов и событий, которые вы можете использовать для настройки того, как они работают.

Цель

Selectmenu — расширить функциональность и дизайн встроенных элементов select.Эти элементы полностью настраиваются на темы и основаны на CSS-фреймворке jQuery UI. Хотя он не имеет всех функций других более крупных плагинов (таких как фильтруемый поиск, анимация или привязка данных JSON), он имеет сильную кроссбраузерную поддержку и постоянные обновления.

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

Веб-сайт и демонстрация

Выбор фильтруемой начальной загрузки jQuery

Filterable Bootstrap Select — это плагин, расширяющий стиль выбора по умолчанию, предусмотренный в Bootstrap 3.

Этот плагин связывает воедино несколько ресурсов, таких как FontAwesome для значков, jQuery LiveFilter для механизма фильтрации, а также jQuery tabcomplete для его автоматического предсказания.

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

Основной плагин находится на GitHub и периодически обновляется в течение года.Однако, если большинство проектов обслуживает один человек, никогда не знаешь, когда и сможешь ли ты получить поддержку. Если вам нравится, как работают демоверсии, и вы хотите использовать их «как есть», тогда это отличный ресурс, если вы уже работаете над сайтом на базе Bootstrap.

Демо / GitHub

DDSlick jQuery DropDown

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

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

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

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

Динамическая привязка значений выбора из массива JSON (что позволяет динамически определять параметры)
Отображение изображения, описания и заголовка для демонстрации каждого варианта (с несколькими макетами)
Настройка кода с помощью обратных вызовов

Если вы хотите увидеть, как это работает, вы можете буквально скопировать и вставить HTML-код веб-сайтов и соответствующие образцы JS на веб-сайт JS-площадки, такой как Codepen.io, и все будет работать (при условии, что вы ссылаетесь как на jQuery, так и на основной JS-файл плагина).

Сайт

В завершение

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

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

Для большинства этих библиотек вы должны начать работу относительно быстро. Большинству из них нужен только jQuery и связанные файлы плагинов, и все готово.

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

Сообщите нам, есть ли у вас какие-либо другие замечательные библиотеки, которые вы использовали, когда дело доходит до выбора замены. Мы хотели бы услышать от вас!

Манипуляции с раскрывающимся списком с использованием jQuery · GitHub

Манипуляции с раскрывающимся списком с помощью jQuery · GitHub

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

Манипуляция выпадающим списком с помощью jQuery






	Управление раскрывающимся списком с помощью jQuery
	Страны:
	<выбрать>






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

	$ (документ).готов (функция () {
	var myCollection = {
	‘IN’: ‘Индия’,
	‘AUS’: ‘Австралия’,
	‘ENG’: ‘Англия’
	};
	loadDropDownList (myCollection);

	$ («# btnIn»).нажмите (функция () {
	$ («# стран»). Val (‘IN’);
	});

	$ («# btnEng»). Click (function () {
	$ («# стран»). Val (‘ENG’);
	});

	$ («# btnAus»).нажмите (функция () {
	$ («# стран»). Val (‘AUS’);
	});

	$ («# стран»). Change (function () {
	$ («# countryValue»). Text ($ («# страны»). Val ());
	$ («# countryText»). Text ($ («# страны> вариант [выбрано]»).html ());
	// Разместите здесь свой код
	});

	});

	функция loadDropDownList (коллекция) {
	$ .each (коллекция, функция (индекс, значение) {
	var listItem = $ (««).val (индекс) .html (значение);
	$ («# стран»). Append (listItem);
	});
	}

src: http://sweettam.blogspot.com/2011/02/in-this-blog-we-are-going-to-see-how.html

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

5 демонстраций красивых раскрывающихся списков с помощью подключаемого модуля jQuery (красивые раскрывающиеся списки)

Подключаемый модуль с красивыми выпадающими списками

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

Характеристики включают в себя:

Вы можете добавить настраиваемый HTML-код к пунктам меню, таким как значки, эскизы и т. Д.
Создание меню с одним или несколькими вариантами выбора
Добавить всплывающие подсказки к элементам (параметрам) или группам параметров
И более

Демо 1 Демо 2 Демо 3

Страница разработчика Скачать плагин

Настройка плагина pretty-dropdown в вашем проекте

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

CSS в разделе:

jQuery и файл JS плагина перед тегом:

В разметке

Разметка — это просто раскрывающийся список выбора HTML с параметрами или дополнительными группами. Например:

Скрипт

Класс упоминается в коде jQuery для запуска подключаемого модуля:

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

Простая красивая выпадающая демонстрация

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

См. Онлайн-демонстрацию и код

Полный код:

000

000 34

00050005 48

000

Красивое раскрывающееся меню

Демонстрация раскрывающегося списка с всплывающими подсказками

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

См. Онлайн-демонстрацию и код

В разметке:

Демо с префиксом и суффиксом с опциями

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

См. Онлайн-демонстрацию и код

В демонстрации вы можете увидеть, что для каждой опции используется значок (значки с глифами) в качестве префикса, а также используется небольшой текст в качестве суффикса. Это делается с помощью атрибутов data-prefix и data-suffix в теге options:

Пример множественного выбора

Вот как здорово выглядит использование атрибута multiple в теге select.

См. Онлайн-демонстрацию и код

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

Демо группы опций

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

См. Онлайн-демонстрацию и код

Полный код примера:

140002

000

000 34

00050005 48

000

9 0002 64

Красивое раскрывающееся меню

Вы можете узнать больше об этом красивом плагине на странице разработчика.

Галерея NuGet | выпадающий список jQuery 1.3.1

 Установочный пакет jQuery-dropdownlist -Version 1.3.1

 dotnet add package jQuery-dropdownlist --version 1.3.1

Для проектов, поддерживающих PackageReference, скопируйте этот узел XML в файл проекта, чтобы ссылаться на пакет.
пакет добавить jQuery-dropdownlist --version 1.3.1
Команда NuGet не предоставляет поддержку для этого клиента. Пожалуйста, свяжитесь с сопровождающими для получения поддержки.
#r "nuget: jQuery-dropdownlist, 1.3.1"

Команда NuGet не предоставляет поддержку для этого клиента. Пожалуйста, свяжитесь с сопровождающими для получения поддержки.
Выпадающий список JQuery, поле со списком для мобильных и настольных ПК
Расширенный компонент выбора для выбора одного и нескольких значений.Предоставляет отличную альтернативу собственному раскрывающемуся списку с улучшенным пользовательским интерфейсом.
Может использоваться в элементах формы mobiscroll или в любом поле ввода, выбора и поля.
Доставка с полезными функциями:
Выбор одного или нескольких значений
Заголовок группы и сегментация списка
Визуализация по запросу для длинных списков
Встроенная поддержка недействительных и недоступных для выбора значений
Фильтрация и автозаполнение с опережающим вводом
Круглые колеса
Поддержка нескольких тем
Поддержка модального, всплывающего и встроенного дисплея
Поддержка RTL
Полная локализация
В составе средств выбора и раскрывающихся списков его можно выбрать вместе с лицензиями Framework и Complete или с лицензией на компонент.

Выберите демонстрационные версии, доступные для других платформ.
Просмотр демонстраций и кода для
Просмотрите различные компоненты и демонстрации Закрывать
Используйте выбор как для мобильных устройств, так и для настольных компьютеров или настройте его адаптивно.Основное различие между двумя режимами рендеринга, управляемыми настройкой touchUi , заключается в том, как компонент расположен. При значении false компонент отображается подходящим для больших экранов и взаимодействия с указателем, а установка значения true делает его подходящим для сенсорных экранов.
Используйте его для любого пользовательского ввода или с полями формы Mobiscroll.Выбор отображается в фокусе ввода, но он также может быть активирован нажатием кнопки или может быть встроен непосредственно в страницу.
Допустим, у вас уже есть форма и вам нужен настраиваемый раскрывающийся список. Вы можете использовать его на существующих или новых полях.
Для мобильных и настольных компьютеров можно использовать разные режимы отображения.На мобильных устройствах выбор может отображаться в верхнем или нижнем экране, в центре экрана, привязал ко входу или любому объекту, если на то пошло, и он также может быть встроен в любой встроенный контент .
Используйте доступные режимы отображения на мобильном устройстве и на компьютере.На больших экранах у вас есть несколько другие варианты рендеринга, подходящие для большого форм-фактора и взаимодействия с указателем. Используйте режимы верхний , нижний и центр , чтобы показать его пользователям или оставаться в контексте и привязать ко входу.
Адаптивно используйте раскрывающийся список выбора.Вы можете установить позиционирование и рендеринг в зависимости от размера экрана. Имея положение выбора снизу на мобильном устройстве , всплывающее окно , привязанное к вводу на планшете и настольному дисплею на больших экранах , очень просто.
Все это можно настроить с помощью параметра Response , в котором вы передаете параметры для каждой точки останова.
отзывчивый: { xsmall: {...}, маленький: {...}, средний: {...}, большой: {...}, xlarge: {...} }
Используйте его на мобильных и настольных компьютерах для отображения различных вариантов с множественным выбором. Он может быть привязан к вводу или отображен встроенным (вы можете узнать о различных режимах отображения для мобильный и рабочий стол).
Это альтернатива списку флажков. Вы можете использовать его в сочетании с параметрами групп и колесом групп, которое пригодится для сегментирования длинных списков.
Отлично подходит для фильтрации категорий в решениях для электронной коммерции.
JQuery Select с параметрами группы и заголовками, отображаемыми в виде иерархии.С собственным внешним видом, улучшенным пользовательским интерфейсом и исходным кодом. Для jQuery или jQuery Mobile.
JQuery Hierarchical выберите пример с локальными или удаленными данными. Динамически заполнять связанные списки на основе предыдущего выбора. Для jQuery или jQuery Mobile.
Демо-версия JQuery Select с автозаполнением и функцией фильтрации и опережающего ввода.Загружать значения из разметки или удаленной службы JSON. Для jQuery или jQuery Mobile.
Компонент select заботится о рендеринге данных в прокручиваемом и доступном для пользователя виде. Свидание можно передать несколькими способами:
Встроенный HTML , встроенный в разметку — это хорошо, если у вас есть только пара статических параметров.
С данные настройка — Если вы хотите загрузить данные модели, это способ сделать это.
Удаленные данные — Загрузите его с помощью параметра data из удаленного источника api / данных.
JQuery Select скроллер и примеры раскрывающегося списка для загрузки и работы с большими наборами данных.Сегментируйте данные или загружайте с удаленного API. Для jQuery или jQuery Mobile.
Демонстрация стиля скроллера JQuery Select, поддерживающая длинный текст, отображаемый в несколько строк. С плавной прокруткой и естественным внешним видом. Для jQuery или jQuery Mobile.
Используйте компонент выбора в качестве средства выбора страны на мобильных устройствах и компьютерах.Вы можете добавить раскрывающийся список к любому входу или использовать поля ввода Mobiscroll.
Если вы не хотите делать его раскрывающимся, вы можете встроить средство выбора прямо на страницу.
Чтобы сборщик стран работал хорошо с отличным пользовательским интерфейсом, вы можете просто включить автозаполнение для функции поиска или упорядочить и сгруппировать страны в алфавитном порядке.
В этих примерах данные загружаются из удаленного JSON в следующем формате: {«значение»: «FJ», «группа»: «F», «текст»: «Фиджи»} однако вы можете добавить все это на вашу страницу.
Демонстрация скроллера JQuery Select с примерами программной установки значений и значений по умолчанию для одиночного / множественного выбора. Для jQuery или jQuery Mobile.
Внешний вид избранного можно полностью настроить.Есть четыре уровня настройки:
Базовые темы: выберите Mobiscroll , iOS , Android Material и Windows .
Светлый или темный: каждая тема имеет варианты светлых и темных . Установка темы Вариант на «авто» будет переключаться в зависимости от настроек системы.
Пользовательские темы: используйте конструктор тем, чтобы настроить цвета и сделать их соответствующими вашему бренду.
Custom CSS: Если вам нужна дополнительная настройка, нет ограничений для переопределений CSS.
Вы также можете увидеть, как выглядит каждый пример, изменив тему из заголовка.
Демо JQuery Select с обработчиками событий для индивидуальной интеграции и функциональности.Для jQuery или jQuery Mobile.
Пример локализации компонента JQuery Select, поддерживающий 37 языков, текст кнопки с полной возможностью RTL. Для jQuery или jQuery Mobile.
JQuery Select Демонстрация рендеринга справа налево с параметрами группы для быстрой навигации.С полной поддержкой языка RTL и исходным кодом. Для 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 в свой проект следуйте инструкциям на этой странице.
Сообщите нам, если мы сможем помочь и получить удовольствие! 👍
Настройте и попробуйте эту демонстрацию локально
Войдите или начните пользоваться бесплатной пробной версией
Измените пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Измените пароль
Необходимо обновить пароль? Войдите и нажмите кнопку под
Ваш пароль изменен!
Создание красивых настраиваемых раскрывающихся меню с помощью jQuery — Storyline Edition
Я уверен, что однажды Articulate выпустит обновление, которое предоставит нам раскрывающиеся (выбираемые) меню.Но в то же время, если вы похожи на меня, вы, вероятно, избегали их создания — для этого требуется так много слоев и триггеров. Но иногда действительно имеет смысл использовать раскрывающееся меню!
Я решил создать его с помощью jQuery (JavaScript). Вы сразу должны знать, что это решение ограничено выводом Storyline в HTML5.
В общем то, что я сделал:
Созданы две переменные сюжетной линии:
Мой список вещей
Остальные хранят выбор учащегося
Затем я добавил фигуру к слайду.
Я изменяю размер и размещаю его там, где хочу раскрывающийся список.
Затем я добавляю триггер JavaScript для запуска моего кода.
Наконец… Я упиваюсь красотой раскрывающегося списка.
Как это работает; jQuery:
Добавляет мой CSS в заголовок страницы (для оформления раскрывающегося списка).
Добавляет DIV для удержания меню.
Добавляет SELECT в div.
Берет список значений из сюжетной линии и добавляет каждое в качестве ОПЦИИ.
Ищет мою фигуру (на основе альтернативного текста).
Перемещает DIV / SELECT в то же положение, что и фигура.
Изменяет их размер примерно до того же размера, что и у формы.
Добавляет слушателя, чтобы определять, когда учащийся делает выбор.
Обновляет переменную сюжетной линии при выборе.
Посмотрите демонстрацию:
Возьмите образец файла Storyline, который включает код, и начните играть!
Подробности смотрите в видео:
Несколько примечаний:
Если слайд изменит размер (проигрыватель настроен на «масштабирование по размеру»), то меню не будет перемещаться вместе с другими элементами.Есть способ обойти это (следить за изменениями и перемещаться), но мне он пока не нужен для моего проекта.
Цвета, шрифты и т. Д. Можно изменить, отредактировав CSS. Я в основном использовал клипы из этого CodePen для создания своего: https://codepen.io/ericrasch/pen/zjDBx
На следующей неделе я покажу вам, как я этого добился в Adobe Captivate! Дополнительные готовые возможности электронного обучения можно найти в библиотеке шаблонов eLearning Brothers.
Джеймс Кингсли работает в сфере электронного обучения более 16 лет.Он получил несколько наград за объединение технологий для улучшения электронного обучения. Он — членораздельный MVP. Джеймс — решатель сложных головоломок электронного обучения и соучредитель ReviewMyElearning.com . Вы можете подписаться на него в Twitter или связаться с ним на LinkedIn для получения дополнительных советов и примеров. Он забрасывает случайные размышления на JamesKingsley.com .
4 лучших плагина jQuery Dropdown (бесплатные и платные)
Хотите создать элегантное выпадающее меню, как на сайтах электронной коммерции?
Если да?
Тогда у вас должны быть полнофункциональные плагины jQuery Dropdown для вашего веб-сайта.
Но прежде чем приступить к работе, позвольте мне объяснить вам, как эти плагины могут оправдать ваши ожидания.
Выпадающие меню специально разработаны для навигации по веб-сайтам. Это списки горизонтальных опций, каждая из которых имеет вертикальное меню.
Каждый раз, когда пользователь наводит курсор или щелкает мышью на опции, вертикальное меню «раскрывается».
Выпадающие меню необходимы для идеального размещения большого набора опций в меню вашего веб-сайта.
Обычно они создаются с использованием HTML, CSS и JavaScript. Итак, чтобы помочь вам, мы делимся списком из 4 лучших плагинов jQuery Dropdown. Они позволят вам создать гибкое и анимированное выпадающее меню.
Некоторые из этих плагинов могут создавать неограниченное количество уровней подменю. Кроме того, вы можете использовать их для создания строк меню разных стилей, таких как липкое, выпадающее, вертикальное и т. Д. Для вашего веб-сайта.
Давай проверим!
Swift через дополнительные плагины jquery:
1.Плагин выпадающего меню jQuery CSS3 — Плагины выпадающего меню jQuery
Это легкий плагин jQuery для создания переключаемых раскрывающихся меню. Вы можете преобразовать неупорядоченный список своего веб-сайта в систематическое раскрывающееся меню.
С помощью этого плагина вы можете без суеты создавать бесконечное количество подменю. По умолчанию фактическое раскрывающееся меню скрыто и будет отображаться всякий раз, когда пользователь наводит на него курсор. Это означает, что вы можете создать раскрывающееся меню с помощью этого плагина.
Вы можете создавать неограниченное количество стилей для выпадающих кнопок с помощью цветов фона и отступов. Плагин поддерживает анимацию CSS3, управляемую animate.css. Таким образом, вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.

Характеристики
Меню, оформленное этим плагином, будет хорошо работать на мобильных устройствах.
Вы можете включить / отключить причудливую анимацию, отключив анимацию.css файл.
Покупатель может получить доступ к FAQ по этому плагину после его покупки.
Этот плагин также подходит для работы с сайтом joomla.
С помощью этого плагина вы можете создавать пункты выпадающего или выпадающего вправо меню.
Стоимость
Вы можете купить этот плагин по разумной цене в 5 долларов.
Подробности здесь
2. BDropdown — плагины jQuery Dropdown
Этот плагин с выпадающим списком jquery основан на компоненте Bootstrap 4.Выпадающий список, предоставляемый этим плагином, можно переключать щелчком, а не наведением курсора. Этот плагин позволяет создавать выпадающие списки различных стилей, такие как одиночная кнопка, разделенная кнопка, выпадающие, разделенные выпадающие, вариации с выпадающим и выпадающим списком.
Выпадающие списки, созданные этим плагином, отлично работают с кнопками любого размера, включая стандартные и разделенные раскрывающиеся списки.
Выпадающий список, созданный этим плагином, управляется и размещается через CSS. Если раскрывающийся список выходит за пределы ширины области просмотра, его можно переместить с помощью jQuery.

Характеристики
Плагин предоставляет разделители меню для разделения групп связанных пунктов меню с помощью разделителя.
Вы также можете поместить форму в раскрывающееся меню с помощью этого плагина.
В раскрывающемся списке вы можете включить или отключить элементы, чтобы сделать их активными или неактивными.
Стоимость
Вы получите 6-месячную поддержку от Documentdriver вместе с будущими обновлениями.
Подробности здесь
3. Зависимый раскрывающийся список — плагины jQuery Dropdown
Этот плагин можно использовать для создания многоуровневого плагина jQuery с раскрывающимся списком. Вы также можете создавать раскрывающиеся списки с вложенными зависимостями.
С помощью этого плагина вы можете создавать раскрывающиеся списки зависимостей с 3, 2 и 4 уровнями. Эти зависимые раскрывающиеся списки будут генерировать список опций, сгруппированных по optgroup.

Характеристики
Вы можете выбрать элемент и установить его зависимость от одного или нескольких других входных элементов (включая вложение зависимостей).
Плагин автоматически отключает зависимое раскрывающееся меню до тех пор, пока зависимые результаты не станут доступны.
Он использует вызов ajax на сервер для доставки списка зависимых опций.
Отображает индикатор загрузки в зависимом выборе, пока результаты не будут получены с сервера.
Стоимость
Это бесплатный плагин, который можно приобрести на GitHub.
Подробности здесь
4. Плагин jQuery выбранного порядка
Этот плагин предназначен для обработки порядка выбора.После интеграции этого плагина ваши пользователи смогут устанавливать порядок различных продуктов, доступных в раскрывающемся списке. Выбранные продукты будут отображаться в панели. Пользователи могут получить свой заказ после выбора продуктов из раскрывающегося списка.

Характеристики
Этот плагин совместим с:
jQuery: 1.4+
Прототип: 1.7.1+
Выбрано: 1.0.0+
Он прост в использовании, поскольку хорошо документирован.Вы также можете просмотреть живые демонстрации этого плагина на JsFiddle.
Стоимость
Это абсолютно бесплатно и доступно на GitHub.
Подробности здесь
За вами!
Эти легкие плагины раскрывающегося списка jQuery очень полезны для создания раскрывающихся меню. Дизайн этих плагинов контролируется CSS. Поэтому их можно настроить с помощью нескольких нажатий клавиш, чтобы они соответствовали дизайну вашего веб-сайта.
No related posts.