Webamator Blog

Простой рейтинг бар со звездами
MENU
Home » Сайтостроителю » Простой рейтинг бар со звездами

Простой рейтинг бар со звездами

Я люблю простые решения, ведь зачастую простота означает надежность, а надежность является для меня наивысшим приоритетом.
Однажды для одного из проектов мне понадобился рейтинг-бар, состоящий из звезд. Основные требования – минимум кода, без подключамы файлов яваскрипт или шрифтов, но с возможностью процентного показа. Т.е. если всего имеем 5 звезд, а рейтинг, например, 4.75, то бар должен это отобразить.
Дополнительные требования – легкая кастомизация (например изменение цвета) и возможность добавления микроформатов – куда же без них…
Погуглив, я не нашел ничего подходящего под мои требования, готовые решения либо были основаны на яваскрипт, либо не отображали процентное значение, либо не поддавались кастомизации.

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

Простой рейтинг бар, пример

Хтмл-код – всего 82 символа включая пробелы, и никакого яваскрипт, никаких дополнительных шрифтов вроде fa.

<span class="stars-bar-rating"><em style="width: 4.75%;"> </em><strong> </strong></span>

и css

.stars-bar-rating {
	display:block;
	width:114px;
	height:25px;
	background: #aaa;
	}
.stars-bar-rating i {
	display:block;
	height:25px;
	overflow:hidden;
	background: #fe9100;
	}
.stars-bar-rating b {
	display:block;
	margin-top:-25px;
	width:114px;
	height:25px;
	overflow:hidden;background:  url('img/stars-bar-bg.png') no-repeat;
	}

Принцип действич очень простой – имеем елемент i, которій является шкалой рейтинг бара. Цвет его фона будет цветом наших звезд, при необходимости можно использовать градиент. А сверху просто накладываем елемент b с фоном из прозрачных звезд.

Простой рейтинг бар, бекграунд

А чтобы использовать микроформат schema.org, просто добавьте несколько елементов с параметрами itemprop=”ratingValue” и itemprop=”reviewCount”

4.75 stars, based on 4 reviews

Popularity: 18%

Добавлено 23 августа 2016
Рубрика: Сайтостроителю
Метки:

Если данный пост показался вам полезным или интересным, нажмите на одну из кнопок ниже - от vkontakte, facebook, tweeter или google+, чтобы о нем узнали ваши друзья. Спасибо!

Нет комментариев

No comments yet.

RSS feed for comments on this post.

Leave a comment