Так много плагинов с огромными архивами кб стилей и библиотек великолепные примеры куда делись примеры с 3 строками и/т/п
короче решил я написать свой плагин оценки тем более, что прошлый не подходил нужно было избавится от перезагрузки страницы а выбор передавать через обычную форму.
<ul class=»ul-star»>
<li id=»li_1″ data-prop=»1″ {if $product_info.customers_rating < 1}class=»no-star»{/if}></li>
<li id=»li_2″ data-prop=»2″{if $product_info.customers_rating < 2}class=»no-star»{/if}></li>
<li id=»li_3″ data-prop=»3″{if $product_info.customers_rating < 3}class=»no-star»{/if}></li>
<li id=»li_4″ data-prop=»4″{if $product_info.customers_rating < 4}class=»no-star»{/if}></li>
<li id=»li_5″ data-prop=»5″{if $product_info.customers_rating < 5}class=»no-star»{/if}></li>
</ul>
<input type="hidden" id="vote" value="">
<script>
$(document).ready(function(){
$(‘.ul-star li’).mouseenter(function(){
var len=$(this).data(‘prop’);
var index=0;
for (index = len; index >= 0; —index) {
$(‘#li_’+index).addClass(‘activ’) ;
}
});
$(‘.ul-star li’).mouseleave(function(){
$(‘.ul-star li’).removeClass(‘activ’);
});
$(‘.ul-star li’).click(function(){
$(‘.ul-star li’).removeClass(‘select’);
var len=$(this).data(‘prop’);
var index=0;
for (index = len; index >= 0; —index) {
$(‘#li_’+index).addClass(‘select’) ;
}
$(‘#vote’).val(len);
});
});
</script>
<style>
.star-block {
width: 100%;
padding-left: 30px;
}
.star-block span {
float: left;
display: inline-block;
margin-right: 23px;
}
.star-block ul.ul-star {
margin: 0;
}
.star-block ul.ul-star li {
list-style: none;
cursor: pointer;
display: inline-block;
width: 23px;
height: 21px;
margin-right: 15px;
background: url(../svg/star-yelow.svg) no-repeat;
}
.star-block ul.ul-star li:last-child {
margin-right: 0;
}
.star-block ul.ul-star li.no-star {
background: url(../svg/no-star.svg) no-repeat;
}
.star-block ul.ul-star li.activ{
background: url(../svg/star-green.svg) no-repeat;
}
.star-block ul.ul-star li.select{
background: url(../svg/star-red.svg) no-repeat;
}
</style>
вот как-то так