By: Vladimir

Vladimir — Fri, 30 May 2008 23:31:16 +0000

Любителям семантической вёрстки посвящается…

Если говорить о семантике, то, все-таки, необходимо использовать input type=”radio”

Отмечу сразу: я против

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

Во-вторых, из-за того, что появится много лишнего JavaScript: нам по сути нужно будет обработать три ситуации:

Загрузка изображений отключена: мы не должны менять внешний вид формы (из-за usability): изображений нет, а превращать элементы в progress bar в данном случае будет отвратительным решением;
JavaScript отключен: в этом случае пользователь должен видеть кнопку “Проголосовать”
Изображения и JavaScript отключены: самый крайний, но вероятный случай. На мой взгляд, мы в этом случае не должны вообще пытаться изменить стили формы: если картинки отключены, то пользователь увидит не пойми что

Ладно, теперь от слов переходим к делу.

Разметка:

Стили (примечание: если требуется поддержка IE6, используйте whatever:hover):

.vote, .vote label.rated {
background: url(stars.gif) no-repeat 0 0;
}

html>body .vote label:hover, html>body .vote:hover label:hover {
background: url(stars.gif) no-repeat 0 0;
}

* html body .vote label:hover { /* For IE6 w/whatever:hover */
background: url(stars.gif) no-repeat 0 0 !important;
}

.vote {
background-position: 0 -14px;
position: relative;
}

.vote:hover label.rated {
background: none !important; /* !important is for IE6 w/whatever:hover */
}

.vote label {
height: 14px;
position: absolute;
text-indent: -1000px;
z-index: 2;
overflow: hidden;
}

.vote, .vote label {
left: 0;
top: 0;
margin: 0;
padding: 0;
}

.vote label.one { width: 7px; }
.vote label.two { width: 16px; }
.vote label.three { width: 23px; }
.vote label.four { width: 32px; }
.vote label.five { width: 39px; }
.vote label.six { width: 48px; }
.vote label.seven { width: 55px; }
.vote label.eight { width: 64px; }
.vote label.nine { width: 71px; }
.vote label.ten { width: 80px; }

.vote input {
visibility: hidden;
}

.vote label input {
visibility: visible;
width: 0;
}

И, наконец, JavaScript (я использую Prototype; кому что ближе):

var img = new Image();
img.onload = function()
{
$('vote').addClassName('vote').select('input[type="radio"]').invoke('observe', 'click', function(e) { e.element().form.submit(); } );
}

img.src = 'stars.gif';

Результат.

Внимание: я не тестировал пример во всех браузерах, поэтому кросс-браузерность гарантировать не могу.

Проверено в IE6/7, FF, Opera, Konqueror.

Замечания:

Для того, чтобы код работал в IE6, метки (label) должны иметь атрибут for, связывающий их с соответствующей радиокнопкой.
Опять же, из-за IE6 радиокнопки не должны иметь visibility: hidden или display: none. Их нужно либо сдвинуть за label, либо, как в примере, поставить нулевую ширину. Если скрывать label, то обработчик должен вешаться не на input[type="checkbox"], а на label, и код в этом случае немного усложнится.
При медленном соединении/компьютере возможны гонки между whatever:hover и img.onload(). Для правильной работы img.onload() должен сработать первым.

Comments on: Пять звёздочек без JavaScript

By: Vladimir