Javascript. Основа скрипта для рейтинга.

Все просто: выбираем звезды, нажимаем, значение фиксируется в hidden поле rating. При сабмите формы значение передается на скрипт-обработчик. При желании можно сделать отправку значения на аяксе.

пишем css:

#chooseRating ul {margin:0px; padding:0px}
#chooseRating ul li {width:28px; height:26px; list-style:none; float:left}
.clear {clear:both}
#ratingLegend {font-family:Verdana; font-size:12px}

пишем js, предварительно подключив jquery последней версии:

$(document).ready(function(){
$("#chooseRating img").hover(function(){
$("#chooseRating img").attr("src", "star_off.gif");
$("#chooseRating img:lt("+($("#rating").val())+")").attr("src", "star_on.gif");
var id = $(this).attr("id");
var legend = $(this).attr("alt");
$("#ratingLegend").html( legend );
$("#chooseRating img").each(function(n){
if( $(this).attr("id") == id )
{
$("#chooseRating img:lt("+(n+1)+")").attr("src", "star_on.gif");
}
$(this).click(function(){
$("#rating").val(n+1);
var legend = $("#star_"+(n+1)).attr("alt");
$("#ratingLegend").html( legend ).fadeOut("slow", function(){$(this).fadeIn()});
})

});
}, function(){
if( $("#rating").val() == 0 )
{
$("#ratingLegend").empty();
}
else
{
$("#ratingLegend").html( $("#star_"+$("#rating").val()).attr("alt") );
}
$("#chooseRating img").attr("src", "star_off.gif");
$("#chooseRating img:lt("+($("#rating").val())+")").attr("src", "star_on.gif");
});
});

пишем html:



    • Poor

    • Fair

    • Average

    • Good

    • Excellent

Необходимо заготовить картинки активных и неактивных звезд и подредактировать пути к картинкам в нашем скрипте.

Интересное

Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...
Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....
Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...

Комментарии

    Чтобы оставлять комментарии, авторизируйтесь

    Войти через OpenID

    рейтинг1+-
    Популярные
    Точки входа
    Наверх