Рейтинг-звездочки с занесением информации в скрытый инпут
Сохраняем себе на сайт эту картинку:
или делаем свою и пишем следующий код:
Прописываем стили:
dl.star-rating ol {margin: 0; padding: 0; list-style: none; width: 100px; height: 20px; position: relative; background: url(/images/stars.png);}
dl.star-rating li {float: left; margin: 0; padding: 0;}
dl.star-rating li a {display: block; width: 20px; height: 20px; text-indent: -9999px; position: absolute; text-decoration: none; z-index: 10; color: #ccc}
dl.star-rating li a:hover {background: url(/images/stars.png) left center; left: 0; z-index: 2;}
dl.star-rating a.star1 {left: 0;}
dl.star-rating a.star1:hover {width: 20px;}
dl.star-rating a.star2 {left: 20px;}
dl.star-rating a.star2:hover {width: 40px;}
dl.star-rating a.star3 {left: 40px;}
dl.star-rating a.star3:hover {width: 60px;}
dl.star-rating a.star4 {left: 60px;}
dl.star-rating a.star4:hover {width: 80px;}
dl.star-rating a.star5 {left: 80px;}
dl.star-rating a.star5:hover {width: 100px;}
dl.star-rating li.current {background: url(/images/stars.png) left bottom; height: 20px; z-index: 1;}
dl.star-rating ol>li a:hover{text-indent: 110px;}
dl.star-rating li span{text-indent: 0; position: absolute; width: 20px; text-align: center; top: 20px; right: -12px;}
и вот такой скрипт:
$(document).ready(function(){
$('dl.star-rating a').click(function(e){
e.preventDefault();
rate = $(this).attr('data');
$('#set_rating').val(rate);
$('.star-rating li').removeClass('current').css('width', '0px');
$('.star-rating li').eq(rate-1).addClass('current').css('width', (rate*20)+'px')
})
})
В результате должно получиться так же как в начале статьи.
Оставить комментарий