Пользовательский Radiobutton с использованием CSS/JS/JQuery

Question

У меня есть небольшой инструмент для веб-администрирования. Я работаю над тем, что позволяет пользователю просматривать & редактирование свойств объекта базы данных. Большинство настроек - это свойства типа «да/нет/не знаю».

Существует достаточно много настроек для отображения, поэтому управление экраном недвижимости & важно использовать.

Когда я впервые scaffolded пользовательский интерфейс, я с помощью теста 1 в приведенном выше изображении. Достаточно сказать, что он выглядел загроможденным и с десятками из них в нескольких столбцах/категориях в пользовательском интерфейсе. Тест 2 был немного лучше, но не намного.

Итак, я думал о выполнении чего-то вроде теста 3. В зависимости от того, какой радиобудильник выбран в html, появляется изображение разности. И нажатие на изображение циклически повторяется через 3 варианта.

(Если вы когда-либо использовали функцию GMail Labs, которая позволяет вам иметь множество различных видов флагов «звезда» для вашей электронной почты, это идея)

Так что мои вопросы к UI/CSS Gurus ,

1. Является ли «Тест 3» приемлемым/пригодным для использования решением?

2. ЕСЛИ так, можно ли изменить вход радиобарабана (или выбрать/опцию), используя только CSS & JS? (Или если вы можете мне точку в направлении учебник/ресурс, я был бы благодарен)

Спасибо,

Эоин C

Answer 1

велосипедная вещь для меня не подходит. Я думаю, что тест 2 - лучший вариант. может показаться немного «загроможденным», но по крайней мере он полезен. Если кто-то должен заполнить эти формы 5 раз в день, я думаю, что он скоро начнет скучать по велосипеду.

другой важный момент: в тесте 2 у вас нет значения по умолчанию, что хорошо. потому что кто-то забывает 1 строку, которую вы можете сделать для проверки. с циклической вещью, значение по умолчанию уже будет одним из ответов, что упростит ошибки при вводе.

Если бы я был вами, я бы взял тест 2 и положил неизвестное в нужную сторону, чтобы у вас есть Да, Нет, Неизвестно.

Answer 2

Тест 3 может быть приемлемым, но Test 2 или выбрать окна будет более знакомым большинству пользователей. Я бы пошел только с Test 3, если бы знал, что мои пользователи достаточно хорошо разбираются в технологиях, чтобы обрабатывать пользовательские виджеты. Это просто не похоже на интерактивный ввод.

Answer 3

Добавить обработчик клика на изображение. Нажмите на кнопку «Открыть» с тремя переключателями вместе с изображениями. Когда пользователь выбирает один из переключателей, закройте div и измените изображение в таблице.

Answer 4

Тест 3 кажется хорошим решением для меня. Единственное, что я лично изменил, это значки, красный означает «отменить», а неопределенный - для предупреждений, поэтому они не очень близки к неопределенным/не поддерживаемым концепциям.

Однако, если проблема связана с количеством вариантов, хорошим выбором было бы группировать параметры по категориям и отображать/скрывать каждую группу только тогда, когда пользователь должен взаимодействовать с ними (и вы можете использовать Test2, что более понятно).

Answer 5

Дело Три по-моему есть две большие проблемы

• это не сразу видно пользователю, что иконки изменчива - то есть. Они кнопки
• Вы не можете сразу сказать, что представляют собой значки.

Задача два может быть решена с помощью небольшой области клавиш в нижней части диаграммы, указывающей на то, что означает каждая кнопка. Проблема одна ... немного сложнее.

Два наиболее очевидных решения, которые я могу придумать, - это добавить к ним несколько кликабельных треугольников, которые меняют свои значения при нажатии, чтобы проиллюстрировать, что на самом деле это значение может быть изменено. Другой заключается в том, чтобы добавить большую всплывающую подсказку, которая появится при зависании, предоставив пользователю возможность изменить значение, а также сообщить им, что означает каждый значок.

Выбор здесь в основном сводится к фактическому варианту использования для этого случая. «Случай три» гораздо более «гладко» из-за цветовых кодированных значений за счет слегка уменьшенного удобства использования и немного более крутой кривой обучения.

---

Что касается технических решений, есть много, но если вы хотите случай Два с намного меньшим количеством помех, я бы порекомендовал вам взглянуть на кнопку виджета JQuery UI - он действительно берет торт из чтобы реализовать такие вещи. Посмотрите на это здесь: http://jqueryui.com/demos/button/#radio