zoukankan      html  css  js  c++  java

  • jQuery实现星级评分

    前面有一篇原生js实现星级评分 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。

    Html代码  收藏代码
    1. <div class="star">  
    2. <span>jQuery星级评论打分</span>  
    3. <ul>  
    4. <li><a href="javascript:;">1</a></li>  
    5. <li><a href="javascript:;">2</a></li>  
    6. <li><a href="javascript:;">3</a></li>  
    7. <li><a href="javascript:;">4</a></li>  
    8. <li><a href="javascript:;">5</a></li>  
    9. </ul>  
    10. </div>  

     

    Css代码  收藏代码
    1. <style>  
    2. *{margin:0;padding:0;font-size:13px;}  
    3. ul,li{list-style:none;}  
    4. .star {position:relative;600px;height:24px; margin:20px auto 0;}  
    5. .star span {float:left;height:19px;line-height:19px;}  
    6. .star ul{margin:0 10px;}  
    7. .star li{float:left;24px;height:22px;text-indent:-9999px;background:url('star.png') no-repeat;cursor:pointer;}  
    8. .star li.on{background-position:0 -28px;}  
    9. .star p {padding:10px 10px 0;position:absolute;top:20px;159px;height:60px;z-index:100;}  
    10. .star p em {color: #FF6600;display: block;font-style: normal;}  
    11. .star strong {color:#ff6600;padding-left:10px;}  
    12. .hidden{display:none;}  
    13. </style>  

     

    Js代码  收藏代码
    1. <script type="text/javascript" src="http://s.thsi.cn/js/jquery-1.7.2.min.js"></script>  
    2. <script type="text/javascript" src="score.js"></script>  
    3. </head>  
    4.   
    5. <body>  
    6. <script type="text/javascript">  
    7. $(function(){  
    8. var score = new Score({  
    9. callback: function(cfg) {  
    10. console.log(cfg.starAmount);  
    11. }  
    12. });  
    13. });  
    14. </script>  

     

    Js代码  收藏代码
    1. /** 
    2.  * JQ评分效果 
    3.  */  
    4.  function Score(options) {  
    5.     this.config = {  
    6.         selector                  :   '.star',     // 评分容器  
    7.         renderCallback            :   null,        // 渲染页面后回调  
    8.         callback                  :   null         // 点击评分回调                           
    9.     };  
    10.   
    11.     this.cache = {  
    12.         aMsg : [  
    13.                 "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",  
    14.                 "不满意|部分有破损，与卖家描述的不符，不满意",  
    15.                 "一般|质量一般，没有卖家描述的那么好",  
    16.                 "满意|质量不错，与卖家描述的基本一致，还是挺满意的",  
    17.                 "非常满意|质量非常好，与卖家描述的完全一致，非常满意"  
    18.                 ],  
    19.         iStar  : 0,  
    20.         iScore : 0  
    21.     };  
    22.   
    23.     this.init(options);  
    24.  }  
    25.   
    26.  Score.prototype = {  
    27.   
    28.     constructor: Score,  
    29.   
    30.     init: function(options){  
    31.         this.config = $.extend(this.config,options || {});  
    32.         var self = this,  
    33.             _config = self.config,  
    34.             _cache = self.cache;  
    35.   
    36.         self._renderHTML();  
    37.     },  
    38.     _renderHTML: function(){  
    39.         var self = this,  
    40.             _config = self.config;  
    41.         var html = '<span class="desc"></span>' +   
    42.                    '<p class="star-p hidden"></p>';  
    43.         $(_config.selector).each(function(index,item){  
    44.             $(item).append(html);  
    45.             $(item).wrap($('<div class="parentCls" style="position:relative"></div>'));  
    46.             var parentCls = $(item).closest('.parentCls');  
    47.             self._bindEnv(parentCls);  
    48.             _config.renderCallback && $.isFunction(_config.renderCallback) && _config.renderCallback();  
    49.         });  
    50.   
    51.     },  
    52.     _bindEnv: function(parentCls){  
    53.         var self = this,  
    54.             _config = self.config,  
    55.             _cache = self.cache;  
    56.   
    57.         $(_config.selector + ' li',parentCls).each(function(index,item){  
    58.               
    59.             // 鼠标移上  
    60.             $(item).mouseover(function(e){  
    61.                 var offsetLeft = $('ul',parentCls)[0].offsetLeft;  
    62.                 ismax(index + 1);  
    63.                   
    64.                 $('p',parentCls).hasClass('hidden') && $('p',parentCls).removeClass('hidden');  
    65.                 $('p',parentCls).css({'left':index*$(this).width() + 12 + 'px'});  
    66.                   
    67.   
    68.                 var html = '<em>' +   
    69.                               '<b>'+index+'</b>分 '+_cache.aMsg[index].split('|')[0]+'' +   
    70.                            '</em>' + _cache.aMsg[index].split('|')[1];  
    71.                 $('p',parentCls).html(html);  
    72.             });  
    73.   
    74.             // 鼠标移出  
    75.             $(item).mouseout(function(){  
    76.                 ismax();  
    77.                 !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');  
    78.             });  
    79.               
    80.             // 鼠标点击  
    81.             $(item).click(function(e){  
    82.                 var index = $(_config.selector + ' li',parentCls).index($(this));  
    83.                 _cache.iStar = index + 1;  
    84.                                   
    85.                 !$('p',parentCls).hasClass('hidden') && $('p',parentCls).addClass('hidden');  
    86.                 var html = '<strong>' +  
    87.                                 index +  
    88.                            '分</strong>' +_cache.aMsg[index].split('|')[1];  
    89.   
    90.                 $('.desc',parentCls).html(html);  
    91.                 _config.callback && $.isFunction(_config.callback) && _config.callback({starAmount:_cache.iStar});  
    92.             });  
    93.               
    94.         });  
    95.   
    96.         function ismax(iArg) {  
    97.             _cache.iScore = iArg || _cache.iStar;  
    98.             var lis = $(_config.selector + ' li',parentCls);  
    99.               
    100.             for(var i = 0; i < lis.length; i++) {  
    101.                 lis[i].className = i < _cache.iScore ? "on" : "";  
    102.             }  
    103.         }  
    104.     }  
    105.  };  

     

    这个也是在网上找的一个相对自己来说更实用一点的。做储备。
  • 相关阅读:
    题解 SP27102/UVA1747 【Swap Space】
    题解 P1453 【城市环路】
    题解 P5587 【打字练习】
    题解 P5594 【【XR-4】模拟赛】
    git add 的一点说明
    理解 Git 的基本概念 ( Merging Collaborating Rebasing)
    windows 上 Python 通过 SCP 连接linux server
    Neo4j CQL | WITH用法
    Neo4j CQL |create &merge
    Item 4: Prefer Interpolated F-Strings Over C-style Format Strings and str.format(请使用f-string格式化字符串)
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3630498.html
Copyright © 2011-2022 走看看