jQuery插件-jRating评分插件源码分析及使用方法

jRating评分插件介绍

jRating评分插件是一款jQuery评分插件，它可以让用户对一个对象进行打分，非常实用。相比大部分jQuery评分插件，jRating评分插件更加轻便，易于使用和定制。它使用CSS和DOM处理来改变HTML元素的外观和表现。

jRating评分插件的特点

• 简单易用。
• 自适应大小。
• 可以通过CSS来定制样式。
• 支持多种评分风格。
• 支持只读模式和可编辑模式。
• 可以设置评分的最大值和最小值。

jRating评分插件的源代码分析

jRating评分插件的源代码包含两个文件，分别是jquery.jRating.js和jquery.jRating.css。

jquery.jRating.js代码分析：

(function($) {
    $.fn.jRating = function(op) {
        // 默认选项
        var defaults = {
            bigStarsPath: '/jRating.jquery/img/stars.png',
            smallStarsPath: '/jRating.jquery/img/small.png',
            type: 'big', // 大小评分风格
            length: 5, // 最大评分
            decimalLength: 0, // 设置评分小数位数
            rateMax: 5, // 最大评级
            nbRates: 5, // 评级次数
            canRateAgain: true, // 是否允许重新评级
            onClick: function(element, rate) {},
            onSuccess: function(element, rate) {},
            onError: function(element, rate) {}
        };

        var options = $.extend(defaults, op);
        // 插入元素
        return this.each(function() {
            element = $(this);
            element.width(options.length * 32); // 设置宽度
            element.css('background', 'url(' + options.bigStarsPath + ')');
            // 显示默认的评分值
            var average = element.attr('data-average');
            if (average != 0 && average != '') {
                $("#jRatingInfo").remove();
                element.find('.jRatingInfos').append('<p id="jRatingInfo">' + average + '/' + options.rateMax + '</p>');
                element.find('.jStar').slice(0, average).css('background', 'url(' + options.smallStarsPath + ')');
            }

            element.find('.jStar').unbind().bind('mouseover', function() {
                var index = $(this).prevAll().length + 1;
                $(this).parent().css('background-position', '0 ' + ((options.length - index) * 32) + 'px');
            });
            element.find('.jStar').unbind().bind('mouseout', function() {
                renderRate();
            });
            element.find('.jStar').unbind().bind('click', function() {
                var rate = $(this).prevAll().length + 1;
                setRate(rate);
            });

            function setRate(rate) {
                element.find('.jStar').unbind(); // 取消所有事件绑定
                if (options.canRateAgain == true || element.attr('data-rateable') == 'true') {
                    $.ajax({
                        url: options.url,
                        type: 'POST',
                        data: 'rate=' + rate + '&id=' + element.attr('data-id') + '&type=' + element.attr('data-type'),
                        success: function(data) {
                            element.attr('data-rateable', false);
                            element.attr('data-average', data);
                            element.find('.jStar').slice(0, rate).css('background', 'url(' + options.smallStarsPath + ')');
                            element.find('.jRatingInfos').empty().append('<p>' + data + '/' + options.rateMax + '</p>');
                            options.onClick(element, rate);
                            options.onSuccess(element, rate);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Error: " + textStatus + " " + errorThrown);
                            options.onError(element, rate);
                        }
                    });
                }
            }

            function renderRate() {
                var average = element.attr('data-average');
                element.find('.jStar').css('background', 'url(' + options.bigStarsPath + ')');
                element.find('.jStar').slice(0, average).css('background', 'url(' + options.smallStarsPath + ')');
                if (average != 0 && average != '') {
                    $("#jRatingInfo").remove();
                    element.find('.jRatingInfos').append('<p id="jRatingInfo">' + average + '/' + options.rateMax + '</p>');
                }
                element.find('.jStar').unbind().bind('mouseover', function() {
                    var index = $(this).prevAll().length + 1;
                    $(this).parent().css('background-position', '0 ' + ((options.length - index) * 32) + 'px');
                });
                element.find('.jStar').unbind().bind('mouseout', function() {
                    renderRate();
                });
                element.find('.jStar').unbind().bind('click', function() {
                    var rate = $(this).prevAll().length + 1;
                    setRate(rate);
                });
            };

        });

        // 将整数舍去小数部分
        function getInt(number) {
            var decimal = new Number(number).toFixed(20);
            var integer = Math.floor(decimal);
            return integer;
        }
    };
})(jQuery);

jquery.jRating.css代码分析：

.jRatingContainer {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.jRatingInfos {
    width: 100px;
    color: #999;
    position: absolute;
    top: -20px;
    left: 35px;
    text-align: center;
    z-index: 1;
    font-size: 0.9em;
    font-style: normal;
    font-weight: normal;
}

.jRatingInfos p {
    margin: 0;
    padding: 0;
    font-size: 11px;
}

.jStar {
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 2px 0 0;
    background-repeat: no-repeat;
    background-image: url(bigStarsPath);
    background-position: 0 0px;
    text-indent: -9999px;
}

.jStar:hover {
    background-position: 0 -32px !important;
}

.jRatingReadOnly {
    cursor: default !important;
}

.jDisabled {
    cursor: default !important;
    background-position: 0 -64px !important;
}

jRating评分插件的使用方法

步骤1：下载插件

首先，你需要从官方网站下载jRating评分插件的源码文件。

步骤2：引用插件

下载好插件之后，需要在你的网站引用插件的js和css文件：

<link rel="stylesheet" href="jquery.jRating.css" type="text/css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.jRating.js"></script>

步骤3：创建HTML元素

创建一个HTML元素来插入评分。

<div class="jRatingContainer" data-average="2" data-id="1" data-type="tutorial" data-rateable="true" data-url="/rating"></div>

步骤4：调用jRating评分插件

接下来，调用jRating评分插件，即可在网站上显示评分。

$('.jRatingContainer').jRating();

示例1: 基本使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例1: 基本使用</title>
    <link rel="stylesheet" href="jquery.jRating.css" type="text/css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jquery.jRating.js"></script>
</head>
<body>
    <div class="jRatingContainer" data-average="2" data-id="1" data-type="tutorial" data-rateable="true" data-url="/rating"></div>
</body>
<script>
    $('.jRatingContainer').jRating();
</script>
</html>

示例2: 属性配置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例2:属性配置</title>
    <link rel="stylesheet" href="jquery.jRating.css" type="text/css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="jquery.jRating.js"></script>
</head>
<body>
    <div class="jRatingContainer" data-average="3" data-id="1" data-type="tutorial" data-rateable="true" data-url="/rating" data-length="10" data-rate-max="10" data-decimal-length="1"></div>
</body>
<script>
    $('.jRatingContainer').jRating({
        length: 10, // 设置评分颗数
        rateMax: 10, // 设置评分最大值
        decimalLength: 1 // 设置评分小数位数
    });
</script>
</html>

jRating评分插件的API

Options

• bigStarsPath
  • 描述: 大评分图标路径
  • 类型: string
  • 默认值: /jRating.jquery/img/stars.png
• smallStarsPath
  • 描述: 小评分图标路径
  • 类型: string
  • 默认值: /jRating.jquery/img/small.png
• type
  • 描述: 评分风格
  • 类型: string
  • 可选值: big (大评分)，small (小评分)
  • 默认值: big
• length
  • 描述: 最大评分颗数
  • 类型: integer
  • 默认值: 5
• decimalLength
  • 描述: 评分小数位数
  • 类型: integer
  • 默认值: 0
• rateMax
  • 描述: 最大可评分值
  • 类型: integer
  • 默认值: 5
• nbRates
  • 描述: 评级次数
  • 类型: integer
  • 默认值: 5
• canRateAgain
  • 描述: 是否可以重新评级
  • 类型: boolean
  • 默认值: true
• onClick
  • 描述: 鼠标点击评分对应的回调函数
  • 参数: element, rate
  • 类型: function
  • 默认值: function(){}
• onSuccess
  • 描述: 评分操作成功的回调函数
  • 参数: element, rate
  • 类型: function
  • 默认值: function(){}
• onError
  • 描述: 评分操作失败的回调函数
  • 参数: element, rate
  • 类型: function
  • 默认值: function(){}

Methods

jRating插件支持两种方法调用方式：

方法1：命令式调用

插件的命令式调用方式如下所示：

// 初始化
$('.jRatingContainer').jRating();

// 设置默认评分值
$('.jRatingContainer').attr('data-rateable', false).attr('data-average', 3);

方法2：面向对象调用

插件的面向对象调用方式如下所示：

// 创建一个实例
var jRatingInstance = $('.jRatingContainer').jRating();

// 设置初始评分值
jRatingInstance.data('average', 3);