Пять звёздочек без JavaScript
Кросс-браузерный вариант реализации механизма рейтинга без использования JavaScript
Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS.
Решение Вадима основано на использовании CSS rollovers, плавающих элементах и z-index
и выглядит очень красиво. Особенно меня впечатлило то, что его решение будет работать с выключенной загрузкой изображений и отключенным CSS. Весьма приятно, ибо о usability отечественные разработчики задумываются далеко не всегда.
Среди недостатков отмечу следующие:
- При использовании IE6 с выключенным JavaScript вся красота перестаёт работать (оффтопик: не могу понять, по каким причинам народ до сих пор сидит на IE6?)
- Некоторое неудобство при изменении шкалы: например, если изменить код так, чтобы можно было учитывать полбалла, то помимо ширин придется менять и
z-index
каждого элементаa
. Хотя, в принципе, это мелочь.
Полгода назад я какое-то работал над проектом myfolio.com, там тоже применялось пятизвёздочное голосование (правда, принцип несколько другой). Считая, что тот подход тоже имеет право жить :-), привожу его здесь.
Разметка очень проста:
<ul class="vote">
<li class="ten"><a href="#rated=10" title="5 stars">5.0</a></li>
<li class="nine"><a href="#rated=9" title="4.5 stars">4.5</a></li>
<li class="eight"><a href="#rated=8" title="4 stars">4.0</a></li>
<li class="seven"><a href="#rated=7" title="3.5 stars">3.5</a></li>
<li class="six"><a href="#rated=6" title="3 star">3.0</a></li>
<li class="five"><a href="#rated=5" title="2.5 stars">2.5</a></li>
<li class="four"><a href="#rated=4" title="2 stars">2.0</a></li>
<li class="three rated"><a href="#rated=3" title="1.5 stars">1.5</a></li>
<li class="two"><a href="#rated=2" title="1 star">1.0</a></li>
<li class="one"><a href="#rated=1" title="0.5 stars">0.5</a></li</span