Список раскрывающийся jquery: Раскрывающийся список на 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

});

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

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

Учебник HTML 5. Статья «Раскрывающийся список и текстовая область»

В этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент <form>).

Раскрывающийся список

Тег <select> представляет собой элемент управления, который позволяет создать раскрывающийся список.
Тег <option> определяет пункты раскрывающегося списка (параметры для выбора), он применяется как вложенный элемент тега <select>.

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

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <select></title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg" selected>Calvin Cordozar Broadus, Jr.</option>
		</select>
	</body>
</html>

В этом примере мы тегом <select> создали раскрывающийся список, внутри него мы поместили три элемента <option>, которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега <option>, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

В браузере это выглядит следующим образом:

Рис 38 HTML раскрывающийся список.

Отключение пункта меню

С помощью логического атрибута disabled (HTML тега <option>) допускается отключать определенный пункт меню (параметр). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено параметр неактивен.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <option> в раскрывающемся списке</title>
	</head>
	<body>
		<select>
			<option value = "A">Option A</option>
			<option value = "B">Option B</option>
			<option value = "C" disabled>Option C</option>
		</select>
	</body>
</html>

В браузере это выглядит следующим образом:

Рис. 38а Пример использования атрибута disabled HTML тега <option> (отключение параметра).

Группировка пунктов меню

Давайте рассмотрим следующий тег <optgroup>, который используется для группировки связанных данных в раскрывающемся списке <select> и предназначен для более удобного представления информации пользователям.

Пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <optgroup></title>
	</head>
	<body>
		<select  name = "black&white">
			<optgroup label = "Blacklist"> <!--Группа №1 -->
				<option value = "2PAC"> Tupac Amaru Shakur </option>
				<option value = "50cent"> Curtis Jackson </option>
				<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr. </option>
			</optgroup>
			<optgroup label = "Whitelist"> <!--Группа №2 -->
				<option value = "Eminem">Marshall Bruce Mathers III</option>
			</optgroup>
		</select>
	</body>
</html>

В данном примере мы выделили 2 группы тегом <optgroup>. Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

Рис. 39 Группировка данных в раскрывающемся списке HTML.

В следующем примере с использованием логического атрибута disabled мы отключим одну группу («Group B«):

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута disabled HTML тега <optgroup></title>
	</head>
	<body>
		<select>
			<optgroup label = "Group A"> <!--Группа №1 -->
				<option>A.1</option>
			</optgroup>
			<optgroup label = "Group B" disabled> <!--Группа №2 (отключена)-->
				<option>B.1</option>
				<option>B.2</option>
			</optgroup>
			<optgroup label = "Group C"> <!--Группа №3 -->
				<option>C.1</option>
				<option>C.2</option>
				<option>C.3</option>
			</optgroup>
		</select>
	</body>
</html>

Результат нашего примера:

Рис. 39а Отключение группы (пример использования атрибута disabled HTML тега <optgroup>).

Отключение списка и мультивыбор

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

<!DOCTYPE html>
<html>
	<head>
		<title>Атрибуты disabled и multiple тега <select></title>
	</head>
	<body>
		<select name = "firstlist" disabled> <!-- список отключен -->
			<option value = "1">1</option>
			<option value = "2">2</option>
			<option value = "3">3</option>
		</select>
		<select name = "secondlist" multiple> <!-- список с возможностью выбора нескольких значений -->
			<option value = "A">A</option>
			<option value = "B">B</option>
			<option value = "C">C</option>
			<option value = "D">D</option>
		</select>
	</body>
</html>

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

Для второго списка мы использовали атрибут multiple, который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).

В браузере это выглядит следующим образом:

Рис. 39б Пример использования атрибутов disabled и multiple тега <select>.

Текстовая область

Тег <textarea> представляет собой поле формы для создания области многострочного ввода (текстовая область). Основное отличие от тега <input> (пользовательское поле для ввода информации) заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер).

Текстовая область может содержать неограниченное количество символов, как правило, текст внутри нее отображается браузерами моноширинным шрифтом Courier (курьер).

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea  name = "auth_msg" rows = "10" cols = "45">Здесь Вы можете написать информацию для автора…</textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В данном примере мы создали текстовую область (HTML тег <textarea>), атрибутом name присвоили ей имя (name = «auth_msg»), атрибутом rows задали высоту строк равной десяти символам (rows = «10»), и атрибутом cols указали ширину поля равной 45 символов (cols = «45»).

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).

