#html #css #google-chrome
#HTML #css #google-chrome
Вопрос:
Я создаю небольшую форму, в которой пользователь
- Вводит некоторый текст в поле ввода
- Выбирает из множества опций, касающихся действий, которые необходимо выполнить с данными
- Нажимает кнопку отправки
Disconnect делает нечто подобное лучшим способом:
вы можете щелкнуть по любому из пяти разделов здесь. Это замечательно, потому что облегчает пользователям выполнение одной и той же задачи и упрощает choose and click для click .
Какая технология используется для отображения такого меню?
Ответ №1:
Хороший способ сделать это — для которого не нужен javascript — использовать переключатели, но сделать их невидимыми. Интерактивный текст и значок находятся внутри ярлыка для каждой переключающей кнопки, поэтому вы можете щелкнуть ярлык или значок, чтобы выбрать переключатель.
Это гарантирует несколько важных вещей:
- Можно выбрать только один элемент
- Выбранный файл передается обратно вместе с формой
- Встроенная обработка формы браузера все еще работает
- Параметры доступности все еще работают
Вы должны быть осторожны, чтобы сделать надписи явно интерактивными, поскольку вы теряете визуальный намек на видимость переключателей.
IE6 и 7 также требуют взлома — у них странное поведение, при котором переключатель display: none или visibility: hidden или флажок visibility: hidden нельзя выбрать, щелкнув по его метке.
Вот пример:http://www.spookandpuff.com/examples/clickableToggles.html
(Я не включил значки — вы можете легко добавить их, установив их в качестве фона в CSS для каждого элемента (не используйте <img> теги).).
Редактировать О боже — я только что правильно прочитал вопрос! Извините, вы хотите, чтобы поведение было «выбрать», а не «выбрать и отправить»… Простой способ сделать это — добавить некоторый javascript во входные данные, чтобы они автоматически отправляли формы при их выборе. Я обновил пример, чтобы показать это.
Комментарии:
1. Единственным недостатком этого решения является то, что оно требует, чтобы пользователь нажимал на опции, а затем также отправлял. Но, на мой взгляд, это незначительно, и это сделало бы очень изящную версию с отключением JS.
2. Также — что еще более незначительно — Google утверждает, что
:hoverиспользование ссылок без ссылок может вызвать проблемы с производительностью в IE7 / 8 . Но неважно.3. В исходном вопросе говорится, что выбор опции — это шаг 2, а нажатие кнопки отправить — это шаг 3. Конечно, вы могли бы автоматически отправлять форму при выборе опции, но это может быть немного непростительно (нет шансов передумать, если вы нажмете неправильно.
Ответ №2:
Похоже на JavaScript:https://github.com/disconnectme/disconnect.me