Blog. Just Blog

Рейтинг на CSS и JavaScript

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Рейтинг на CSS и JavaScript
Рейтинг на CSS и JavaScript

Один из ставших привычным элементов web-страниц - рейтинг. Это может быть средняя пользовательская оценка какой-нибудь статьи, популярность товара или что-нибудь подобное. Обычно рейтинг представляет собой полоску с пятью или десятью звездочками, часть из которых серая, а часть, соответствующая значению рейтинга, - золотистая. Сегодня я расскажу, как сделать отображение такого рейтинга и как он может взаимодействовать с пользователем.

Есть несколько вариантов верстки рейтинга, мне больше всего нравится блок состоящий из двух элементов DIV: фоновый с относительным позиционированием и вложенный с абсолютным позиционированием относительно родительского. Внешний DIV по высоте соответствует высоте изображения одной звездочки, а по ширине точно равен максимальному количеству звездочек, умноженному на их ширину. Так, если отдельное изображение звездочки равно 32х32 пиксела, а максимальная оценка 5 звездочек, то внешний DIV будет иметь размеры 160х32 пикселов. В качестве фона используются серые звездочки, повторяющиеся по горизонтали. Внутренний DIV по высоте также равен высоте изображения, а вот по ширине равен проценту рейтинга. Здесь в качестве фонового изображения используется уже золотая звездочка, также размноженная по горизонтали. Оба изображения звездочек, серая и золотистая, обязательно должны иметь одинаковые размеры и форму.

Такой вариант реализации позволяет отображать "нецелые" звездочки, у которых закрашена только часть изображения. А главное, что он очень прост в реализации. Начнем с описания контейнеров в таблице CSS.
  1. /* внешний контейнер - фон с серыми звездочками */
  2. .rate_background {
  3.     positionrelative;
  4.     width160px;
  5.     height32px;
  6.     background:url('star_gray.png'repeat-x;
  7. }
  8.  
  9. /* внутренний контейнер - полоса рейтинга с золотыми звездочками */
  10. .rate_bar {
  11.     positionabsolute;
  12.     top0px;
  13.     left0px
  14.     height32px
  15.     background:url('star_gold.png'repeat-x;
  16. }
Переходим к верстке. Адепты идеального MVC могут быть недовольны из-за использования inline-стиля, но в данном случае это неизбежный атрибут.
  1. <!-- полоса рейтинга установлена на 35% -->
  2. <div class="rate_background">
  3.     <div class="rate_bar" style="width:35%;"></div>
  4. </div>
Чтобы регулировать значение рейтинга, достаточно просто поменять процент в свойстве width inline-стиля, это число формируется на стороне сервера при компоновке web-страницы. Основная таблица CSS остается неизменной, верстка тоже.

Но просто показывать полосу рейтинга недостаточно, у пользователя должна быть возможность проголосовать и выставить свою оценку. Добавим немного интерактива при помощи скрипта JavaScript. Он будет получать координаты клика на полосе рейтинга и преобразовывать их в значение от 1 до 5, соответствующее оценке пользователя. Это значение затем можно обработать, например, отправить на сервер через AJAX, получить новое значение рейтинга и выставить нужный процент ширины полосы рейтинга.
  1. function set_rate(eventel) {
  2.     // Позиция клика относительно элемента
  3.     event event || window.event;
  4.     if (event.clientX<=el.clientWidth) {
  5.         var rate=Math.ceil(event.clientX/el.clientWidth*5);
  6.  
  7.         // Теперь значение rate от 1 до 5 можно обрабатывать как надо,
  8.         // например, отправить на сервер через AJAX
  9.     }
  10. }
В таблицу стилей в класс rate_background добавим строчку cursor: pointer. Теперь при наведении на полосу рейтинга курсор будет меняться, давая пользователю понять, что здесь можно кликнуть. Верстка остается прежней, только обрамляющему элементу DIV надо назначить обработчик события клика мышкой. Его можно сразу назначить в качестве атрибута или динамически забиндить где-нибудь в скрипте.
  1. <div class="rate_background" onclick="set_rate(arguments[0], this);">
  2.     <div class="rate_bar" style="width:35%;"></div>
  3. </div>
Как верстка, так и обработчик являются кроссбраузерными. При необходимости можно легко дополнить скрипты различными спецэффектами, например, чтобы звездочки автоматически закрашивались при наведении курсора и возвращались в исходное положение при уходе курсора. Это вы можете сделать самостоятельно. Пример демонстрационной страницы с рейтингом можно посмотреть здесь.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 3449 | Комментариев: 4

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
DiPrm (03.11.2017 в 16:41):
Спасибо, статья помогла. Сэкономила время!
ManHunter (27.07.2017 в 14:19):
Никогда не надо использовать jquery. VanillaJS обходит его по всем параметрам.
Иван (27.07.2017 в 14:12):
Спасибо! Очень полезно!
Я тут всю голову уже сломал настраивая jquery raty, и даже в голову не приходил такой простой вариант решения!
Андрей (09.08.2016 в 18:21):
круто

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0053 сек.) / Память: 4.75 Mb
Наверх