star rating jquery ui

Так много плагинов с огромными архивами кб стилей и библиотек великолепные примеры куда делись примеры с 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>

 

вот как-то так