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

Данный плагин на jQuery для формирования рейтинга в виде звезд.

Возможности плагина:

— Корректный вывод рейтинга (если рейтинг был равен 4.83, то и количество закрашенных звезд должно быть соответствующим).

— Возможность выбора эффекта при наведении курсора мыши на звезду. Это имеется ввиду то, какую оценку пользователь сможет выставлять (при наведение указателя мыши на звезды они должны были закрашиваться либо целыми звездами, либо по пол звезды, либо в абсолютных значениях следуя за указателем мыши).

— Возможность задания своих звезд.

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

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

— Автоматическое склонение результатов голосования (например: 1 голос, 3 голоса, 7 голосов).

— Возможность задать свои существительные для результатов голосования.

— Возможность задавать минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать.

— Возможность выполнить пользовательскую функцию, при клике на звезду.

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

Подключать библиотеку jQuery мы будем с репозитория Google.

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

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

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

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

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

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

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

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

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

Значение данного поля будет передано на сервер вместе с результатом голосования.

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

Настройки плагина

Параметр Значение Описание
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, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.

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

Скачивайте, внедряйте.

 

А у меня на этом все, до новых встреч.

С уважением, Сергей Кривцов


Понравилась статья? Поделитесь с друзьями!

Читайте также на моем блоге:

Подписка на обновления блога: