Use jQuery to share star rating codes_jquery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Use jQuery to share star rating codes_jquery

May 16, 2016 pm 04:28 PM

jquery star rating

There is a previous article Native js implements star rating. The coverage may not be very wide, but now I will give a star rating of jquery implementation.

Copy code The code is as follows:

<div class="star"> 

<span>jQuery star review rating</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>

Copy code The code is as follows:

<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>

Copy code The code is as follows:

Copy code The code is as follows:

/** 

 * 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    
‘Split</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" : ""; 

}  

}; 

The method of use is super simple, so there won’t be much nonsense here. Friends, just take it and use it freely.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn