Генератор форм

Для веб-мастера

Реклама

Плагин на jQuery для вывода рейтинга в виде звезд

Рейтинг:
Дата: 15 ноября 2011 Просмотры 48228 Комментарии 123
Плагин на jQuery для вывода рейтинга в виде звезд

Если Вы постоянный читатель моего блога, то возможно уже успели заметить, что я изменил рейтинг для статей.

Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.

Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд.

Основные требования к плагину:

  1. Рейтинг должен был выводиться корректно, т. е. если у меня рейтинг был равен 4.78, то и количество закрашенных звезд должно быть соответствующим.
  2. Возможность выбора эффекта при наведении курсора мыши на звезду. Это имеется ввиду то, какую оценку пользователь сможет выставлять. т. е. при наведение указателя мыши на звезды они должны были закрашиваться либо целыми звездами, либо по пол звезды, либо в абсолютных значениях следуя за указателем мыши
  3. Возможность задания своих звезд
  4. Возможность указать URL на который будет отправлен результат голосования
  5. Возможность указать количество звезд выводимых в рейтинге
  6. Автоматическое склонение результатов голосования. (Например: 1 голос, 2 голоса, 5 голосов)
  7. Возможность задать свои существительные для результатов голосования
  8. Возможность задавать минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
  9. Возможность выполнить пользовательскую функцию, при клике на звезду

После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на jQuery для рейтинга заметок в виде звезд, которым я с радостью поделюсь с Вами.

Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>

<script type="text/javascript" src="js/jquery.rating.js"></script>

Данный код необходимо разместить между тегами <head></head> на Вашем сайте.

О том, для чего необходимо подключать jQuery с репозитория Google можно почитать здесь.

Также для корректной работы плагина, необходимо подключить следующие стили:

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

Все это Вы найдете в исходниках.

После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:

<div class="rating"></div>

Теперь к этому элементу можно вызвать плагин следующим образом:

$('div.rating').rating();

В данном случае будет вызван плагин с настройками по умолчанию, в результате чего будет создано 5 не закрашенных звезд.

Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с именем name="val", которое будет содержать значение Вашего рейтинга:

<div class="rating">
    <input type="hidden" name="val" value="2.75"/>
</div>

Для того, чтобы рядом с рейтингом вывести количество голосов, внутрь нашего элемента, необходимо добавить еще одно скрытое поле для ввода с именем name=" votes":

<div class="rating">
   <input type="hidden" name="val" value="2.75"/>
   <input type="hidden" name="votes" value="2"/>
</div>

Если теперь вызвать плагин, то будет создан следующий рейтинг:

Рейтинг заметок в виде звезд

После того, как пользователь кликнет по нужной звезде, рейтинг автоматически пересчитается (изменится количество закрашенных звезд) с учетом сделанного выбора, а также изменится количество голосов.

Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер, то для идентификации рейтинга используется еще одно скрытое поле ввода с именем name="vote-id":

<div class="rating">
   <input type="hidden" name="val" value="2.75"/>
   <input type="hidden" name="votes" value="2"/>
   <input type="hidden" name="vote-id" value="voteID"/>
</div>

Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!

Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!

Название параметра Значение по умолчанию Описание
fx float

Эффект при наведении курсора мыши на звезду.

  • float — При наведении курсора мыши, звезды будут закрашиваться постепенно, следую за указателем мыши
  • half - При наведении курсора мыши, звезды будут закрашиваться постепенно по пол звезды
  • full - При наведении курсора мыши будет закрашиваться целая звезда
image  

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

рейтинг заметок в виде звезд

В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны. Иначе рейтинг будет выводится не корректно

stars 5

Количество выводимых звезд в рейтинге

minimal 0 Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
titles [
'голос',
'голоса',
'голосов'
]

Массив существительных, которые будут выводится для учета голосов

readOnly false

Режим работы рейтинга. По умолчанию равен — false. Если установить в true, то не будет возможности проголосовать

url  

Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования

type post

Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get

loader  

Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер

click  

Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя

callback  

callback-функция. Вызывается при успешном завершении AJAX-запроса. На вход принимает один парамет response - ответ сервера

Формат вывода пользовательских сообщений

Если данные рейтинга передаются на сервер, то результат данной операции может быть выведен пользователю.

Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.

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

Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:

{'status': 'OK','msg': 'Спасибо. Ваш голос учтен'}

или же

{'status': 'ERR','msg': 'Вы уже голосовали за эту статью'}

Если  status будет равен значению - OK, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.

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

О том, как создать обработчик рейтинга в виде звезд я писал в этой статье.

Если Вам пригодился этот плагин, то можете поблагодарить меня в комментариях ниже. Так я буду знать, что мои труды не напрасны.

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

Надеюсь Вы сочтете его полезным для себя!

Не забываем поделиться данным постом с друзьями, используя ссылки ниже!

Обновление от 14.03.2012:

  • Все скрытые поля, которые Вы добавите в контейнер с рейтингом, будут автоматически передеваться на сервер.
  • Убрал параметр width. Теперь ширина одной звезды определяется автоматически.
  • Добавил callback-функцию, которая вызывается при успешном завершении AJAX запроса.
Оцените эту статью:



Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Простая CRM

Нашли ошибку в тексте

Система Orphus
https://biznesguide.ru/coding/156.html
4,1 из 5 на основе 1313 оценок.