|
Этой статьей я открываю новый цикл статей об изменении внешнего вида стандартных элементов формы. Я не буду углубляться в дебри объектно-ориентированного JS и расписывать код на 3-4 килобайтах, а попробую сделать все как можно проще и доступнее.
И так, задача заключается в изменении внешнего вида стандартных чекбоксов. Пусть вместо чекбоксов будут простые картинки, имитирующие работу элементов формы.
Код скрипта выглядит следующим образом:
<style>
body { font: 12px verdana }
.no { background: url(cross.gif) no-repeat; padding-left: 22px; height: 22px; cursor: default }
</style>
<body>
<form method="post">
<input type="hidden" id="checkbox1" name="checkbox1" value="0">
<input type="hidden" id="checkbox2" name="checkbox2" value="0">
<input type="hidden" id="checkbox3" name="checkbox3" value="0">
</form>
<div class="no" id="div1" onclick="checked('div1', 'checkbox1')">Element one</div>
<div class="no" id="div2" onclick="checked('div2', 'checkbox2')">Element two</div>
<div class="no" id="div3" onclick="checked('div3', 'checkbox3')">Element three</div>
<script language="JavaScript">
function checked(divs, box) {
var obj = document.getElementById(box);
if (obj.value == 0) ground = "url('tick.gif') no-repeat";
else ground = "url('cross.gif') no-repeat";
document.getElementById(divs).style.background = ground;
obj.value = Math.abs(obj.value - 1);
}
</script>
</body>
Теперь пройдемся подробнее по коду. Все чекбоксы заменяются объектом hidden:
<input type="hidden" id="checkbox1" name="checkbox1" value="0">
<input type="hidden" id="checkbox2" name="checkbox2" value="0">
<input type="hidden" id="checkbox3" name="checkbox3" value="0">
При этом у каждого чекбокса должно быть уникальное имя (checkbox1, checkbox2 и т.д.)
Имитация чекбокса осуществляется при помощи дива:
<div class="no" id="div1" onclick="checked('div1', 'checkbox1')">Element one</div>
Класс "no" подгружает картинку чекбокса в виде фона. Каждый div так же имеет уникальное имя. При нажатии на div происходит обращение к функции checked, в которую передается id данного diva и id чекбокса, к которому привязан данный div:
checked('div1', 'checkbox1')
Функция checked выполняет следующие действия:
1. Проверяет значение данного чекбокса (в нашем случае объекта hidden), и меняет соответствующую картинку в зависимости от того, включен или отключен чекбокс:
var obj = document.getElementById(box);
if (obj.value == 0) ground = "url('tick.gif') no-repeat";
else ground = "url('cross.gif') no-repeat";
document.getElementById(divs).style.background = ground;
2. Присваивает объекту hidden значения переключателя 0 или 1:
obj.value = Math.abs(obj.value - 1);
При этом, если значение obj.value было равно 0, оно изменится на 1 (|-1|) или, если значение было равно 1, ovj.value будет присвоено значение 0.
|
