Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:
1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке
2. Много ненужной и несемантичной html-разметки + javascript.
Недавно при верстке одного проекта мне пришлось столкнуться с подобной задачей. Немного подумав, я выбрала первый вариант по нескольким причинам:
– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;
– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;
– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.
Рейтинг в виде звезд на CSSИтак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.
1. Нам нужны изображения (желательно в спрайте) в виде звезд (солнышек, котят, совят и чего угодно, что вам больше нравится).
2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются и . Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.
3. При выборе того или иного инпута, меняются стили для всех , идущих ниже по разметке (с помощью css селектора ~). Фактически в форме также, как и обычно выбранный radiobutton становится checked.
Звездный рейтинг с завидной частотой встречается почти на всех веб-сайтах. Сегодня мы решили немного поэкспериментировать, и разработать новый подход к созданию звездного рейтинга с использованием небольшого отрывка кода CSS, и совсем не прибегать к коду javascript.
В верстке для звезды используется единица уникода (☆). Если у вас стоит кодировка UTF-8, то здесь не будет проблем. В противном случае вы можете использовать ☆. Вы можете использовать столько звезд, сколько пожелаете:
☆☆☆☆☆
Теперь нам нужно при наведении заменить эту «пустую» звезду «твердой». Вы можете просто создать псевдо элемент твердой звезды (★) поверх нее при событии:hover
Rating > span:hover:before {
content: "2605";
position: absolute;
}
P.S.:
Перед 2605
\
В силу того, что элемент имеет абсолютное позиционирование, мы применяем top: 0; left: 0; (как минимум в новых браузерах). Таким образом, получается, что твердая звездочка сидит прямо поверх пустой. Вы даже можете изменить ее размер или цвет, если пожелаете.
Но тем не менее, то, что есть у нас, работает только с отдельными звездами. Наша структура UX требует того, чтобы все звезды были заполнены. Например, если мы наведем на 4-ю звезду, то не только она должна быть заполнена, но также и 3-я, 2-я и 1-я.
Невозможно посредством CSS выделить предыдущие дочерние элементы. Тем не менее, у нас есть возможность выделить последующие дочерние элементы. Например, посредством смежного или общего родственного комбинатора. Если мы буквально перевернем очередность символов, то сможем использовать общий родственный комбинатор для того, чтобы выделять звезды, расположенные до той звезды, на которую был наведен курсор мыши (так как фактически, в коде HTML будут выделены последующие звезды, просто отображены они у нас в перевернутом порядке).
Rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}
P.S.:
Перед 2605
в указанном коде должен быть слэш \
(редактор данного движка его почему-то съедает.)
И на этом всё! Полноценная UX-структура с использованием чуточки кода. Вот весь код 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;
}
P.S.:
Перед 2605
в указанном коде должен быть слэш \
(редактор данного движка его почему-то съедает.)
Применение на практике
Если вероятность, что javascript все же будет включен в данную структуру. Когда пользователь кликает на звезду, сведения о рейтинге отправляются обратно посредством Ajax, а сам виджет запускает класс для мгновенного отображения выбранного числа звезд. Если javascript уже используется в проекте, не будет ли полезно хотя бы звездный рейтинг организовать без использования данной технологии? Если ваше приложение полноценно зависит от javascript, то не беспокойтесь за работу данного элемента. Если вы заинтересованы в разработке веб-сайта, который будет работать и без javascript, то данный пример реализации как раз подойдет вам. Советуем также взглянуть на от Леа Вероу (Lea Verou), где используются радио-кнопки, что позволяет сделать элемент частью формы, которую можно подтвердить и без применения JS.
В этом уроке мы узнаем о впечатляющих возможностях 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 ; }
Привет всем хабражителям!Взбрело мне как-то, холодным зимним вечером, внести на сайт вместо целых звезд рейтинга - их частичную заливку для дробных чисел (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 для формирования рейтинга в виде звезд .
Основные требования к плагину:
После того, как требования к плагину были разработаны, я приступил к программингу. В результате у меня получился довольно неплохой, как мне кажется, плагин на 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 запроса.