Как сделать рейтинг звездочками css

Звездный рейтинг на CSS

Звездный рейтинг является классическим элементом интерфейса пользователя. Любому веб мастеру хотя бы раз приходилось иметь дело со "звездочками". В данном уроке представлена идея, как сделать интерфейсную часть рейтинга без JavaScript несколькими строчками кода CSS.

Звездный рейтинг на CSS

demosourse

В разметке используется символ юникода звезда (?). Если вы устанавливаете для своих документов кодировку UTF-8, то все должно пройти без проблем. В качестве альтернативы можно использовать ☆. Можно устанавливать столько звезд, сколько захочется:

Далее нужно преобразовать "пустую" звезду в "заполненную" при наведении курсора мыши (поискать такой символ можно на сайте Gallery). легко решается путем размещения псевдо-элемента с "заполненной" звездой (?) сверху для псевдо-класса :hover:

Просто абсолютно позиционируем элемент, по умолчанию в большинстве браузеров используются свойства top: 0; left: 0; . Поэтому "заполненная" звезда попадает поверх "пустой" звезды. Можно также изменить цвет.

Но так мы имеем дело только с одной звездой. А правила шаблон интерфейса требуют, чтобы все звезды были "заполнены". Например, если курсор мыши наволится поверх 4-й звезды, то все 4-е звезды должны стать "заполненными", то есть 1-я, 2-я, 3-я и 4-я.

В CSS нет способа для выбора предыдущих дочерних элементов. Но есть способ выбрать последующие дочерние элементы с помощью комбинаторов соседних элементов. Если мы изменим порядок символов, то затем сможем использовать общий комбинатор соседних элементов для выбора всех звезд, которые стоят перед звездой с фокусом ввода визуально , но после нее в структуре документа HTML .

Получаем работающий шаблон. Вот полный код:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/star-ratings/
Перевел: Сергей Фастунов
Урок создан: 10 Февраля 2012
Просмотров: 46784
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Рейтинг в виде звезд на CSS

Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:

1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке

2. Много ненужной и несемантичной html-разметки + javascript.

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

– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;

– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;

– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.

Рейтинг в виде звезд на CSS

Итак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.

1. Нам нужны изображения (желательно в спрайте) в виде звезд (солнышек, котят, совят и чего угодно, что вам больше нравится).

2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются <input type=&#8221;radio&#8221;/> и <label>. Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.

3. При выборе того или иного инпута, меняются стили для всех <label>, идущих ниже по разметке (с помощью css селектора

). Фактически в форме также, как и обычно выбранный radiobutton становится checked.

Кроссбраузерность: точно работает в Chrome 29, Firefox 23.0.1, Opera 16.0, Safari 5.1.7, IE 8+. Проверялось с помощью Javascript на предмет правильности выбора оценки.

Скрипт рейтинга со звездочками

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

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

Для демонстрации работы предлагаемого нами скрипта звездного рейтинга, сделанного при использовании jQuery, обратите внимание на рейтинг со звездочками, расположенный ниже:

При перемещении курсора мышки по звездочкам, они визуально показывают текущее значение рейтинга данного параметра в соответствии с текущим положением курсора мышки. Справа от звездочек показывается текущее значение рейтинга данного параметра.

При клике по звездочкам какого-либо параметра значение текущего параметра рейтинга будет зафиксировано. При повторном клике — значение рейтинга данного параметра вновь будет можно изменять. При клике по кнопке "Отправить!", произойдет передача общей оценки на сервер для ее сохранения и дальнейшей обработки.

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

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

< div id = "rating" >
< div class= "param" > Параметр 1 :</ div >
< div >< div class= "stars" ></ div >< p class= "progress" id = "p1" ></ p ></ div >
< div class= "rating" id = "param1" > 5.0 </ div >

< div class= "param" > Параметр 2 :</ div >
< div >< div class= "stars" ></ div >< p class= "progress" id = "p2" ></ p ></ div >
< div class= "rating" id = "param2" > 5.0 </ div >

< div class= "param" > Параметр 3 :</ div >
< div >< div class= "stars" ></ div >< p class= "progress" id = "p3" ></ p ></ div >
< div class= "rating" id = "param3" > 5.0 </ div >

< div class= "param" > Общая оценка :</ div >
< div >< div id = "sum_stars" ></ div >< p id = "sum_progress" ></ p ></ div >
< div id = "summ" > 5.00 </ div >

< input id = "el_999" type = "submit" value = "Отправить!" >
< p id = "message" ></ p >
</ div >

