Создать красивый выпадающий с EasyDropDown.js
Искусственный интеллект поможет тебе заработать!
Чтобы стилизовать элемент, CSS должно быть достаточно. Но, ну, этого не достаточно с точки зрения доступности. Представляем EasyDropDown.js, бесплатный плагин jQuery, чтобы скрыть все эти недостатки.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
EasyDropDown.js может легко стилизовать старомодный элемент select на вашей веб-странице с большим количеством функций. После
Установка
Чтобы установить EasyDropDown, сначала включите библиотеку jQuery на свою веб-страницу. Не забудьте также включить JavaScript (получить его Вот) вот так:
И его CSS-файл внутри тега head:
..
..
Если вы используете другую тему, обязательно скопируйте файлы в веб-папку. Не волнуйтесь, вам не нужно включать их в HTML-код, чтобы звонить им.
Styling The Select
При использовании EasyDropDown.js вы можете создать настраиваемое раскрывающееся меню с чистой, семантической разметкой. Элементы выбора могут быть стилизованы только в HTML. Вы можете отключить элемент, определить выбранную опцию или легко добавить метку.
Чтобы стилизовать его, вы должны сначала включить раскрывающийся класс в теги. Метку можно добавить, указав класс метки внутри опции. Вот основная разметка:
Вот и все, вам не нужно добавлять какой-либо пользовательский javascript. Теперь паршивый, старомодный
Если вы хотите добавить предварительно выбранный параметр, просто укажите раскрывающийся список с выбранным атрибутом. Мы рекомендуем вообще не использовать метку с этим параметром, так как выбранное значение переопределит метку.
...
<option value="2" selected>Вариант 2</option>
...
Вы также можете отключить раскрывающийся список, используя атрибут disabled следующим образом:
…
Готовы использовать темы
EasyDropDown.js поставляется с еще 2 готовыми темами: Metro и Flat. Чтобы использовать темы, вы можете использовать атрибут данных HTML5.
Внутри
…
Помимо wrapperClass, вы можете добавить больше настроек, см. страница документации для деталей. Если вы знакомы с кодом JavaScript, вы можете посмотреть учебник там.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)