Каждый может быть знаком с формой раскрывающегося списка Select, но форма раскрывающегося списка по умолчанию часто заставляет некоторые веб-сайты чувствовать себя некрасивыми, и трудно настроить стиль выбора с CSS. Следовательно, многие веб-сайты делают выбранные раскрывающиеся формы, которые в большей степени соответствуют стилю веб-сайта, и часто используют JS для моделирования этого эффекта.
Например, Tudou.com, Taobao Mall и Amazon-все раскрывающиеся списки формы, изготовленные с JS.
Результатом этого, очевидно, визуально объединяется с общим стилем веб-сайта, и стиль раскрывающегося списка очень красивый, но также приносит некоторые неблагоприятные реакции. Поскольку это делается с JS, он столкнется с множеством неожиданных эффектов. Давайте проанализируем их соответствующие дефекты через три веб -сайта тестера:
Полевая поле выбора категории поиска для картофеля заставляет меня чувствовать себя странно каждый раз, когда я нажимаю:
1. После нажатия всплывающий список отличается от того, что вы ожидаете. Подсознательно, это был раскрывающийся список, но картофель дал мне середину списка.
2. Используйте клавиши вверх/вниз, чтобы выбрать привычно, но вся страница прокручивается.
3. В гневе мне больше не нужно было закрывать его. Нажмите клавишу ESC, но ответа нет.
4. После отключения JS он совершенно недоступен.
Точно так же торговый центр Taobao также выглядит красиво:
За исключением точки 1, все остальное похоже на картофель, с проблемами доступности и доступности.
Решение очень простое, просто используйте нативную коробку отбора, например, Amazon:
Почему он не рекомендуется использовать поля пользовательских выборов на веб -страницах?
В поле выбора - очень зрелый интерактивный элемент управления. Зрелость означает, что пользователей легко принять, но зрелость также означает, что они внимательны и имеют очень богатые интерактивные детали. Например: ответ на операции клавиатуры, такие как PGUP/PGDN, Home/End, и направление всплывающего окна раскрывающегося списка можно автоматически регулировать в разных положениях и т. Д.
Использование JS для моделирования ящиков отбора требует большой работы и тщательного тестирования. Даже если компания готова инвестировать, она все равно не может реализовать некоторые функции местного элемента управления. Например: в приведенной выше поле выбора Amazon я поднял браузер на очень низкий уровень, и раскрывающийся список может быть расширен за пределы браузера.
Для небольшого визуального десерта потребовалось так много практических деталей, чтобы взаимодействие потерять так много времени, и для интерфейского программиста потребовалось много времени, но это было очень плохо, что было действительно плохо.
PS: Чтобы использовать пользовательское поле выбора, необходимо выполнить следующие условия:
1. столь же сумасшедший, как Google, желая потратить много времени и ресурсов.
2. столь же тщательно, как Google, сделайте это хорошо и тщательно имитируйте его.
3. Применить в веб -приложении.
К сожалению, в стране такие сумасшедшие и дотошные компании, как Google или Facebook, еще не появились.