Результат нашего примера:

Рис. 40 Текстовая область в HTML.

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

Если атрибуты cols или rows указаны, то их значение должно быть положительным целым числом. Значение атрибута cols (ширина) по умолчанию 20 символов, а rows (высота) 2 символа .

Обращаю Ваше внимание, что вы можете задавать значение ширины и высоты текстовой области не только в символах, но и с использованием CSS свойств width (ширина) и height (высота), в этом случае браузер будет игнорировать значение атрибутов cols и rows если они указаны.

Давайте рассмотрим пример:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута cols HTML тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea cols = "10">Текстовое поле шириной 10 символов.</textarea>
			<textarea cols = "10" style = "width:200px">Текстовое поле шириной 10 символов и 200 пикселей.</textarea><br>
			<input type = "submit" cols = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом cols мы задали видимую ширину текстовой области 10 символов. Для второй текстовой области мы задали ширину элемента 200 пикселей с использованием встроенного CSS (свойство width). Как вы можете заметить, при этом браузер начинает игнорировать значение атрибута cols.

Результат нашего примера:

Рис. 40а Использование атрибута cols HTML тега <textarea> (ширина элемента в символах и пикселях).

Отключение текстовой области

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

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Атрибуты disabled и name тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea name = "userInfo">Текстовое поле доступно к заполнению.</textarea>
			<textarea name = "staticInfo" disabled>Текстовое поле не доступно к заполнению.</textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.

Результат нашего примера:

Рис. 40б Пример использования атрибутов disabled и name тега <textarea>.

Подсказка для текстовой области

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

Благодаря атрибуту placeholder (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.

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

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Атрибуты placeholder и readonly тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea placeholder = "Введите информацию в текстовое поле"></textarea>
			<textarea placeholder = "Поле доступно только для чтения" readonly></textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом placeholder мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).

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

Результат нашего примера:

Пример использования атрибутов placeholder и readonly тега <textarea>.

Вопросы и задачи по теме

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

Используя полученные знания составьте следующую форму размещения вакансии:

Практическое задание № 23.

Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи «HTML формы». Если вы пропустили её, то вернитесь для её изучения.

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

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

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

Обратите внимание на некоторые вещи, прежде чем мы начнем:

В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.

Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Чтобы её активировать, необходим следующий фрагмент кода:

*,
*:after,
*:before {
box-sizing: border-box;
}

Итак, с чего же мы начнем.

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

<div>
<span>I’m kinda the label!</span>
<ul>
<li>I’m hidden!</li>
<li>Me too!</li>
<li>So do I.</li>
</ul>
</div>

JavaScript

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

//…

obj.dd.on(‘click’, function(event){
$(this).toggleClass(‘active’);
return false;
});

//…

$(function() {

var dd = new DropDown( $(‘#dd’) );

$(document).click(function() {
// all dropdowns
$(‘.wrapper-dropdown-1’).removeClass(‘active’);
});

});

Так что же это скрипт делает? Во-первых, он переключает класс .active, когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active, то он добавляется, а если этот класс уже присвоен, то он удаляется.

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

Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!

Пример 1

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

HTML-разметка

Нам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и «лейбл», который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег.

<div tabindex=»1″>
<span>Пол</span>
<ul>
<li><a href=»#»>Мужской</a></li>
<li><a href=»#»>Женский</a></li>
</ul>
</div>

CSS

Давайте теперь перейдем к CSS. Начнем с обертки (враппера):

.wrapper-dropdown {
/* размер и положение */
position: relative; /* Enable absolute positioning for children and pseudo elements */
width: 200px;
padding: 10px;
margin: 0 auto;

/* цвет и фон */
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;

/* шрифт */
font-weight: bold;
}

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

Давайте закончим с «лейблом», добавив небольшую стрелку справа при помощи псевдо-элемента.

.wrapper-dropdown:after {
content: «»;
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent #fff;
}

Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа.

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

.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0; /* Size */
right: 0; /* Size */

/* Styles */
background: #fff;
font-weight: normal; /* Overwrites previous font-weight: bold; */

/* Hiding */
opacity: 0;
pointer-events: none;
}

Мы зададим раскрывающемуся списку абсолютное позиционирование и разместим его позади кнопки (top: 100%;). Зададим ему такую же ширину, как для кнопки. И, наконец, скроем его, уменьшив его прозрачность до 0.

Теперь зададим стили для элементов списка:

.wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
background: #f3f8f8;
}

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

/* Active state */
.wrapper-dropdown-1.active .dropdown {
opacity: 1;
pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
border-color: #9bc7de transparent;
border-width: 6px 6px 0 6px ;
margin-top: -3px;
}

.wrapper-dropdown-1.active {
background: #9bc7de;
background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}

Три вещи, которые необходимо отметить:

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

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

Затем мы изменим фон позади стрелки с помощью градиента.

JavaScript

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

Очень простой код: при нажатии на элемент мы получаем его значение и отображаем его в теге span.

Пример 2

Во втором примере мы создадим красивое меню для регистрации в различных социальных сетях.

HTML-разметка

<div>Регистрация
<ul>
<li><a href=»#»><i></i>Twitter</a></li>
<li><a href=»#»><i></i>Github</a></li>
<li><a href=»#»><i></i>Facebook</a></li>
</ul>
</div>

Теги <i> используются для отображения маленьких иконок из FontAwesome. Я не буду объяснять что такое FontAwesome здесь, потому как об этом уже было не раз сказано в предыдущих статьях. Просто убедитесь, что это работает.

CSS

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

.wrapper-dropdown-2 {
/* Size and position */
position: relative; /* Enable absolute positioning for children and pseudo elements */
width: 200px;
margin: 0 auto;
padding: 10px 15px;

/* Styles */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}

Теперь маленькая стрелка. Точно такая же, как раньше:

.wrapper-dropdown-2:after {
content: «»;
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}

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

.wrapper-dropdown-2 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -5px;
right: 0px;

/* Styles */
background: white;
transition: all 0.3s ease-out;
list-style: none;

/* Hiding */
opacity: 0;
pointer-events: none;
}

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

Некоторые стили для ссылок и иконок:

.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
transition: all 0.3s ease-out;
}

.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
border-left-color: #00ACED;
}

.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
border-left-color: #4183C4;
}

.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
border-left-color: #3B5998;
}

.wrapper-dropdown-2 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
color: grey;
}

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

.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}

JavaScript

Пример 3

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

HTML-разметка

<div tabindex=»1″>
<span>Транспорт</span>
<ul>
<li><a href=»#»><i></i>Почта</a></li>
<li><a href=»#»><i></i>UPS доставка</a></li>
<li><a href=»#»><i></i>Частный самолет</a></li>
</ul>
</div>

Кода не намного больше, чем раньше. Перейдем к CSS!

CSS

.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;

/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(50,50,50,0.1);
cursor: pointer;
outline: none;

/* Font settings */
font-weight: bold;
color: #8AA8BD;
}

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

.wrapper-dropdown-3:after {
content: «»;
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}

Тут все также, как и раньше, так что не будем описывать код подробно.

.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;

/* Styles */
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
transition: all 0.5s ease-in;
list-style: none;

/* Hiding */
opacity: 0;
pointer-events: none;
}

.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
transition: all 0.3s ease-out;
}

.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}

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

.wrapper-dropdown-3 .dropdown:after {
content: «»;
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}

.wrapper-dropdown-3 .dropdown:before {
content: «»;
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}

Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё.

Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким.

.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}

JavaScript

Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово «Транспорт» здесь, то JS немного отличается.

Пример 4

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

HTML-разметка

<div>Сделать
<ul>
<li><input type=»checkbox» name=»el-1″ value=»donut»><label for=»el-1″>Съесть пирожок</label></li>
<li><input type=»checkbox» name=»el-2″ value=»neighbour»><label for=»el-2″>Следить за соседями</label></li>
<li><input type=»checkbox» name=»el-3″ value=»T-rex»><label for=»el-3″>Покормить кота</label></li>
</ul>
</div>

Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом.

CSS

.wrapper-dropdown-4 {
/* Size and position */
position: relative;
width: 270px;
margin: 0 auto;
padding: 10px 10px 10px 30px;

/* Styles */
background: #fff;
border: 1px solid silver;
cursor: pointer;
outline: none;
}

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

.wrapper-dropdown-4:after {
content: «»;
width: 0;
height: 0;
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #ffaa9f transparent;
}

Стили для выпадающего списка такие же, как и в предыдущих примерах:

.wrapper-dropdown-4 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
margin-top: 1px; /* border of wrapper */
left: -1px;
right: -1px;

/* Styles */
background: white;
border: 1px solid silver;
border-top: none;
list-style: none;
transition: all 0.3s ease-out;

