Звездный рейтинг jquery. Создание рейтинга в виде звезд с использованием только CSS. Все это Вы найдете в исходниках
Если Вы постоянный читатель моего блога, то возможно уже успели заметить, что я изменил рейтинг для статей.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.
Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд .
Основные требования к плагину:
После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на jQuery для рейтинга заметок в виде звезд , которым я с радостью поделюсь с Вами.
Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.
window.jQuery || document.write("");
Данный код необходимо разместить между тегами на Вашем сайте.
О том, для чего необходимо подключать jQuery с репозитория Google можно почитать .
Также для корректной работы плагина, необходимо подключить следующие стили:
Все это Вы найдете в исходниках.
После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:
Теперь к этому элементу можно вызвать плагин следующим образом:
$("div.rating").rating();
В данном случае будет вызван плагин с настройками по умолчанию, в результате чего будет создано 5 не закрашенных звезд.
Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с именем name="val" , которое будет содержать значение Вашего рейтинга:
Если теперь вызвать плагин, то будет создан следующий рейтинг:
После того, как пользователь кликнет по нужной звезде, рейтинг автоматически пересчитается (изменится количество закрашенных звезд) с учетом сделанного выбора, а также изменится количество голосов.
Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер , то для идентификации рейтинга используется еще одно скрытое поле ввода с именем name=" vote-id":
Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!
Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!
| fx | float |
Эффект при наведении курсора мыши на звезду.
|
| image |
путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны . Иначе рейтинг будет выводится не корректно |
|
| stars | 5 | |
| minimal | 0 | Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать |
| titles | [ "голос", "голоса", "голосов" ] |
Массив существительных, которые будут выводится для учета голосов |
| readOnly | false | |
| url |
Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования |
|
| type | post |
Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get |
| loader |
Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер |
|
| click |
Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя |
|
| callback |
callback-функция. Вызывается при успешном завершении AJAX-запроса. На вход принимает один парамет response - ответ сервера |
Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.
Но чаще всего прежде чем обновить рейтинг, необходимо проверить, голосовал ли этот человек за эту статью или нет. И в том случае если человек уже проголосовал за эту заметку, то в браузере пользователя необходимо вывести предупреждение и не обновлять значение рейтинга и количество проголосовавших.
Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:
Если status будет равен значению - OK , то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.
Вот такой вот универсальный плагин для вывода рейтинга заметок в виде звезд у меня получился.
О том, как создать обработчик рейтинга в виде звезд я писал в этой статье.
Если Вам пригодился этот плагин, то можете поблагодарить меня в комментариях ниже. Так я буду знать, что мои труды не напрасны.
Если есть предложения по улучшению данного плагина или вопросы, прошу писать в комментариях.
Надеюсь Вы сочтете его полезным для себя!
Обновление от 14.03.2012:
- Все скрытые поля, которые Вы добавите в контейнер с рейтингом, будут автоматически передеваться на сервер.
- Убрал параметр width . Теперь ширина одной звезды определяется автоматически.
- Добавил callback-функцию , которая вызывается при успешном завершении AJAX запроса.
В этом уроке мы узнаем о впечатляющих возможностях CSS и создадим рейтинг в виде звездочек на чистом CSS. К сожалению, в некоторых старых браузерах на движке Webkit из-за неправильной работы с родственными и соседними селекторами этот рейтинг не будет работать. Но во всех современных браузерах он работает отлично.
При создании рейтинга у нас возник вопрос, можно ли не использовать в нем JavaScript вообще, ограничившись только CSS. И это возможно. С помощью способа создания специальных радиокнопок с использованием CSS, созданного Ryan Seddon , можно превратить несколько радиокнопок в звезды, меняющие цвет, в нашем уроке это просто символы юникода, которые меняют цвет, но можно использовать и изображения, и использовать родственные и соседние селекторы для задания цвета звездам.
Для создания рейтинга в виде звезд нередко используются радиокнопки, так что разметка может не показаться Вам необычной. Единственное, что нужно сделать иначе, - это обратный порядок расположения звезд: наивысший рейтинг должен идти первым из-за особенностей работы селекторов CSS3, это ограничение может быть убрано в CSS4, но до этого еще далеко.
Конечно, JavaScript понадобится для присвоения обработчика событий, если результаты голосования нужно зарегистрировать с помощью AJAX, но это не относится к самому рейтингу, который может работать как часть обычной формы.
В браузерах, которые не поддерживают псевдокласс:checked (отмечено), особенно Internet Explorer ниже версии 9, рейтинг должен отображаться как радиокнопки, но мы не проверяли.
Итак, вот что получается:
Код HTML
Please rate: 5 stars 4 stars 3 stars 2 stars 1 star
Код CSS
Rating { float:left ; } /* Конструкция:not(:checked) работает как фильтр, чтобы браузеры, которые не поддерживают псевдокласс:checked не применяли эти свойства. Все браузеры, поддерживающие псевдокласс:checked, поддерживают и псевдокласс:not(), так что фильтр должен отработать правильно. */ .rating :not (:checked ) > input { position:absolute ; top:-9999px ; clip:rect (0 ,0 ,0 ,0 ) ; } .rating :not (:checked ) > label { float:right ; width:1em ; padding:0 .1em ; overflow:hidden ; white-space:nowrap ; cursor:pointer ; font-size:200 %; line-height:1 .2 ; color :#ddd ; text-shadow:1px 1px #bbb , 2px 2px #666 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; } .rating :not (:checked ) > label:before { content : "★ " ; } .rating > input:checked ~ label { color : #f70 ; text-shadow:1px 1px #c60 , 2px 2px #940 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; } .rating :not (:checked ) > label:hover , .rating :not (:checked ) > label:hover ~ label { color : gold; text-shadow:1px .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; } .rating > input:checked + label:hover , .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover , .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label { color : #ea0 ; text-shadow:1px 1px goldenrod, 2px 2px #B57340 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ; } .rating > label:active { position:relative ; top:2px ; left:2px ; }
Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:
1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке
2. Много ненужной и несемантичной html-разметки + javascript.
Недавно при верстке одного проекта мне пришлось столкнуться с подобной задачей. Немного подумав, я выбрала первый вариант по нескольким причинам:
– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;
– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;
– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.
Рейтинг в виде звезд на CSSИтак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.
1. Нам нужны изображения (желательно в спрайте) в виде звезд (солнышек, котят, совят и чего угодно, что вам больше нравится).
2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются и . Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.
3. При выборе того или иного инпута, меняются стили для всех , идущих ниже по разметке (с помощью css селектора ~). Фактически в форме также, как и обычно выбранный radiobutton становится checked.
В этой статье рассмотрим, как к статьям сайта добавить звёздный рейтинг.
Добавление данного функционала в систему CMS MODX Revolution осуществим посредством дополнения FiveStarRating .
Дополнение FiveStarRatingFiveStarRating - это дополнение, добавляющее в систему MODX Revolution элементы, с помощью которых можно осуществить фронтенд оценку ресурсов с помощью звёздочек.
Установка дополнения FiveStarRatingДополнение FiveStarRating расположено в репозитории modx.com.
Его установку в систему MODX Revolution можно осуществить на странице "Управление пакетами".
Использование дополнения FiveStarRating
Подключение звёздной оценочной системы к ресурсу осуществляется посредством помещения вызова сниппета SimpleRating в шаблон или контент ресурса.
[[!SimpleRating]]
Параметры сниппета SimpleRating:
- &id - id ресурса, для которого необходимо вывести рейтинг (по умолчанию текущий).
- &tpl - чанк, содержащий HTML разметку звёздного рейтинга (по умолчанию tplSimpleRating).
Пример вызова сниппета SimpleRating с указанием id ресурса:
[[!SimpleRating? &id = `3` ]]
Пример вызова сниппета SimpleRating с указанием имени чанка:
[[!SimpleRating? &tpl = `tplSimpleRating1` ]]
Сниппет SimpleRating выполняет следующие действия:
- регистрирует нужные стили и скрипты на фронтенде;
- получает рейтинг текущего или указанного ресурса и выводит его на страницу;
- устанавливает рейтинг активным или нет, в зависимости от того оценил уже этот ресурс пользователь или нет.
Отправка оценки осуществляется через ajax. Обработку ajax-запроса на сервере выполняет файл action.php . Данный файл проверяет возможность оценки ресурса данным пользователем, выполняет установку рейтинга (запись необходимой информации в базу данных) и возвращает результат. После получения результата от action.php сценарий JavaScript отображает его на странице.
Защита от накрутки оценки осуществляется посредством LocalStorage и IP адреса.
При необходимости защиту по IP адресу можно отключить. Осуществляется это посредством установки системному параметру simplerating_ip значения "Нет".
Вывод ресурсов с самым большим рейтингом
В качестве заключения рассмотрим, как можно вывести на страницу 10 ресурсов с самым высоким рейтингом. Для выполнения этой задачи воспользуемся сниппетом pdoResources из пакета pdoTools .
[[!pdoResources? &loadModels=`simplerating` &parents=`0` &innerJoin=`{ "SimpleRating": { "class":"SimpleRating", "on": "modResource.id = SimpleRating.resource" } }` &sortby = `{"SimpleRating.rating_value":"DESC"}` &select=`{ "modResource":"id,pagetitle", "SimpleRating":"rating_value" }` &tpl=`@INLINE
[[+id]]. [[+pagetitle]] - [[+rating_value]]
` ]]
