Использование кнопок в качестве полевых входов вместо выпадающего меню / переключателей / флажков.

Question

В моей форме есть поле с 7 возможными значениями.Вместо того, чтобы использовать выпадающее меню или флажки, я хотел бы отображать данные на кнопках, аналогично форме заявления на сайте Quirky.com, в частности, поле «Выбрать категорию» (https://www.quirky.com/ideas/new).

Это плагин jquery?

Снимок экрана здесь: http://i.stack.imgur.com/qwVEX.png

Answer 1

Используйте стандартные теги HTML-форм, а затем конвертируйте их в кнопки.Это лучше, так как, если JavaScript отключен, пользователь все равно сможет использовать форму.Это «постепенная деградация».

Если параметры являются взаимоисключающими, используйте переключатели.Если нет, используйте флажки.

Код для такой техники можно найти в http://msdn.microsoft.com/en-us/scriptjunkie/ff756526 и http://theodin.co.uk/blog/design/fancy-radio-buttons-jquery.html.

Answer 2

Насколько мне известно, для этой конкретной функции нет специального плагина, однако это будет очень легко сделать с помощью jQuery. Просто создайте поле (текстовое поле будет в порядке) для хранения значения, которое вы хотите отправить, а затем создайте 7 кнопок. Создайте простую функцию JavaScript, чтобы установить значение вашего текстового поля в зависимости от того, какая кнопка нажата. Viola!

Функция может выглядеть примерно так:

<script type="text/javascript">
function setValue(button){
$('#idOfTextBox').val(button.attr('name'));

$('.classOfButton').removeClass('selected');
button.addClass('selected');

return false;
}
<script>

Редактировать: изменения скрипта Вы заметите, что я добавляю и удаляю классы из кнопки и ее кнопок. Таким образом, вы можете выбрать стиль, который выбран. Кроме того, я использую атрибут «имя» кнопки в качестве значения в текстовом поле.