Создание рейтинга в виде звезд с использованием только CSS. Как мы звезды рейтинга дробили Звездный рейтинг

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

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

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

Что может заинтересовать посетителя и задержать его на сайте? 1. Контент:

• Интересные статьи.
• Удобные сервисы по теме сайта.
• Тематические изображения и видео в статьях.

2. Доверие к автору и сайту:

• Информация о сайте и авторе – страница автора.
• Возможность связаться с автором – форма для контактов, email или телефон.

3. Поощрение активности пользователей:

• Возможность выразить свое мнение о статье или оценить ее:
  • оставить комментарий и получить ответ на него.
  • поставить лайк или добавить ссылку на статью на свою страницу в социальной сети – кнопки социальных сетей.
  • поставить прямую оценку материалу – рейтинг.
• Голосования на различные темы.
• Подарки читателям и пользователям, конкурсы и акции.

4. Красивый дизайн и удобный в использовании сайт.

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

А шансов на то, что пользователь кликнет на сниппет со звездами намного больше, так что с их помощью мы сможем увеличить СТР (кликабельность) страниц в выдаче.

Наличие рейтинга на сайте, также, может помочь ему попасть в РСЯ (рекламная сеть Яндекса) – ее модераторы всегда обращают внимание на дополнительные сервисы ресурса.
Как правило, рейтинги создают при помощи плагина WP-PostRatings.

Не буду спорить, плагин этот очень функциональный и позволяет реализовать самые разные рейтинги, но при этом, он:

Сильно тормозит загрузку сайта.

Конфликтует со многими другими плагинами, например плагином увеличения изображений по клику, который также работает на технологии Ajax.

Итак, переходим к созданию звездного рейтинга: ↓ Скачать скрипт рейтинга сайтов можно по ссылке ниже

Уже скачали 288 раз(а)

Открыть ↓

Для разблокировки содержимого, введите код из последнего, присланного вам письма.

После распаковки архива, вы получите папку ratings и файлы:

Functions.php,
- footer.php,
- single.php и
- style.css.

Папку ratings нужно добавить в папку с вашей темой.

А код из файлов functions.php, footer.php, single.php и style.css перенести, соответственно, в файлы functions.php, footer.php, single.php и style.css вашей темы.

В functions.php и footer.php – в начало файла, в style.css – в конец файла.

В single.php после тега

Другие теги микроразметки для статей можно посмотреть на http://schema.org/Article и добавить те, которые вам нужны.

После этого пост, с добавленным к нему рейтингом, можно проверить в валидаторе микроразметки:
Google - https://developers.google.com/structured-data/testing-tool/ и
Яндекса - http://webmaster.yandex.ua/microtest.xml .

Напоследок, предлагаю посмотреть вебинар по выводу сайтов из АГС при помощи контента, создающего добавочную стоимость.

Всех приветствую в очередном уроке по интересной теме 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"

Некоторые из этих установок, как Вы можете заметить, я уже использовал в своем скрипте, обратите на это внимание! Если Вам что то станет не понятно, Вы можете написать в комментарии. Спасибо за внимание, удачи всем в разработке!

Доброго времени суток дамы и господа. С помощью этой статьи я хотел бы познакомиться с вами, а заодно опробовать себя в качестве автора. А для того чтобы это знакомство не проходило зря, мы рассмотрим с вами некоторые варианты создания инструмента для оценки чего либо. В интернете прижился такой визуальный элемент как “звездочки”:

К примеру:

Хотя в последнее время все больше используются оценочные инструменты со сторонних сервисов, например “лайки” от 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 на сервер и последующая отрисовка результата голосования });

Для использования на продакшене можно конечно еще произвести ряд оптимизаций:

картинку можно через data:URL включить в css, тем самым избавившись от лишнего HTTP запроса

• изначально установить ширину в 0 пикселей

  добавить css-transition собственно для анимации средствами браузера

  с некоторой задержкой через js задавать текущую ширину

Конечно можно придумать еще некоторые улучшения, но пусть это будет уже на вашей совести.

"Половинчатый" рейтинг

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

Стили же уже посложнее:

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)

Для отображения звезды будем использовать десятичный код символа звезды в 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.