Создаем рейтинги с помощью jQuery

Владимир | | HTML, JavaScript, Web разработка.

jquery stars logo

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

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

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

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

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

jquery_stars1

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

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

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

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).

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

  • На днях искал рейтинг в виде звездочек. Пересмотрел большинство JS скриптов. И этот в том числе.
    Мне он не понравился тем, что чтобы сделать отображение половинок звезд, необходимо генерировать в 2 раза больше INPUT Radio-полей. А плавный показатель вообще не возможен. К тому же, нужно играться с картинкой, чтобы нарисовать 3 разные звезды.
    Нашел платный рейтинг, написанный по Prototype и Scriptaculo, в котором цвет звезд задается через CSS, а для шаблона нужна лишь одна картинка PNG. И настроек гораздо больше. Лучшего скрипта не находил еще. Кому интересно, обращайтесь, подскажу ссылочку. Один минус — платная, но понятно почему. Жаль на jQuery такой нет.

    • valera

      Есть!!! А про платный плагин забыть можешь, не разводи людей на бабло!!!!

      • Valera, если я захочу тебя развести на бабло, я сделаю это по другому. Если пишешь комменты, так пиши нормально (а не как ребенок) и не выдавай свое мнение за мнение остальных.
        Дол…ов хватает везде, и вместо того чтобы предлагать что-то хорошее, все как и ты лишь могут посвистеть из подтяжка.

        А плагин называется starbox:
        http://www.nickstakenburg.com/projects/starbox

        • У меня огромная просьба — без оскорблений и переходов на личности. Тут каждый высказывается свое личное мнение.

          И полезные ссылки, даже на платные продукты, всегда приветствуются.

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

  • На днях искал рейтинг в виде звездочек. Пересмотрел большинство JS скриптов. И этот в том числе.
    Мне он не понравился тем, что чтобы сделать отображение половинок звезд, необходимо генерировать в 2 раза больше INPUT Radio-полей. А плавный показатель вообще не возможен. К тому же, нужно играться с картинкой, чтобы нарисовать 3 разные звезды.
    Нашел платный рейтинг, написанный по Prototype и Scriptaculo, в котором цвет звезд задается через CSS, а для шаблона нужна лишь одна картинка PNG. И настроек гораздо больше. Лучшего скрипта не находил еще. Кому интересно, обращайтесь, подскажу ссылочку. Один минус — платная, но понятно почему. Жаль на jQuery такой нет.

    • valera

      Есть!!! А про платный плагин забыть можешь, не разводи людей на бабло!!!!

      • Valera, если я захочу тебя развести на бабло, я сделаю это по другому. Если пишешь комменты, так пиши нормально (а не как ребенок) и не выдавай свое мнение за мнение остальных.
        Дол…ов хватает везде, и вместо того чтобы предлагать что-то хорошее, все как и ты лишь могут посвистеть из подтяжка.

        А плагин называется starbox:
        http://www.nickstakenburg.com/projects/starbox

        • У меня огромная просьба — без оскорблений и переходов на личности. Тут каждый высказывается свое личное мнение.

          И полезные ссылки, даже на платные продукты, всегда приветствуются.

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

  • Кстати, еще один минус данного плагина. Нет возможности передавать данные посредством Ajax. Возможно я не прав, но я не нашел этой функции, что впринципе стало одной из весомых причин отказаться от его использования.
    Пользователи уже не хотят голосовать посредством отправки формы и перезагрузки страницы. Они стали гораздо ленивее 🙂

    • ПитБуль, мне, например, пос*ать на то, что хотят пользователи, мне надо модерировать их голоса, именно поэтому я хочу отказаться от голосования «на лету» на своем сайте.
      P.S. Жаль, что скрипт платный ((((;

    • Сергей

      Кстати да, отправить форму с помощью ajax не составляет труда, вам не нужно отправлять форму после того как пользователь поставил рейтинг. Форму нужно отправить после того как пользователь ввел свой комментарий и поставил рейтинг, а после нажал на кнопку отправить. Поэтому тут вы не правы, что плагину звезд нужна отправка, абсолютно она ему не нужна. А если уже нужна можно сделать по onChange или onClick вашу функцию по отправки формы.

  • Кстати, еще один минус данного плагина. Нет возможности передавать данные посредством Ajax. Возможно я не прав, но я не нашел этой функции, что впринципе стало одной из весомых причин отказаться от его использования.
    Пользователи уже не хотят голосовать посредством отправки формы и перезагрузки страницы. Они стали гораздо ленивее 🙂

    • ПитБуль, мне, например, пос*ать на то, что хотят пользователи, мне надо модерировать их голоса, именно поэтому я хочу отказаться от голосования «на лету» на своем сайте.
      P.S. Жаль, что скрипт платный ((((;

  • Если есть необходимость в плавном показателе, то ИМХО лучше использовать слайдер. Где-то видел такую JS библиотеку (по-моему ссылка на Хабре была).

    Нет возможности передавать данные посредством Ajax

    По большому счету этому плагину безразлично как вы передаете данные. Он просто создает скрытое поле с результатами. Вы спокойно можете отправить данные из этого поля с помощью Ajax. После получения ответа сервера нужно будет заблокировать возможность голосования (disabled=»disabled») и выделить звездочки, которые отметил посетитель (checked=»checked»).

    Кстати, серверный скрипт должен сам проверять голосовал посетитель или нет, на JS надежную защиту от повторных голосований сделать невозможно.

    P.S. А ссылочку хотелось бы увидеть 🙂

  • Если есть необходимость в плавном показателе, то ИМХО лучше использовать слайдер. Где-то видел такую JS библиотеку (по-моему ссылка на Хабре была).

    Нет возможности передавать данные посредством Ajax

    По большому счету этому плагину безразлично как вы передаете данные. Он просто создает скрытое поле с результатами. Вы спокойно можете отправить данные из этого поля с помощью Ajax. После получения ответа сервера нужно будет заблокировать возможность голосования (disabled=»disabled») и выделить звездочки, которые отметил посетитель (checked=»checked»).

    Кстати, серверный скрипт должен сам проверять голосовал посетитель или нет, на JS надежную защиту от повторных голосований сделать невозможно.

    P.S. А ссылочку хотелось бы увидеть 🙂

  • Big_Shark

    Мне кажеться для рейтинка использовать плагин вариант не очень хороший ведь он пишеться за 30 минут.
    Если есть желания могу написать как создать свой рейтинг и привязать его с новостям допустим!

    • Big_Shark

      Всмысли система рейтинга пишеться 30 минут

      • Тут я не согласен. 30 минут уйдет только на тестирование. А если нужно сделать действительно уникальную систему (картинки, может быть оригинальные эффекты), то времени уйдет гораздо больше.

        К тому же если jQuery уже используется, то плагин — это хороший вариант, т.к. будет использовать код основной библиотеки.

        • Big_Shark

          в примере который я вам прислал можно использовать тоже разные элементы если уметь верстать ) там проста список LI у которого каждый элемент это звездочка которую ты подсвечиваеш при наведении курсора через свойства :hover
          P.S.Я тестирования не когда не считаю)

        • Спасибо за пример. Правда я думал речь идет только о JS без PHP

        • Big_Shark

          Наоборот скажем так я написал серверную часть скрипта ) а какую пользовательскую часть использовать пускай каждый решает сам!

        • Если вы не против я могу выложить ваш скрипт в качестве дополнения к этому посту.
          Только нужны контактные данные (email у меня есть) может ссылку на сайт? Чтобы читатели знали кому вопросы задавать 🙂

        • Big_Shark

          Я не против) Сайта нету есть только емаил и ася 231-744-674

        • Готово 😉

        • Big_Shark

          Спасибо!

        • Quest_quest_91

          DURBEK RULIT

  • Big_Shark

    Мне кажеться для рейтинка использовать плагин вариант не очень хороший ведь он пишеться за 30 минут.
    Если есть желания могу написать как создать свой рейтинг и привязать его с новостям допустим!

    • Big_Shark

      Всмысли система рейтинга пишеться 30 минут

      • Тут я не согласен. 30 минут уйдет только на тестирование. А если нужно сделать действительно уникальную систему (картинки, может быть оригинальные эффекты), то времени уйдет гораздо больше.

        К тому же если jQuery уже используется, то плагин — это хороший вариант, т.к. будет использовать код основной библиотеки.

        • Big_Shark

          в примере который я вам прислал можно использовать тоже разные элементы если уметь верстать ) там проста список LI у которого каждый элемент это звездочка которую ты подсвечиваеш при наведении курсора через свойства :hover
          P.S.Я тестирования не когда не считаю)

        • Спасибо за пример. Правда я думал речь идет только о JS без PHP

        • Big_Shark

          Наоборот скажем так я написал серверную часть скрипта ) а какую пользовательскую часть использовать пускай каждый решает сам!

        • Если вы не против я могу выложить ваш скрипт в качестве дополнения к этому посту.
          Только нужны контактные данные (email у меня есть) может ссылку на сайт? Чтобы читатели знали кому вопросы задавать 🙂

        • Big_Shark

          Я не против) Сайта нету есть только емаил и ася 231-744-674

        • Готово 😉

        • Big_Shark

          Спасибо!

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

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

  • Блин, очень классно выглядит — просто супер на самом деле. )

  • Блин, очень классно выглядит — просто супер на самом деле. )

  • danko-13

    ппц. Вот уж воистину говнокод! Убери этот PHP скрипт отсюда. Не порть впечатление.

    • Big_Shark

      Скрипт очень устарел и написан максимально проста для ознакомления.
      Вы думаете если его написать как модель к CI с использованием active record и будет лучше?
      Скрипт в основном представлен для того чтобы понять по какому алгоритму делать голосование.

    • danko-13, если бы вы привели какие-нибудь конкретные примеры, то было бы интереснее 😉

  • danko-13

    ппц. Вот уж воистину говнокод! Убери этот PHP скрипт отсюда. Не порть впечатление.

    • Big_Shark

      Скрипт очень устарел и написан максимально проста для ознакомления.
      Вы думаете если его написать как модель к CI с использованием active record и будет лучше?
      Скрипт в основном представлен для того чтобы понять по какому алгоритму делать голосование.

    • danko-13, если бы вы привели какие-нибудь конкретные примеры, то было бы интереснее 😉

  • Готовое решение и бесплатное Скачать

  • Готовое решение и бесплатное Скачать

  • Olya

    мне понравилось

  • Stellam3

    И где архив с файлами?

    • Ссылка на архив в конце статьи

      • Stellam3

        нашла, спасибо

        • Stellam3

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

        • Нужно установить для радиокнопок класс class=»star» и подключить JS и CSS файлы как показано в начале в статьи.

        • Stellam3

          спасибо ОГРОМНОЕ и еще вопрос, как убрать кнопку отменить/удалить «Cancel Rating»? она первая идет перед звездочками

        • Используйте свойство readOnly
          $('input').rating('readOnly',true)

        • Валерий Захаров

          откройте «jquery.rating.js»
          найдите строку «// Create 'cancel' button»

          после неё удаляете всё, что в rater.append();

        • Вобщем-то так не получится, т.к. там создается объект control.cancel, к которому скрипт обращается в дальнейшем. Если все удалить — объект не будет создан, что приведет к краху скрипта (версия 3.1.3).

          Рабочий метод:

          // Create 'cancel' button rater.append(    control.cancel = false;
          );

        • Хм.. Не совсем рабочий оказывается.
          Чтобы все работало: удаляем все между одинарными кавычками в строке:
          control.cancel = ….
          Должно получиться так:
          control.cancel = $(»)
          Все остальное оставляем без изменений.

  • Спасибо !!! Использовал. AJAX свой сервер свой ! Все кошерно =)

  • Валерий Захаров

    Не перестаю удивляться, почему сам, кто работает с подобного рода вещами не может написать вразумительно как работать с этой самой вещью. Какие-то сказки про поле hidden заставили полчаса потратить на то, чтобы найти адекватный способ получения результатов на клиентской стороне. 

    никакого дополнительного поля не генерируется. контролы просто скрываются, а на их место суется


    0
    1
    2
    3

    и чтобы получить по JQuery результат нажатия по звездочке надо 
    обращаться так: 
    $('.star').live('click', function(){alert($('[name=star1]:checked').val());});

    не просто [name=star1], а [name=star1]:checked, по-другому говоря: выбранный input, который скрыт. А не просто какой-то волшебный hidden, в котором записаны результаты. 

    • Обратите внимание на дату статьи. Вы уверены, что работаете с актуальной на тот момент версией плагина 😉

      • Валерий Захаров

        я уверен, что в построении html-код  ничего не поменялось

        • Не буду спорить. Искать старую версию нет никакого желания )
          Просто я плохо представляю себя предумывающим принцип работы плагина, когда мог просто скопировать html разметку из firebug 😉

  • Недавно была необходимость в создании собственного плагина на jQuery для рейтинга в виде звезд. Если кому-то интересно то вот ссылка http://biznesguide.ru/coding/156.html

  • serjcat@gmail.com

    Вариант jquery рейтинга) http://divhack.com/node/74

  • Nik Goncharov

    Не сочтите за спам,но я запарился я искать полностью рабочий рейтинг,поэтому пришлось купить этот:

    Купить Ajax Динамический звездный рейтинг PHP MySQL
    http://freeload.org.ua/1516578.html

    Цена: Всего 2.5$

    Полностью рабочий рейтинг!
    Установка в 3 шага!
    Купил-Доволен!
    Рекомендую.
    Удачи Всем!

  • Alexandr Pupkin

    Не работает в DLE 9.4 с стандартной библиотекой джиквери. Если обновить библиотеку то работает, но перестает работать длешный аякс!