Перехватчики событий JQuery Select Пример
Обновлено 27 октября 2022 г.
Используйте его в
адаптивных веб-приложениях в качестве раскрывающегося списка и средства выбора прокрутки с оптимизированным внешним видом и функциями для настольных и мобильных устройствРасширенный компонент выбора для выбора одного и нескольких значений. Предоставляет отличную альтернативу собственному раскрывающемуся списку с улучшенным UX. Отображает скроллер при касании и раскрывающийся список на рабочем столе. Используйте его в пользовательских формах добавления/редактирования событий или для любого ввода, поля и формы.
Благодаря встроенным возможностям фильтрации и шаблонов создавайте собственные средства выбора.
Чему вы научитесь
Выбор можно получить как часть лицензий «Планирование и ведение календаря» и «Полные лицензии».
Просмотрите различные компоненты и демонстрации
Закрыть
Часто задаваемые вопросы В чем разница между v5 и v4 Как использовать компоненты v4 вместе с v5
Тема
Материал
Окна
Измените настройку темы здесь
Темный режим
Макет
Мобильный
Рабочий стол
Переключите макет между мобильным и настольным компьютером
и посмотрите, как это выглядит.
Регион
Изменить язык и настройки локализации здесь
Изменить демо
Изменить демо
Адаптивное поведение
Скачайте и попробуйте пример
Селект имеет плавный макет, что означает, что он хорошо адаптируется к своему окружению. Однако бывают случаи, когда вы хотели бы настроить компонент быстро.
Используйте параметр Response , чтобы настроить средство выбора и изменить параметры в зависимости от ширины области просмотра. Есть пять предопределенных точек останова:
-
xsmall— минимальная ширина: 0px -
маленький— минимальная ширина: 576px -
средний— минимальная ширина: 768px -
большой— минимальная ширина: 992px -
xlarge— минимальная ширина: 1200 пикселей - использовать
customдля установки пользовательской точки останова
лучше поменять display или управляет параметром для настройки UX.
Таким образом, вы можете иметь календарь с нижним расположением на мобильном телефоне , всплывающее окно , привязанное к вводу на планшете и настольное отображение на больших экранах .
Изменить область просмотра
375 пикселей 576 пикселей 768 пикселей 992px 1200 пикселей
Изменить демо
Изменить демо
Изменить демо
Шаблоны
Скачайте и попробуйте пример
По умолчанию выбор принимает item.text и item.value из элементов массива данных и заполняет выбор.
Помимо базовой интерпретации текста/значения, вы можете написать собственные функции рендеринга для любой пользовательской разметки, напечатанной в виде прокручиваемого списка.
С помощью опции renderItem вы можете написать функцию, которая возвращает разметку пользовательского элемента. Для шаблона можно использовать любое поле данных . Вы также должны убедиться, что itemHeight установлен соответствующим образом.
- JS
- HTML
- CSS
Изменить демонстрацию
Выпадающий список стран
Скачайте и попробуйте пример
Используйте компонент выбора в качестве средства выбора страны на мобильных устройствах и компьютерах.
Вы можете добавить раскрывающийся список к любому вводу или использовать поля ввода Mobiscroll. Если вы не хотите делать его раскрывающимся, вы можете встроить средство выбора прямо в страницу.
Поиск включен через опцию filter .
В этом примере данные загружаются из удаленного JSON в следующем формате: { «значение»: «FJ», «группа»: «F», «текст»: «Фиджи» } и загружаются флаги с нашего сервера. Для вашей реализации вы должны встроить список и флаги на свою собственную страницу.
Для рендеринга изображения и текста используйте пользовательский шаблон элемента.
- JS
- HTML
- CSS
Изменить демонстрацию
Изображение и текст
Скачайте и попробуйте пример
Средство выбора изображения и текста можно легко реализовать, создав собственный шаблон элемента.
текст и значение , а также все пользовательские свойства, необходимые для массив данных .- JS
- HTML
- CSS
Изменить демо
Изменить демо
Изменить демо
Изменить демо
Изменить демо
Фильтрация
Включите фильтрацию, установив для параметра filter значение true .