вторник, 28 октября 2014 г.

Рейтинг со звездочками

Для того, чтобы начислять рейтинг каким-либо товарам либо компаниям будем использовать только html и css (т.е. всё будет происходить без js).

Вся реализация выглядит таким образом:
<?
$star= $data[$i]["reiting"] * 20;
<div class='one_fifth kurs'>
     ".$data[$i]["reiting"]." из 5
     <br>
     <div class='rating_empty'>
          <div class='rating_full' style='width: ".$star."%;'></div>
     </div>
</div>
?>


Используемые стили:
.rating_empty {
background: url(../images/rating.png) repeat-x scroll 0 0 transparent;
width: 75px;
height: 20px;
margin: 0 auto;
}
.rating_full {
background: url(../images/rating.png) 0 100% repeat-x;
height: 14px;
}

В моем случае начисление рейтинга - это часть большого сниппета, в ходе которого мы получаем рейтинг в виде числа от 0 до 5 с двумя знаками поле запятой, например 4,52. Поэтому первым делом переведем нашу пятибальную систему в процентную, для этого умножим рейтинг на 20.
Далее будем использовать заготовку самих звездочек (rating.png):
Для того, чтобы помещалось 5 таких звездочек в div мы задали ему ширину 75 пикселей.

В чистом виде html будем выглядеть, например, так:
<div class="one_fifth kurs">
     4.68 из 5
     <br>
     <div class="rating_empty">
          <div class="rating_full" style="width: 93.6%;"></div>
     </div>
</div>
Где, 93,6% это 4,68*20.

Результат:

Комментариев нет:

Отправить комментарий