HTML-радио-кнопки в стиле Toggle Buttons

Question

Вместо обычных дисков с метками справа, я хочу, чтобы опции были представлены в виде нажимаемых кнопок. Выбранный параметр должен отображаться для нажатия или нажатия.

Я хочу сделать это в HTML, но примером этого являются левые верхние кнопки в программе Audacity, где вы выбираете режим курсора / инструмента.

Какой лучший способ сделать это?

_{(источник: freemusicsoftware.info )}

Answer 1

Для этого есть несколько плагинов JavaScript:

• Прототип демо

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

Answer 2

Вероятно, лучший способ - создать реальную кнопку-переключатель, а затем управлять рендерингом элемента на основе состояния переключателя с помощью javascript. Если выбран переключатель, выполните рендеринг background-a, иначе background-b (или используйте спрайт). Управляйте состоянием переключателя с помощью события click вашего пользовательского элемента.

Answer 3

Используя этот плагин пользовательского интерфейса jQuery , вы можете настроить переключатели и / или флажки, чтобы они выглядели так, как вам хочется.