Иван Андреев MySelecter v 1.2.5 — бесплатный лёгковесный JavaScript-плагин для создания кастомных выпадающих списков.
Задача
Разработан для высокой производительности и простоты интеграции. В этом релизе реализованы плавная прокрутка, навигация с клавиатуры и гибкие слушатели событий для бесшовного взаимодействия при выборе элементов.
Возможности и преимущества:
- 2 независимых билда плагина единой версии библиотеки - нативный javaScript ES5 или jQuery (не ниже2.1) на выбор
- Инициализация через экзепляр с настройкой и методами
- Пользовательские слушатели событий (focus, blur, input keydown) которые можно менять на свой вкус
- Плавная прокрутка выпадающего списка и навигация с клавиатуры
- Динамические авто-заполнение и контроль валидации настраиваются
- Поддержка кастомной настройки CSS-стилей для поля ввода и выпадающего списка
- Лёгкая и быстрая интеграция в любой веб-проект
- Понятная логика исходного кода для внесения дополнений
Решение
Документация:
Значения по умолчанию:
openEvent: 'focus', // Слушатели событий для открытия списка (string)
closeEvent: 'blur', // Слушатели событий для закрытия списка (string)
inputEvents: 'input keydown', // Слушатели событий ввода текста (string)
inputCssClass: undefined, // CSS-класс для поля ввода (string)
listCssClass: undefined, // CSS-класс для списка (string)
listItemsDataAttr: undefined, // Имя data-атрибута для элементов списка (string)
listSmoothScroll: false, // Плавная прокрутка списка (boolean)
listKeysRevert: false, // Обратная навигация клавишами (boolean)
defaultValue: '', // Значение по умолчанию для поля ввода (undefined || string)
autoCompleteEnabled: false, // Включение автозаполнения при скрытом списке (boolean)
validateLength: 3, // Минимальная длина ввода для валидации (number)
autoCompleteLength: 1, // Минимальная длина ввода для подсветки в списке (number)
autoCompleteSearchStartOnLine: false, // Искать автозаполнение только с начала строки (boolean)
acceptAllValues: false, // Принимать любое введённое значение (boolean)
onInit_EventListener: function() {}, // Колбэк при инициализации (function)
onChange_EventListener: function() {}, // Колбэк при изменении значения (function)
onOpenEvent_EventListener: function() {}, // Колбэк при открытии списка (function)
onCloseEvent_EventListener: function() {} // Колбэк при закрытии списка (function)
Методы:
MySelecterUpdateValue('value') // Устанавливает значение списка (function)
MySelecterGetSelectedValue() // Возвращает текущее выбранное значение (function)
MySelecterGetListDataArray() // Возвращает массив всех значений списка (function)
MySelecterDestroy() // Уничтожает экземпляр плагина (function)
MySelecterInit() // Инициализирует экземпляр плагина (function)
MySelecterClose() // Закрывает выпадающий список (function)
MySelecterOpen() // Открывает выпадающий список (function)
Результат
Обновлено: 25 мая 2024 | Лицензия: GPL | Автор: Telegram - https://t.me/iverstka
