Сегодня речь пойдет о довольно интересном плагине для jQuery, который помогает создавать рейтинги.

Называется он jQuery Star Rating Plugin.

Принцип работы очень простой.

На web странице вы размещаете несколько радиокнопок (radio buttons) и подключаете плагин. После этого ваши кнопки превратятся в звездочки, которые будут менять цвет при наведении мышки на них.

Как это выглядит, смотрите на скриншоте

Уверен, что вы не раз встречали подобную систему на различных сайтах.

Теперь посмотрим, что нужно для работы плагина.

1) Подключить библиотеку jQuery и файлы плагина

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript" type="text/javascript" src="jquery.MetaData.js"></script>
<script language="javascript" type="text/javascript" src="jquery.rating.js"></script>

2) Подключить CSS файл (находится в архиве с плагином)

<link rel="stylesheet" type="text/css" href="jquery.rating.css" />

3) Создать группу радиокнопок

<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>

Звездочек будет столько же, сколько и кнопок.

На данном этапе вы уже получаете вполне работоспособную систему рейтинга.

Но, кроме того, плагин можно довольно гибко настраивать.

Например, можно использовать дробные числа. Т.е. посетитель сможет выделить часть звездочки. Для этого нужно атрибут class задать в виде:

class="star {split:4}"

Цифра 4 указывает, на сколько частей нужно разбить звездочку.

jquery_stars_1

Кроме того, можно сделать так, чтобы по умолчанию было выбрано несколько звездочек. Для этого, просто добавьте атрибут checked="checked" любой радиокнопке.

Если вы хотите использовать свои собственные названия классов, то нужно выполнить следующий код:

$(function(){
    $('input.yourClassName').rating();
});

Также вы можете отключить возможность изменять рейтинг. Для этого используется атрибут

disabled="disabled"

Кстати, очень полезная функция, если вы хотите дать возможность выставлять рейтинги только зарегистрированным пользователям. Остальные смогут видеть только результаты голосования.

Обработка результатов на стороне сервера

Тут нужно помнить один нюанс. Плагин изменяет разметку страницы, т.е. вместо радиокнопок появится скрытое (hidden) поле, которое и будет содержать результат голосования. Имя поля совпадает с именем группы радиокнопок.

Для примера, приведенного в начале этой заметки, поле будет иметь такой вид:

<input type="hidden" value="" name="star1"/>

Как видите, использование плагина требует минимальных усилий с вашей стороны. Естественно, вам придется проверить, чтобы звездочки нормально вписывались в дизайн вашей страницы, но в большинстве случаев это не проблема .

До встречи!

UPD: Тема неожиданно получила продолжение
Big_Shark написал PHP скрипт, предназначенный для создания системы рейтингов (серверная часть), который можно использовать вместе с этим плагином.

Справедливости ради, отмечу, что скрипт нужно немного изменить для использования в конкретном приложении. Т.е. просто скопипастить код не получится.

Но код читается легко и его удобно использовать в качестве основы для собственной реализации.

В общем, если вам интересно качайте архив со скриптом.

Вопросы можно задать автору (Big_Shark[at]mail[точка]ru, icq: 231тире744тире674).

Кроме того, советую почитать комментарии к этому посту.