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

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

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

Такой вариант реализации позволяет отображать "нецелые" звездочки, у которых закрашена только часть изображения. А главное, что он очень прост в реализации. Начнем с описания контейнеров в таблице CSS.Переходим к верстке. Адепты идеального MVC могут быть недовольны из-за использования inline-стиля, но в данном случае это неизбежный атрибут.Чтобы регулировать значение рейтинга, достаточно просто поменять процент в свойстве width inline-стиля, это число формируется на стороне сервера при компоновке web-страницы. Основная таблица CSS остается неизменной, верстка тоже.

Но просто показывать полосу рейтинга недостаточно, у пользователя должна быть возможность проголосовать и выставить свою оценку. Добавим немного интерактива при помощи скрипта JavaScript. Он будет получать координаты клика на полосе рейтинга и преобразовывать их в значение от 1 до 5, соответствующее оценке пользователя. Это значение затем можно обработать, например, отправить на сервер через AJAX, получить новое значение рейтинга и выставить нужный процент ширины полосы рейтинга.В таблицу стилей в класс rate_background добавим строчку cursor: pointer. Теперь при наведении на полосу рейтинга курсор будет меняться, давая пользователю понять, что здесь можно кликнуть. Верстка остается прежней, только обрамляющему элементу DIV надо назначить обработчик события клика мышкой. Его можно сразу назначить в качестве атрибута или динамически забиндить где-нибудь в скрипте.Как верстка, так и обработчик являются кроссбраузерными. При необходимости можно легко дополнить скрипты различными спецэффектами, например, чтобы звездочки автоматически закрашивались при наведении курсора и возвращались в исходное положение при уходе курсора. Это вы можете сделать самостоятельно. Пример демонстрационной страницы с рейтингом можно посмотреть здесь.

Комментарии

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

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

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