Обращаем Ваше внимание на то, что el_999 — уникальный идентификатор того, что мы будем оценивать! Для каждой темы (комментария или товара), данный идентификатор должен иметь свое цифровое значение, например, el_1 или el_123.

Далее в шапку сайта между тегами <head> и </head> для такого же отображения рейтинга Вам необходимо добавить следующие стили оформления:

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

Звездный рейтинг

Теперь остается добавить JavaScript код, который будет отвечать за заполнение звездочек, изменение рейтинга, вычисление суммы рейтинга и отправку общего рейтинга на сервер:

< script type = "text/javascript" >
$( document ). ready (function() <
function move ( e , obj ) <
var summ = 0 ;
var id = obj . next (). attr ( ‘id’ ). substr ( 1 );
var progress = e . pageX — obj . offset (). left ;
var rating = progress * 5 / $( ‘.stars’ ). width ();
$( ‘#param’ + id ). text ( rating . toFixed ( 1 ));
obj . next (). width ( progress );
$( ‘.rating’ ). each (function()< summ += parseFloat ($( this ). text ()); >);
summ = summ / $( ‘.rating’ ). length ;
$( ‘#sum_progress’ ). width ( Math . round ($( ‘.stars’ ). width () * summ / 5 ));
$( ‘#summ’ ). text ( summ . toFixed ( 2 ));
>

$( ‘#rating .stars’ ). click (function( e ) <
$( this ). toggleClass ( ‘fixed’ );
move ( e , $( this ));
>);

$( ‘#rating .stars’ ). on ( ‘mousemove’ , function( e ) <
if ($( this ). hasClass ( ‘fixed’ )== false ) move ( e , $( this ));
>);

$( ‘#rating [type=submit]’ ). click (function() <
summ = parseFloat ($( ‘#summ’ ). text ());
jQuery . post ( ‘change_rating.php’ , <
obj_id : $( this ). attr ( ‘id’ ). substr ( 3 ),
rating : summ
>, notice );
>);

function notice ( text ) <
$( ‘#message’ ). fadeOut ( 500 , function()< $( this ). text ( text ); >). fadeIn ( 2000 );
>
>);
</script>

Для хранения оценок, отправленных на сервер выше приведенным JavaScript кодом, Вам понадобится в MySQL создать таблицу votes:

Для хранения рейтинга и количества проголосовавших, в MySQL в таблице, которая содержит то, что оценивается (будь то тема, комментарий или товар), добавьте два столбца: points с типом данных float и votes с типом данных int.

В нашем примере мы будем оценивать рейтинг темы и таблица будет называться themes.

Для обработки полученных результатов на сервере и занесения их в MySQL, создайте файл change_rating.php и добавьте в него следующий код:

<? php
if ( is_numeric ( $_POST [ "obj_id" ])) $obj = $_POST [ "obj_id" ];
else $obj = » ;
if ( $_POST [ "rating" ]>= 0 and $_POST [ "rating" ]<= 5 ) $ocenka = $_POST [ "rating" ];
else $ocenka = » ;

if ( $ocenka != » and $obj > 0 ) <
$time = $_SERVER [ ‘REQUEST_TIME’ ];
$ip = $_SERVER [ ‘REMOTE_ADDR’ ];
$db = mysqli_connect ( "localhost" , "Логин" , "Пароль" , "Имя_БД" ) or die();
$res = mysqli_query ( $db , "DELETE FROM votes WHERE date<" .( $time — 604800 ));
$res = mysqli_query ( $db , "SELECT count(id) FROM votes
WHERE id_product green">. $obj . " and ip=INET_ATON(‘" . $ip . "’)" );
$number = mysqli_fetch_array ( $res );
if ( $number [ 0 ]== 0 ) <
$res = mysqli_query ( $db , "INSERT INTO votes (date,id_product,ip,rating)
values (" . $time . "," . $obj . ",INET_ATON(‘" . $ip . "’)," . $ocenka . ")" );
$res = mysqli_query ( $db , "UPDATE themes
SET points=(points+" . $ocenka . "),votes=(votes+1) WHERE id green">. $obj . " LIMIT 1" );
echo ‘Спасибо, Ваш голос учтен!’ ;
>
else echo ‘Вы уже сегодня голосовали!’ ;
>
?>

Данный скрипт звездного рейтинга довольно прост в установке и поможет Вам лучше узнать мнение Ваших посетителей об оцениваемых параметрах указанных Вами объектах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *