JavaScript » Скрипты радио/чекбоксов


19 апреля 2008 от admin
До сих пор оформление чекбоксов (или радиобоксов) было достаточно ограниченным в силу того, что это "системные" элементы. Хочу представить вам два скрипта, эмулирующих чекбокс/радиобокс. В отличие от стандартного форм html, в них можно применять практически любую графику, что открывает дизайнерам новые возможности в плане оформления управляющих элементов.

В первом скрипте ничего сложного нету - стандартный системный чекбокс делаем невидимым:
style.display = "none"
а вместо него показываем картинку.
Посмотреть его в действии можно здесь.
Скачать готовый исходник с подробными комментариями можно отсюда.

Второй вариант реализован в качестве класса php, что делает его гораздо более удобным в применении.
Посмотреть пример в действии можно здесь.
Скачать можно отсюда.

Инструкция по эксплуатации:
до генерации html-кода инклюдим класс radiobutton.php
<?include radiobutton.php;
$chk = new radiobutton('aqua.png', 16, 16);?>
перед тегом STYLE пишем:
<?=$chk->JS();?>
между тегами STYLE вставляем:
<?=$chk->css()?>
в теле html, после BODY вызываем:
<?=$chk->box(name, id, value, checked, enabled)?>

Ограничения для оформления сняты - теперь вы можете использовать абсолютно любую графику.
P.S.
Не переусердствуйте, много графики не всегда есть гуд :)