Fork me on GitHub

Option

Default

使用默认参数启用scorejs，当目标标签为 'ul' 时使用将 'li' 标签初始化，否则使用 'span' 标签初始化

div
ul 
    <div class="demo-default"></div> Or <ul class="demo-default"></ul>
    $('.demo-default').score();

    配置项默认值保存在$.fn.score.defaults，可在使用前直接修改，修改后将影响到之后创建的所有实例

    插件配置项默认值如下：

    $.fn.score.defaults = {
    number      : 5,
    size        : 26,
    color       : 'black',
    score       : undefined,
    vertical    : false,
    hints       : undefined,
    click       : undefined,
    mouseover   : undefined,
    mouseout    : undefined,
    readOnly    : false,
    fontAwesome : false,
    debug       : false
}

    Number

    评分的范围，设定的数字代表可用来评分的图标总数

      $('.demo-option-number').score({
    number: 10
});

      Size

      图标的大小，按照CSS的文字尺寸单位px控制大小

        $('.demo-option-number').score({
    size: 32
});

        Color

        图标的颜色，按照CSS的颜色规则取值

          $('.demo-option-color').score({
    color: '#08C'
});

          Score

          初始化时的分数

            $('.demo-option-score').score({
    score: 3
});

            Vertical

            垂直模式，即竖向排列图标

              提示：为了能够更自由的在页面定义样式，插件不强行限制图标的宽度，由于垂直分布需要使用块级元素，因此需要自己定义浮动以及清理来自适应宽度

              自适应宽度示例(自行查看源代码参考)：

                $('.demo-option-vertical').score({
    vertical: true
});

                Hints

                用指定文本替换评分条目提示，例: ['bad', 'poor', 'regular', 'good', 'gorgeous']（默认是从1开始的阿拉伯数字）

                注意：如果给定的数组元素多余图标数将省略后面的，反之缺少的以对应的阿拉伯数字补上

                  $('.demo-option-hints').score({
    hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']
});

                  Click

                  评分图标Click事件回调函数

                  回调函数中的this指向

                    $('.demo-option-click').score({
    click: function(score, event){
        alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
    }
});

                    Mouseover

                    评分图标Mouseover事件回调函数

                      $('.demo-option-mouseover').score({
    mouseover: function(score, event){
        alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
    }
});

                      Mouseout

                      评分图标Mouseout事件回调函数

                        $('.demo-option-mouseout').score({
    mouseout: function(score, event){
        alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
    }
});

                        Read Only

                        图标的大小，按照CSS的文字尺寸单位px控制大小

                          $('.demo-option-readOnly').score({
    readOnly: true,
    score: 3
});

                          FontAwesome

                          图标的大小，按照CSS的文字尺寸单位px控制大小

                            $('.demo-option-fontAwesome').score({
    fontAwesome: true
});

                            API

                            Score

                            手动设置分数，如果省略第二个参数将返回当前的分数

                            设置分数作用于当前jQuery选择器选定的所有元素，获取分数只作用于jQuery对象集合中的第一个元素

                            注意：如果设定的分数超过Number大小将设置为满分

                            $('.score').score('score', score); // 设置分数为score
                            $('.score').score('score'); // 获取分数

                            Option

                            修改或增加配置，如果省略第二个参数将返回当前的配置项对象

                            给定的配置项同样是对象的形式，其行为是将参数给定的配置项与当前的配置项合并后重新加载

                            设置配置项作用于当前jQuery选择器选定的所有元素，获取配置项只作用于jQuery对象集合中的第一个元素

                            $('.score').score('option', {optionKey:optionValue[,optionKey:optionValue]}); // 设置配置项
                            $('.score').score('option'); // 获取配置项

                            ReadOnly

                            设置为只读模式

                            此方法仅仅改变展示方式，并不会修改配置项

                            提示：此方法被触发时将移除所有已绑定的事件，并显示最近设置的分数，如果触发前鼠标仍然在图标上移动但未点击则会立刻显示为前一次点击时的分数

                            $('.score').score('readOnly', true); // 设置为只读
                            $('.score').score('readOnly', false); // 取消只读

                            Cancel

                            取消当前评分

                            $('.score').score('cancel');

                            Destroy

                            销毁插件实例

                            提示：销毁实例时，在初始化前设置的style属性将被还原，初始化之后手动增加和修改的style属性值将被保留（参考Live Demo）

                            $('.score').score('destroy');

                            Live Demo

                              $('.demo-live-application').score({
    number      : 10,
    size        : 32,
    color       : '#08C',
    score       : 4,
    vertical    : false,
    hints       : ['bad', 'poor', 'regular', 'good', 'gorgeous'],
    click       : function(score, event){
        alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
    },
    readOnly    : false,
    fontAwesome : true,
    debug       : true
});
                              Set Score
                              Get Score
                              Set Option
                              Get Option
                              Set ReadOnly
                              Set ReadOnly with 5s delay
                              Unset ReadOnly
                              Cancel
                              Destroy
                              以例子给定的配置再次初始化

                              说明：以上代码实现请自行查看application.js