Альтернативный плагин рейтинга jquery?

Question

Название не очень иллюстрирующее, но я постараюсь объяснить.

Я ищу плагин рейтинга jquery, который ведет себя как стандартный рейтинг звезд, но поддерживает различные изображения и цвета в зависимости от выбранного значения

Например, в масштабе 1-10:

• 1-3 при наведении или выборе все изображения / цвета являются красными
• 4-7 при наведении или выборе все изображения / цвета желтого цвета
• 8-10 при наведении или выборе все изображения / цвета зеленого цвета

Я нашел это и это. но они не совсем делают то, что я ищу.

Так что, если кто-нибудь знает, есть ли что-то там, это сэкономит мне много времени на создание нового плагина.

Answer 1

Почему бы не сделать свой собственный? Я уже создал небольшую демонстрацию, чтобы показать, что это возможно: http://jsfiddle.net/s2zPW/18/.

Код тоже не сложный:

HTML:

<ul class="rating"></ul>

JavaScript:

$.fn.reverse = function() {
    return this.pushStack(this.get().reverse(), arguments);
};

// create two new functions: prevALL and nextALL. they're very similar, hence this style.
$.each(['prev', 'next'], function(unusedIndex, name) {
    $.fn[name + 'ALL'] = function(matchExpr) {
        // get all the elements in the body, including the body.
        var $all = $('body').find('*').andSelf();

        // slice the $all object according to which way we're looking
        $all = (name == 'prev') ? $all.slice(0, $all.index(this)).reverse() : $all.slice($all.index(this) + 1);
        // filter the matches if specified
        if (matchExpr) $all = $all.filter(matchExpr);
        return $all;
    };
});

for (var i = 0; i < 10; i++) {
    $('.rating').append('<li>' + i + '</li>');
}

$('.rating li').hover(function() {
    if ($(this).index() < 2) {
        $(this).prevALL('li').css('background-color', 'rgb(255, 160, 160)');
    } else if ($(this).index() < 4) {
        $(this).prevALL('li').css('background-color', 'rgb(255, 200, 200)');
    } else if ($(this).index() < 7) {
        $(this).prevALL('li').css('background-color', 'rgb(235, 220, 200)');
    } else if ($(this).index() < 10) {
        $(this).prevALL('li').css('background-color', 'rgb(200, 255, 200)');
    }
}, function() {
    $(this).parent().children().css('background-color', 'rgb(200, 200, 200)');
});