Если Вы постоянный читатель моего блога, то возможно уже успели заметить, что я изменил рейтинг для статей.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 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 запроса.
Взбрело мне как-то, холодным зимним вечером, внести на сайт вместо целых звезд рейтинга - их частичную заливку для дробных чисел (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. Довольны были все: и дизайнеры, и заказчики, и даже мое Эго, что и побудило накатать статью.
Для отображения звезды будем использовать десятичный код символа звезды в HTML, а именно: ☆ .
HTML ☆☆☆☆☆Нам потребуется, при наведении мышки на соответствующую звездочку, впихнуть в "полую" звезду сплошную желтую звезду. Легко: просто положите сплошную звезду, используя псевдоэлемент, поверх полой звезды.
CSS .rating > span:hover:before { content: "\2605"; position: absolute; }Абсолютно позиционируем сплошную звезду и, таким образом, наша звезда закроет собой полую звезду.
Но пока у нас все работает только для каждой конкретной звезды. А наша задача, для лучшего взаимодействия с пользователем, заполнять все звезды (исходя из того, на какую звезду наведет мышку). Например, если пользователь наведет мышку на 4-ю звезду, то необходимо отобразить 4 звезды, если на 5, то 5 и т.д.
Посредством CSS нет возможности выбрать предыдущий соседний элемент. Однако есть способ выбрать следующие дочерние элементы, через .
Если мы буквально перевернем символы в обратном порядке (в этом нам поможет сниппет - ), то затем мы сможем использовать родственный комбинатор, чтобы выбрать все звезды, которые появляются перед звездой, на которую наведена мышь, но после в HTML.
CSS .rating { unicode-bidi: bidi-override; direction: rtl; } .rating > span:hover:before, .rating >Вот мы и создали дружелюбный к пользователю шаблон звездного рейтинга при использовании небольшого кода. Ниже приведен полный код CSS для работы рейтинга:
CSS .rating { unicode-bidi: bidi-override; direction: rtl; } .rating > span { display: inline-block; position: relative; width: 1.1em; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: "\2605"; position: absolute; } Фактическое использованиеВероятнее всего, без участия javascript обойтись не получится. Когда пользователь кликает по звезде, ajax отправляется запрос к серверу и виджет получает класс, через который отображается выбранное количество звезд. Неужели нельзя опереться на javascript, если он повсеместно используется на сайте, для реализации такой звездной системы? Если ваше приложение полностью зависит от javascript, то такой вариант безусловно подойдет. Но, если ваш сайт должен работать и без использования javascript, то для такого звездного рейтинга потребуется гораздо больше работы. Вы можете посмотреть пример Lea Verous, который использует радио-кнопки, как часть формы, и где не используется javascript.
Всех приветствую в очередном уроке по интересной теме 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"
Некоторые из этих установок, как Вы можете заметить, я уже использовал в своем скрипте, обратите на это внимание! Если Вам что то станет не понятно, Вы можете написать в комментарии. Спасибо за внимание, удачи всем в разработке!
Все началось с того, что я решил изменить рейтинг для заметок на своем блоге.
Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 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, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.
Вот такой вот универсальный плагин для вывода рейтинга заметок в виде звезд у меня получился.
Посмотреть демо можно