/* Hiding */
opacity: 0;
pointer-events: none;
}

Мы должны установить margin-top равный 1px, потому что мы должны немного сдвинуть его вниз из-за границы обертки.

.wrapper-dropdown-4 .dropdown li {
position: relative; /* Enable absolute positioning for checkboxes */
}

.wrapper-dropdown-4 .dropdown li label {
display: block;
padding: 10px 10px 10px 30px; /* Same padding as the button */
border-bottom: 1px dotted #1ccfcf;
transition: all 0.3s ease-out;
}

.wrapper-dropdown-4 .dropdown li:last-of-type label {
border: none;
}

.wrapper-dropdown-4 .dropdown li input /* Checkboxes */ {
position: absolute;
display: block;
right: 10px;
top: 50%;
margin-top: -8px;
}

/* Hover state */

.wrapper-dropdown-4 .dropdown li:hover label {
background: #f0f0f0;
}

/* Checked state */

.wrapper-dropdown-4 .dropdown li input:checked ~ label {
color: grey;
text-decoration: line-through;
}

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

Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.

У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.

/* красные линии с псевдо-элементами */
.wrapper-dropdown-4 .dropdown:before,
.wrapper-dropdown-4:before {
content: «»;
width: 4px;
height: 100%;
position: absolute;
top: 0;
left: 15px;
border: 1px solid #ffaa9f;
border-top: none;
border-bottom: none;
z-index: 2;
}

/* Или: */
/* красные линии при помощи градиента */

.wrapper-dropdown-4 .dropdown,
.wrapper-dropdown-4 {
background: linear-gradient(left, white 5%, #ffaa9f 5%, #ffaa9f 5.3%, white 5.3%, white 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, white 6.8%);
}

.wrapper-dropdown-4 .dropdown li:hover label {
background: linear-gradient(left, #f0F0F0 5%, #ffaa9f 5%, #ffaa9f 5.3%, #f0F0F0 5.3%, #f0F0F0 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, #f0F0F0 6.8%);
}

Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10).

Теперь стили для раскрытого состояния. Ничего нового здесь нет.

/* Active state */

.wrapper-dropdown-4.active:after {
border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-4.active .dropdown {
opacity: 1;
pointer-events: auto;
}

JavaScript

Пример 5

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

HTML-разметка

<div tabindex=»1″>Иван Иванов
<ul>
<li><a href=»#»><i></i>Профиль</a></li>
<li><a href=»#»><i></i>Настройки</a></li>
<li><a href=»#»><i></i>Выйти</a></li>
</ul>
</div>

CSS

.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 12px 15px;

/* Styles */
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
content: «»;
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #4cbeff transparent;
}

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

.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;

/* Styles */
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
transition: all 0.3s ease-out;

/* Hiding */
max-height: 0;
overflow: hidden;
}

На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка.

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

.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}

.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}

А теперь, в активном состоянии:

/* Active state */

.wrapper-dropdown-5.active {
border-radius: 5px 5px 0 0;
background: #4cbeff;
box-shadow: none;
border-bottom: none;
color: white;
}

.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}

Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы.
И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения.

JavaScript

Обратная совместимость

Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров?
Эти браузеры не понимают, например, свойство opacity.

В этом нам поможет библиотека Modernizr. Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.

Благодаря этому, мы можем «указать» браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:

/* Нет поддержки CSS3 */

.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
display: block;
}

Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.

Заключение.

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

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops

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

30 jQuery плагинов для стилизации элементов форм

Элементы HTML-форм всегда были проблемой для дизайнеров, они некрасивы и никогда не совпадают c веб-дизайном или стилем приложений. А также они по-разному выглядят в зависимости от того, какой браузер используется. Представляем 30 jQuery плагинов, которые помогут вам создавать собственные радиокнопки, checkbox и select элементы. Вы можете использовать нашу форму и изменить внешний вид полей формы с помощью плагинов. Некоторые из плагинов также помогут расширить функциональные возможности элементов формы.

Смотрите также:
jQuery плагины форм для указания времени и даты
10 jQuery плагинов форм для ввода данных кредитных карт
10 jQuery плагинов для измерения сложности пароля

Deep Checkbox

Плагин добавляет некоторую логику к вложенным checkbox.

FancySelect

jQuery плагин для стилизации выпадающего меню.

Checkator

jQuery плагин для стилизации радиокнопок и checkbox элементов. Поддерживает CSS стилизацию.

