jQuery плагин рейтинга звезды, который очищает рейтинг по рейтингу клика? - PullRequest
Новая
       3

jQuery плагин рейтинга звезды, который очищает рейтинг по рейтингу клика?

1 голос
/ 07 мая 2011

Это сбивает с толку, но я не могу найти приличный плагин jQuery, который очищает рейтинг, когда вы нажимаете на звезду с рейтингом (например: вы ставите 3 звезды, вы нажимаете 3-ю звезду сноварейтинг снят).Я продолжаю находить плагины, которые имеют эту глупую кнопку «Очистить рейтинг» слева от звезд.Когда я использовал прототип, я использовал рейтинг-бокс, который работал хорошо, но я не могу найти эквивалент jQuery.

Я был бы очень признателен за любые рекомендации!

1 Ответ

5 голосов
/ 07 мая 2011

Если вам не нужны какие-либо специальные функции, вы можете использовать мой код.Должно быть легко преобразовать его в плагин, если требуется.

Если вам не нужен эффект отслеживания при наведении, просто удалите события mouseenter и mouseleave.

Установленный рейтингсохраняется в атрибуте данных в контейнере div, вы можете получить к нему доступ через $('.rating').data('rating').

Посмотрите живую демонстрацию со случайными изображениями из Интернета: http://jsfiddle.net/abPFF/1/

HTML:

<div class="rating" data-rating="3">
    <div></div><div></div><div></div><div></div><div></div>
</div>

CSS: 

.rating { display:inline-block; padding:0px; }
.rating div { display:inline-block; width:48px; height:48px; margin:0px; background-image: url('star-off.png');}

.selected { background-image: url('star.png') !important; }
.highlighted { background-image: url('star.png') !important; }

Javascript: 

function ShowRating($element, rating){
    $stars = $element.find('div');
    $stars.removeClass('selected highlighted');
    rating = parseInt(rating);
    if(rating < 1 || rating > $stars.length) return;

    $stars.eq(rating-1).addClass('selected')
        .prevAll().addClass('highlighted');
    return;
}

$('.rating').each(function(){
    var $this = $(this);
    ShowRating($this, $this.data('rating'));
}).bind({
    mouseleave: function(){
        var $this = $(this);
        ShowRating($this, $this.data('rating'));
    }
}).find('div').bind({
    mouseenter: function(){
        var $this = $(this);
        ShowRating($this.parent(), $this.index() + 1);
    },
    click: function(){
        var $this = $(this);
        var $parent = $this.parent();
        var idx = $this.index() + 1;
        if($parent.data('rating') == idx){
            // Remove rating
            ShowRating($parent, 0);
            $parent.data('rating', 0);
        } else {
            // Set rating
            ShowRating($parent, idx);
            $parent.data('rating', idx);
        }
    }
});
...