Новый рейтинг из 10 звезд для uCoz. Это уже не первая подобная модификация стандартного вида рейтинга, были и другие. Но мне недавно понадобилось сделать простой рейтинг из 10 звезд, без каких-то лишних наворотов и скриптов.
В итоге я сделал очень простой и небольшой скрипт, и самое главное сам рейтинг выглядит очень просто: те-же самые звезды - только их теперь 10, а не 5 как обычно. При этом, это не просто внешне 10 звезд, они и работают так как надо, то есть 10 градаций оценки.
Более того, поскольку скрипт простой, он работает во всех модулях и на всех страницах, то есть и в виде материалов - на странице со списком материалов категории или главной, и на странице материала и комментариев к нему.
В данном примере будет показан рейтинг размером 20х20 px. и стандартной звездой. Если вам нужна другая звезда для рейтинга и/или другой размер, то это можно легко изменить - немного отредактировав код.
Установка рейтинга.
Замените ваш стандартный код рейтинга ($RSTARS$('20','/images/rating.png','1','float')?>), на вот этот:
Код $RSTARS$('20','/images/rating.png','1','float')?> <script type="text/javascript"> $('.u-star-li-$ID$:eq(0)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',0.5);return false;" class="u-one-star">1</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',1);return false;" class="u-two-stars">2</a></li>'); $('.u-star-li-$ID$:eq(2)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',1.5);return false;" class="u-three-stars">3</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',2);return false;" class="u-four-stars">4</a></li>'); $('.u-star-li-$ID$:eq(4)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',2.5);return false;" class="u-five-stars">5</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',3);return false;" class="u-six-star">6</a></li>'); $('.u-star-li-$ID$:eq(6)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',3.5);return false;" class="u-seven-stars">7</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',4);return false;" class="u-eight-stars">8</a></li>'); $('.u-star-li-$ID$:eq(8)').replaceWith('<li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',4.5);return false;" class="u-nine-stars">9</a></li><li class="u-star-li-$ID$"><a href="#" onclick="ustarrating(\'$ID$\',5);return false;" class="u-ten-stars">10</a></li>'); </script>
Далее в CSS вставьте следующие стили:
Код .u-star-rating-20 {width:200px !important;} .u-star-rating-20 a.u-six-star {left:100px;} .u-star-rating-20 a.u-six-star:hover {width:120px;} .u-star-rating-20 a.u-seven-stars {left:120px;} .u-star-rating-20 a.u-seven-stars:hover {width:140px;} .u-star-rating-20 a.u-eight-stars {left:140px;} .u-star-rating-20 a.u-eight-stars:hover {width:160px;} .u-star-rating-20 a.u-nine-stars {left:160px;} .u-star-rating-20 a.u-nine-stars:hover {width:180px;} .u-star-rating-20 a.u-ten-stars {left:180px;} .u-star-rating-20 a.u-ten-stars:hover {width:200px;}
|