telephone-icon+38(097)195-66-17
telephone-icon+38(063)211-55-81
Main menu
ГлавнаяБлогJavaScriptjQueryРейтинг-звездочки с занесением информации в скрытый инпут

Рейтинг-звездочки с занесением информации в скрытый инпут

Рейтинг-звездочки с занесением информации в скрытый инпут

Сохраняем себе на сайт эту картинку:

или делаем свою и пишем следующий код:

Прописываем стили:

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')
	})
})

В результате должно получиться так же как в начале статьи.

ВКонтакт Facebook Google Plus Одноклассники Twitter Livejournal Liveinternet Mail.Ru

Возврат к списку