Select2

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

Checkbo

Легкий jQuery плагин для стилизации чекбокс и радиокнопок.

customSelect

Легкая, ненавязчивая стилизация форм с JQuery.

Chosen

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

wSelect.js

Плагин jQuery для стилизации поля выбора (select boxes). Он основан на блоках div, что позволяет, например, добавлять иконки к вариантам поля выбора.

Image Picker

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

Select-or-Die

Плагин jQuery для стилизации элементов формы на качественно новом уровне.

selectToAutocomplete

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

Bootstrap Switch

Плагин для стилизации checkbox и радиокнопок в переключатели (toggle switches).

Jquery CSS Multi Column Select Box

Плагин для стилизации поля select в список множественного выбора.

CSS “Ripple/Wave” checkbox and radio button

Css стилизация checkbox и радиокнопок.

CSS3 Checkbox Styles

CSS стилизация checkbox.

jQuery Form Styler

jQuery-плагин для CSS стилизации элементов html-форм.

jQuery Cascading Dropdown

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

uSwitch pure CSS select control

CSS стилизация полей select.

SCSS Radio Buttons

SCSS стилизация радиокнопок.

Selectator

Плагин jQuery, которой поможет изменить внешний вид полей select.

jQuery Selectric

jQuery плагин для стилизации полей select.

ScrewDefaultButtons

Простой плагин jQuery для стилизации radio buttons и checkbox.

Selectik

Selectik стилизации select на jQuery. Простой, кроссбраузерный. альтернатива стандартной формы выбора элемента, которую можно настроить с помощью CSS.

Labelauty jQuery Plugin

Хороший и легкий плагин jQuery, который придаст стилизацию чекбокс и радиокнопок. Также позволяется использовать пользовательские метки для каждого состояния input поля.

EasyDropDown

jQuery плагин для стилизации полей input в выпадающие меню.

customSelect

Простой jQuery UI widget для стилизации select и input элементов.

iCheck

Плагин jQuery и Zepto для стилизации чекбокс и радиокнопок.

DropKick.js

Плагин jQuery, который заменяет стилизацию элементов ul li в поля select.

Accessible toggle-style checkbox

CSS стилизация chexbox элементов в переключатели.

Glowing Radio Buttons and Checkboxes using only CSS

CSS стилиазция радиокнопок и checkbox элементов.

radiosToSlider

Плагин для создания слайдера из списка радиокнопок.

Пользовательский интерфейс

— Как добавить параметры в DropDownList с помощью jQuery?

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

13 jQuery SelectBox / Drop-down Plugins — SitePoint

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

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

К счастью, существует куча отличных подключаемых модулей на базе 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

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

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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

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

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

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

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

Читайте также:

Учебник HTML 5. Статья «Раскрывающийся список и текстовая область»

Раскрывающийся список

Отключение пункта меню

Группировка пунктов меню

Отключение списка и мультивыбор

Текстовая область

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

Отключение текстовой области

Подсказка для текстовой области

Вопросы и задачи по теме

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

Итак, с чего же мы начнем.

JavaScript

Пример 1

HTML-разметка

CSS

JavaScript

Пример 2

HTML-разметка

CSS

JavaScript

Пример 3

HTML-разметка

CSS

JavaScript

Пример 4

HTML-разметка

CSS

JavaScript

Пример 5

HTML-разметка

CSS

JavaScript

Обратная совместимость

Демонстрация

30 jQuery плагинов для стилизации элементов форм

Deep Checkbox

FancySelect

Checkator

Select2

Checkbo

customSelect

Chosen

wSelect.js

Image Picker

Select-or-Die

selectToAutocomplete

Bootstrap Switch

Jquery CSS Multi Column Select Box

CSS “Ripple/Wave” checkbox and radio button

CSS3 Checkbox Styles

jQuery Form Styler

jQuery Cascading Dropdown

uSwitch pure CSS select control

SCSS Radio Buttons

Selectator

jQuery Selectric

ScrewDefaultButtons

Selectik

Labelauty jQuery Plugin

EasyDropDown

customSelect

iCheck

DropKick.js

Accessible toggle-style checkbox

Glowing Radio Buttons and Checkboxes using only CSS

radiosToSlider

— Как добавить параметры в DropDownList с помощью jQuery?

13 jQuery SelectBox / Drop-down Plugins — SitePoint

Выбрано

Выбрать2

jQuery Nice Select

Выбрать

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

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