jquery星级评分 jquery特效代码__parentcls_config_function_cache_index_

当前位置: 编程技术>jquery

jquery星级评分 jquery特效代码

来源: 互联网发布时间：2014-10-04

本文导语: 一个jquery实现的星级评分的实例代码。 1，html代码代码示例: jquery星级评论打分 1 2 3 4 5 2，css代码代码示例: *{margin:0;padding:0;font-size:13px;} ul,li{list-style:none;} .star {position:relative;width:600px;height:24px; margin:20px...

一个jquery实现的星级评分的实例代码。
1，html代码

代码示例:

jquery星级评论打分

1

2

3

4

5

2，css代码

代码示例:

*{margin:0;padding:0;font-size:13px;}

ul,li{list-style:none;}

.star {position:relative;width:600px;height:24px; margin:20px auto 0;}

.star span {float:left;height:19px;line-height:19px;}

.star ul{margin:0 10px;}

.star li{float:left;width:24px;height:22px;text-indent:-9999px;background:url('/tech-jquery/star.png') no-repeat;cursor:pointer;}

.star li.on{background-position:0 -28px;}

.star p {padding:10px 10px 0;position:absolute;top:20px;width:159px;height:60px;z-index:100;}

.star p em {color: #ff6600;display: block;font-style: normal;}

.star strong {color:#ff6600;padding-left:10px;}

.hidden{display:none;}

3，js代码

代码示例:

$(function(){
var score = new score({
callback: function(cfg) {
console.log(cfg.staramount);
}
});
});

/**
* jq评分效果
*/
function score(options) {
    this.config = {
        selector                  :   '.star',     // 评分容器
        rendercallback            :   null,        // 渲染页面后回调
        callback                  :   null         // 点击评分回调
    };

    this.cache = {
        amsg : [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
                ],
        istar : 0,
        iscore : 0
    };

    this.init(options);
}

score.prototype = {

    constructor: score,

    init: function(options){
        this.config = $.extend(this.config,options || {});
        var self = this,
            _config = self.config,
            _cache = self.cache;

        self._renderhtml();
    },
    _renderhtml: function(){
        var self = this,
            _config = self.config;
        var html = '' +
                   '';
        $(_config.selector).each(function(index,item){
            $(item).append(html);
            $(item).wrap($('

'));
            var parentcls = $(item).closest('.parentcls');
            self._bindenv(parentcls);
            _config.rendercallback && $.isfunction(_config.rendercallback) && _config.rendercallback();
        });

    },
    _bindenv: function(parentcls){
        var self = this,
            _config = self.config,
            _cache = self.cache;

        $(_config.selector + ' li',parentcls).each(function(index,item){

            // 鼠标移上
            $(item).mouseover(function(e){
                var offsetleft = $('ul',parentcls)[0].offsetleft;
                ismax(index + 1);

                $('p',parentcls).hasclass('hidden') && $('p',parentcls).removeclass('hidden');
                $('p',parentcls).css({'left':index*$(this).width() + 12 + 'px'});


                var html = '' +
                              ''+index+'分 '+_cache.amsg[index].split('|')[0]+'' +
                           '' + _cache.amsg[index].split('|')[1];
                $('p',parentcls).html(html);
            });

            // 鼠标移出
            $(item).mouseout(function(){
                ismax();
                !$('p',parentcls).hasclass('hidden') && $('p',parentcls).addclass('hidden');
            });

            // 鼠标点击
            $(item).click(function(e){
                var index = $(_config.selector + ' li',parentcls).index($(this));
                _cache.istar = index + 1;

                !$('p',parentcls).hasclass('hidden') && $('p',parentcls).addclass('hidden');
                var html = '' +
                                index +
                           '分' +_cache.amsg[index].split('|')[1];

                $('.desc',parentcls).html(html);
                _config.callback && $.isfunction(_config.callback) && _config.callback({staramount:_cache.istar});
            });

        });

        function ismax(iarg) {
            _cache.iscore = iarg || _cache.istar;
            var lis = $(_config.selector + ' li',parentcls);

            for(var i = 0; i < lis.length; i++) {
                lis[i].classname = i < _cache.iscore ? "on" : "";
            }
        }
    }
};