DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 使用jQuery實現星級評分代碼分享
使用jQuery實現星級評分代碼分享
編輯:JQuery特效代碼     

前面有一篇原生js實現星級評分 。可能覆蓋面不是很廣,現在給出一個jquery實現的星級評分。

代碼如下:
<div class="star"> 
<span>jQuery星級評論打分</span> 
<ul> 
<li><a href="javascript:;">1</a></li> 
<li><a href="javascript:;">2</a></li> 
<li><a href="javascript:;">3</a></li> 
<li><a href="javascript:;">4</a></li> 
<li><a href="javascript:;">5</a></li> 
</ul> 
</div> 

代碼如下:
<style> 
*{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('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;} 
</style> 

代碼如下:
<script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="score.js"></script> 
</head> 
 
<body> 
<script type="text/javascript"> 
$(function(){ 
var score = new Score({ 
callback: function(cfg) { 
console.log(cfg.starAmount); 

}); 
}); 
</script> 

 
代碼如下:
/**
 * 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 = '<span class="desc"></span>' +  
                   '<p class="star-p hidden"></p>'; 
        $(_config.selector).each(function(index,item){ 
            $(item).append(html); 
            $(item).wrap($('<div class="parentCls" style="position:relative"></div>')); 
            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 = '<em>' +  
                              '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +  
                           '</em>' + _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 = '<strong>' + 
                                index + 
                           '分</strong>' +_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" : ""; 
            } 
        } 
    } 
 }; 

使用方法超級簡單,這裡就不多廢話了,小伙伴們拿走自由發揮吧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved