Для того, чтобы начислять рейтинг каким-либо товарам либо компаниям будем использовать только 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.
Результат:
Вся реализация выглядит таким образом:
<?
$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.
Результат:
Комментариев нет:
Отправить комментарий