Не работают звезды в рейтинге. Звездный рейтинг с применением небольшого кода CSS. Итак, переходим к созданию звездного рейтинга
В этой статье рассмотрим, как к статьям сайта добавить звёздный рейтинг.
Добавление данного функционала в систему 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]]
` ]] Привет всем хабражителям!Взбрело мне как-то, холодным зимним вечером, внести на сайт вместо целых звезд рейтинга - их частичную заливку для дробных чисел (4.5, 3.85 и тд.). Так ведь и глазу милее и информативнее - какое заведение лучше, а какое - хуже. Вот и сели мы с командой думать и гадать.
Как мы путь свой искали Так как у нас, в основном, топовые заведения и рейтинги 3+, то целые звезды сильно размывают восприятие. Но тут возникли нюансы. Самая распространенная практика - использовать наложение изображения одно поверх другого. С самого-самого начала мы думали сделать все с помощью изображения-маски, но, увы, дизайн не подразумевал, что звездочки могут быть рядом, а контролировать ширину блока заливки и размер звезды не очень удобно.
Тут у Кинопоиска все 10 звезд - одна картинка, где они еще и приклеены друг к другу. Так им очень легко закрасить оранжевым на столько, на сколько душа желает.
.starbar .outer { background: url(/images/starz.gif) no-repeat; width: 219px; height: 30px; position: absolute; } .starbar_w { display: block; width: 167.09px; background: url(/images/starz.gif) 0 -62px no-repeat; height: 30px; position: absolute; } Всегда есть где разгуляться! Всё же, нам хотелось универсальный и масштабируемый вариант, полностью подчиняющийся BEM методологии . К тому же, в проекте нет ни одного спрайта и все иконки реализованы с помощью собственного набора иконок, бережно собранного в шрифт. Но, думаю, об этом мы поговорим в других статьях;)
В целом, мы пришли к эксперименту: а почему бы не наложить нашу шрифтовую иконочку поверх другой? Вот мы и сделали.
Каждую звездочку сделали отдельным объектом, состоящей из .stars__out в качестве контейнера и .stars__in в качестве заливки.
А вот и CSS:
Cfi.cfi--star { /* ... */ } /* наш аналог Font Awesome, который рисует звезду */ .stars__out { position: relative; margin-right: 5px; /* сделаем отступ между зведами */ color: grey; z-index: 1; } .stars__in { /* разместим ка мы нашу заливку как дочернюю основной иконки и кинем поверх */ position: absolute; z-index: 2; color: orange; /* дадим солнечного цвета */ font-size: inherit; /* и шрифту размер родителя */ /* блоку дадим точки отчета по нулям относительно родителя */ display: block; top: 0; left: 0; bottom: 0; /* ну и ограничим область видимости, а также ширину установим в 0 по умолчанию */ overflow: hidden; width: 0; }
Все. Дальше, когда нам нужно залить на 100% (полная звездочка), мы просто даем ей CSS свойство width: 100%
.
А вот для неполных звездочек мы использовали еще одну хитрость. Мы ставим в ширину не x * 100%
, а значение по специально рассчитанной формуле.
Все дело в психологии. Нам свойственно визуально воспринимать процент заполнения в объеме, а не в ширине, а поскольку звезда слева и справа имеет весьма малую площадь, что усложняет восприятие, мы придумали заполнять ее по ширине нелинейно:
Для нелинейной модели мы взяли синусоиду. Она как раз отлично описывает быстрое начало и окончание роста, и плавный рост в середине.
Развернули ее, получив arсsin, ужали его в рамки {0; 1} по обеим осям и получили неплохую и простую формулу для расчета «психологической заполненности» звезды.
Код на JavaScript:
var y = Math.asin(2 * x - 1) / Math.PI + 0.5;
Как оказалось, такой принцип хорошо работает в старых браузерах, и даже ничего не ползет на IE9. Довольны были все: и дизайнеры, и заказчики, и даже мое Эго, что и побудило накатать статью.
Все началось с того, что я решил изменить рейтинг для заметок на своем блоге.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.
Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд.
Основные требования к плагину:
- Рейтинг должен был выводиться корректно, т. е. если у меня рейтинг был равен 4.78, то и количество закрашенных звезд должно быть соответствующим.
- Возможность выбора эффекта при наведении курсора мыши на звезду. Это имеется ввиду то, какую оценку пользователь сможет выставлять. т. е. при наведение указателя мыши на звезды они должны были закрашиваться либо целыми звездами, либо по пол звезды, либо в абсолютных значениях следуя за указателем мыши
- Возможность задания своих звезд
- Возможность указать URL на который будет отправлен результат голосования
- Возможность указать количество звезд выводимых в рейтинге
- Автоматическое склонение результатов голосования. (Например: 1 голос, 2 голоса, 5 голосов)
- Возможность задать свои существительные для результатов голосования
- Возможность задавать минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
- Возможность выполнить пользовательскую функцию, при клике на звезду
После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на jQuery для рейтинга заметок в виде звезд, которым я с радостью поделюсь с Вами.
Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.
window.jQuery || document.write("");
Данный код необходимо разместить между тегами на Вашем сайте.
О том, для чего необходимо подключать jQuery с репозитория Google можно почитать .
Также для корректной работы плагина, необходимо подключить следующие стили:
Все это Вы найдете в исходниках.
После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:
Теперь к этому элементу можно вызвать плагин следующим образом:
$("div.rating").rating();
В данном случае будет вызван плагин с настройками по умолчанию, в результате чего будет создано 5 не закрашенных звезд.
Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с классом val, которое будет содержать значение Вашего рейтинга:
Если теперь вызвать плагин, то будет создан следующий рейтинг:
После того, как пользователь кликнет по нужной звезде, рейтинг автоматически пересчитается (изменится количество закрашенных звезд) с учетом сделанного выбора, а также изменится количество голосов.
Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер, то для идентификации рейтинга используется еще одно скрытое поле ввода с классом vote-id:
Значение данного поля будет передано на сервер вместе с результатом голосования. Таким образом вы сможете идентифицировать рейтинг и обновить значение нужного Вам рейтинга!
Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!
| fx | float | Эффект при наведении курсора мыши на звезду.
|
| image | путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны . Иначе рейтинг будет выводится не корректно |
|
| width | 32 | Ширина одной звезды |
| stars | 5 | Количество выводимых звезд в рейтинге |
| titles | [ "голос", "голоса", "голосов" ] |
Массив существительных, которые будут выводится для учета голосов |
| readOnly | false | Режим работы рейтинга. По умолчанию равен — false. Если установить в true, то не будет возможности проголосовать |
| minimal | 0 | Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать |
| url | Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования |
|
| type | post | Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get |
| loader | Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер |
|
| click | Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя |
Формат вывода пользовательских сообщений
Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.
Но чаще всего прежде чем обновить рейтинг, необходимо проверить, голосовал ли этот человек за эту статью или нет. И в том случае если человек уже проголосовал за эту заметку, то в браузере пользователя необходимо вывести предупреждение и не обновлять значение рейтинга и количество проголосовавших.
Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:
Если status будет равен значению - OK, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.
Вот такой вот универсальный плагин для вывода рейтинга заметок в виде звезд у меня получился.
Посмотреть демо можно
Доброго времени суток дамы и господа. С помощью этой статьи я хотел бы познакомиться с вами, а заодно опробовать себя в качестве автора. А для того чтобы это знакомство не проходило зря, мы рассмотрим с вами некоторые варианты создания инструмента для оценки чего либо. В интернете прижился такой визуальный элемент как “звездочки”:
К примеру:
Хотя в последнее время все больше используются оценочные инструменты со сторонних сервисов, например “лайки” от Facebook"a или от Вконтакте, которые позволяют оценить материал только в положительном ключе. Хорошо это или плохо, мы с вами решим как - нибудь в другой раз, а сейчас давайте рассмотрим несколько вариантов реализации традиционных “звездочек”.
Для начала нам необходимо само изображение звезды, причем желательны еще ее состояние для наведения, и активное состояние. Для этого я нарисовал вот такую звездочку, ну и сразу объединил ее в в спрайт.
После этого мы можем перейти к самой верстке.
Обычный рейтингНачнем мы пожалуй с самого простого: 5 целых звезд, при наведении также должно меняться состояние у предыдущих. Семантически пожалуй наиболее подходит упорядоченный список. Почему именно упорядоченный? Тут все просто, звездочки имеют свой “вес”: от одного до пяти (ну или сколько у вас там зведочек:)).
Итак структура простая:
Давайте сразу подумаем как же мы можем выделить предыдущие элементы списка при наведении на один из них. Наверняка многие знают о css селекторе “~”. Для тех кто не знает, он позволяет выбрать всех последующих соседей, т.е. работает как +, но с оговоркой на “всех”. Но как он нам поможет? Ведь нам надо выбрать предыдущие элементы, а не следующие... Тут мы применим нам нашу смекалку и отсортировав элементы списка в обратном порядке применим к ним float: right. В итоге мы получим следующую структуру:
Rating { list-style: none; margin: 0; padding: 0; width: 100px; height: 20px; } .rating li { display: block; width: 20px; height: 20px; float: right; /* обтекание по правой стороне как раз необходимо для выстравания элементов в обратном порядке */ text-indent: -9999px; /* скрываем текст */ cursor: pointer; background: url("stars.png"); }
Теперь необходимо добавить стили для состояния наведения:
Rating li:hover, .rating li:hover ~ li { background-position: 0 -20px; }
Вторая строка и меняет фон для всех предыдущих элементов (но последующих по DOM - дереву).
Ну и конечно дописать чуть стилей:
Rating li.active, .rating li.active ~ li { background-position: 0 -40px; }
Но это не сильно информативно, и лучше отображать рейтинг в процентах. Добавим еще один элемент к списку, который будет видно только когда у списка есть определенный класс - в нашем случае .show-current . Окончательная структура списка приобретает следующий вид:
Для того чтобы наши звездочки ожили, приправим все это небольшим количеством JS"a:
Var $rating = $(".rating"); $rating.on("mouseover", function() { $(this).removeClass("show-current"); }).on("mouseleave", function() { $(this).addClass("show-current"); }); $("li", $rating).on("click", function() { alert("User selected " + $(this).text()); //Тут естественно может (и должен) располагаться более сложный код, например отправка результата голосования с помощью ajax на сервер и последующая отрисовка результата голосования });
Для использования на продакшене можно конечно еще произвести ряд оптимизаций:
изначально установить ширину в 0 пикселей
добавить css-transition собственно для анимации средствами браузера
с некоторой задержкой через js задавать текущую ширину
картинку можно через data:URL включить в css, тем самым избавившись от лишнего HTTP запроса
Конечно можно придумать еще некоторые улучшения, но пусть это будет уже на вашей совести.
"Половинчатый" рейтингТакже часто можно увидеть когда звездочки не целые, а поделены на двое. Для создания такого рейтинга можно использовать ту же технику, но прийдется поправить стили с оговоркой на “половинчатость”. Все описывать не буду, просто приведу окончательную структуру и стили с некоторыми комментариями.
Стили же уже посложнее:
Li { display: block; width: 10px; height: 20px; float: right; text-indent: -9999px; cursor: pointer; background: url("img/stars.png") no-repeat; } li.current { display: none; } ul.show-current{ position: relative; } ul.show-current li { cursor: default; } ul.show-current li.current { position: absolute; top: 0; left: 0; display: block; width: 0; background-position: 0 -60px; background-repeat: repeat-x; } ul.show-current li.current:hover, ul.show-current li.current:hover ~ li { background-position: 0 -60px; } ul.show-current li.current span { display: block; height: 20px; width: 0; background: inherit; background-position: 0 -40px; } /* нечетные элементы */ li:nth-child(odd) { background-position: -10px 0; } /* четные при наведении и все предыдущие четные*/ li:nth-child(even):hover, li:nth-child(even):hover ~ li:nth-child(even){ background-position: 0 -20px; } /* четные при наведении и все предыдущие нечетные*/ li:nth-child(even):hover ~ li:nth-child(odd){ background-position: -10px -20px; } /* нечетные при наведении и все предыдущие нечетные*/ li:nth-child(odd):hover, li:nth-child(odd):hover ~ li:nth-child(odd) { background-position: -10px -20px; } /* нечетные при наведении и все предыдущие четные*/ li:nth-child(odd):hover ~ li:nth-child(even) { background-position: 0 -20px; }
Поддержка в браузерах:
Все современные браузеры, плюс:
- Обычный рейтинг - >= IE8
- Половинчатый рейтинг - >= IE9 (из-за использования:nth-child)
Ну вот и все пожалуй, что я хотел рассказать. Это естественно не единственный вариант реализации, в сети вы можете найти множество других. Из основных можно выделить 2 способа: основанный на инпутах и вариант с заданием стилей для каждой отдельной звезды, но я думаю и мой вариант имеет право на жизнь (особенно после смерти IE8). До встречи.
ps. (в репозитории вы можете найти less - версию css"a)
Всех приветствую в очередном уроке по интересной теме JQuery рейтинг звездочки , такое уж название, которое более точно, по моему мнению должно описывать данный скрипт. И так, прежде всего давайте начнем с того, зачем нужен рейтинг и смысл его использования на сайтах. Ну, во-первых, это социальный статус отклика на какой-либо материал, вызывающий интерес с хорошей или плохой стороны. Во-вторых, это оценка и скажем так, мини опрос, интересна ли вообще данная тематика или нет. В-третьих, как на нашем сайте, уровень сложности темы, правда тут мы уже исходим из сложности именно для новичков, заметьте, а не из сложности для опытных разработчиков, так такового просто им данные материалы могут быть и в принципе не интересны, за исключением лишь получить готовый скрипт. Поэтому, лично для меня, рейтинг это оценка тому материалу, который вызвал интерес. К примеру, Вы заинтересовались покупкой мобильного телефона или еще чего-нибудь другого, зашли на какой-нибудь интернет-магазин и по рейтингу можете оценить его популярность, в этом кроется и социальный статус популярности товара.
Теперь поговорим в целом о скрипте и о моих идеях. По сути я решил разбить скрипт на две части, думаю многим будет интересна как первая часть, так и вторая, но не стал их объединять, а выпустить в двух разных статьях. Во-первых, потому что обе части получатся вместе довольно таки весомыми, а во-вторых, хотелось бы увидеть Ваши комментарии, а может советы или вопросы, по поводу второй части, а в-третьих, во второй части уж точно будет использоваться не только JQuery . В общем, в первой части я хочу Вам сделать повествование на сайт где можно взять JQuery плагин данного скрипта, а во второй части, занесения рейтинга при нажатии на звездочку в базу данных без перезагрузки. Поэтому, если Вам будет интересна вторая часть, жду лайков и комментариев.
Ну и так, начнем. Для начала Вы должны обязательно посетить официальный сайт данного плагина и скачать его. Ну а также, внимательно изучить документацию, по настройке самого плагина и его оптимизации для нормальной работы скрипта. После ознакомления, у Вас должен быть файл jquery.raty.js , по возможности jquery.raty.css , если он требуется и картинки по умолчанию, их всего три. Опять же скажу, это все по умолчанию и по стандарту!
Первая часть. Подключение файлов js и css. HTML. Картинки.
По стандарту, подключаем файл стилей demo.css и требуемую библиотеку для работы jquery.min.js , плагин jquery.raty.js и наш скрипт raty.js .
После в корень скрипта, добавляем три картинки, которые идут по умолчанию: star-on.png - полный рейтинг, star-off.png - отсутствует рейтинг, star-half.png - рейтинг на половину. Если же у Вас имеются свои картинки и Вы хотите их использовать, то можете создать к примеру, как я сделал. Я создал папку img и туда загрузил две картинки: rating_activ.png - активная звездочка, rating_passiv.png - не активная звездочка.
Теперь, давайте, перейдем к HTML коду. И сразу хочу отметить, что у нас будут опубликованы только три примера по стандарту, все остальные Вы сможете найти на официальном сайте, который указан в источнике материалов.
Первый пример.
При нажатии на звездочку, сразу же появляется окно, вызванное методом alert() , в котором мы можем увидеть на какую звездочку мы нажали и какой рейтинг выбрали.
Второй пример.
При нажатии на звездочку, также подсчитывается рейтинг. Для демонстрации были установлены мои картинки, в виде звездочек, которые находятся в папке img .
Третий пример.
Стоит заметить, что при нажатии все звездочки сохраняются, в том рейтинге, как Вы их нажали, но не в базу данных, а в клиентской части. Поэтому, я решил сделать обсуждение на счет второй части, где возможна разработка полноценного сохранения рейтинга и подсчета кликов в общем. То есть, общий рейтинг будет храниться в базе данных.
Вторая часть. JQuery.
Теперь можем ознакомиться с JQuery частью по теме рейтинг звездочки . Опять же возьмусь за формулировку, что у нас рассматриваются только три примера, которые являются как бы стандартными.
Как они работают, что, как и почему, я уже описал подробно выше, поэтому остановлюсь только на деталях, которые могут быть Вам не понятны.
$(document).ready(function(){ $(".rate1").raty({ click: function(score, evt) { alert("ID: " + this.id + "\nscore: " + score); } }); $(".rate2").raty({ number: 10, starOff: "img/rating_passiv.png", starOn: "img/rating_activ.png" }); $(".rate3").raty({ number: 4, target: ".name", hints: ["очень плохо", "плохо", "нормально", "хорошо", "очень хорошо"], }); });
Под классом rate1 , мы запускаем функцию с параметрами score и evt . В первом из которых, мы получаем методом alert() название, а во-втором ID , выбранного нами рейтинга. Под классом rate2 , мы устанавливаем номер количества выводимых звездочек, а вернее их будет десять и делаем применимость картинок не по умолчанию, а своих, где starOff - является звездочкой не активной, а StarOn - активной. Под классом rate3 , мы устанавливаем номер количества выводимых звездочек и скрываем из общего показа звездочку по умолчанию - очень плохо , устанавливая общее значение статусов равное пяти.
Третья часть. Библиотека jquery.raty.js.
Обсудим вкратце, сам плагин. Если Вам данная тематика уж очень станет интересна или Вы не сможете полноценно с ней разобраться, тогда мы будем разбирать это отдельно и детально, может после второй части, если она будет, или может отдельной частью для плагина. Ну честно говоря, достаточно даже почитать немного документацию и все сразу станет понятно. Основной момент, на что стоит обратить внимание, так это на установки по умолчанию.
Cancel: false, cancelClass: "raty-cancel", cancelHint: "Cancel this rating!", cancelOff: "cancel-off.png", cancelOn: "cancel-on.png", cancelPlace: "left", click: undefined, half: false, halfShow: true, hints: ["bad", "poor", "regular", "good", "gorgeous"], iconRange: undefined, mouseout: undefined, mouseover: undefined, noRatedMsg: "Not rated yet!", number: 5, numberMax: 20, path: undefined, precision: false, readOnly: false, round: { down: 0.25, full: 0.6, up: 0.76 }, score: undefined, scoreName: "score", single: false, space: true, starHalf: "star-half.png", starOff: "star-off.png", starOn: "star-on.png", starType: "img", target: undefined, targetFormat: "{score}", targetKeep: false, targetScore: undefined, targetText: "", targetType: "hint"
Некоторые из этих установок, как Вы можете заметить, я уже использовал в своем скрипте, обратите на это внимание! Если Вам что то станет не понятно, Вы можете написать в комментарии. Спасибо за внимание, удачи всем в разработке!
