last

examples/rate.html

@@ -55,17 +55,22 @@ layui.use(['rate'], function(){
   var rate = layui.rate;
 
   //渲染
-  var ins1 = rate.render({
+  /*
+  rate.set({
     elem: '#test1'
     ,length: 7
-    ,value: 4
+    ,value: 4.7
-  });
+    ,theme: '#c00'
-  ins1.setvalue(2);
+    ,half: true
+    ,text: true
+    ,reader: true
+  })
+  */
  
   rate.render({
     elem: '#test1'
-    ,length: 7
+    ,length: 5
-    ,value: 4.2
+    ,value: 2.2
   })
 
   rate.render({
@@ -73,21 +78,23 @@ layui.use(['rate'], function(){
     ,length: 6
     ,value: 2
     ,half: true
+    ,theme: '#5FB878'
   })
   rate.render({
     elem: '#test3'
     ,length: 5
-    ,value: 2.5
+    ,value: 2.8
     ,text: true
     ,half: true
+    ,theme: '#FF5722'
   })
   rate.render({
     elem: '#test4'
     ,length: 8
-    ,value: 4.7
+    ,value: 4.8
     ,reader: true
+    ,theme: '#01AAED'
   })
-
 });
 </script>
 </body>

src/css/layui.css

@@ -1038,9 +1038,9 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 
 /** 评分组件 **/
 .layui-icon-rate,.layui-icon-rate-solid,.layui-icon-rate-half{font-size: 24px;color: #FFB800;}
-.layui-rate-div{height: 120px;border: 1px solid #EEE;border-radius: 5px;padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;}
+.layui-rate-div{height: 120px;border: 1px solid #EEE;border-radius: 5px; padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;}
 .layui-rate-div:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;}
-.layui-rate{display: inline-block;list-style: none;padding: 20px;}
+.layui-rate{display: inline-block; list-style: none; padding: 10px;}
 .layui-rate li:hover{cursor: pointer;}
 
 

src/lay/modules/rate.js

@@ -36,8 +36,9 @@ layui.define('jquery',function(exports){
   }
 
   //字符常量
-  ,MOD_NAME = 'rate', ICON_RATE = 'layui-icon layui-icon-rate', ICON_RATE_SOLID = 'layui-icon layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon layui-icon-rate-half'
+  ,MOD_NAME = 'rate',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half'
   
+  ,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half',  ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate',  ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half'
 
 	//构造器
   ,Class = function(options){
@@ -49,33 +50,40 @@ layui.define('jquery',function(exports){
 
   //默认配置
   Class.prototype.config = {
-    length: 5, //初始长度
+    length: 5  //初始长度
-    text: false, //是否显示评分等级
+    ,text: false  //是否显示评分等级
-    reader: false, //是否只读
+    ,reader: false  //是否只读
-    half: false, //是否可以半星
+    ,half: false  //是否可以半星
-    value: 3 //星星选中个数
+    ,value: 0 //星星选中个数
+    ,theme: ''
   };
 
   //评分渲染
   Class.prototype.render = function(){
     var that = this
-    ,options = that.config;
+    ,options = that.config
+    ,style = 'style="color: '+ options.theme + ';"';
+
+    options.elem = $(options.elem);
 
-    //如果没有选择半星的属性，却给了小数的数值，同意向上或向下取整
+    //如果没有选择半星的属性，却给了小数的数值，统一向上或向下取整
     if(parseInt(options.value) !== options.value){
       if(!options.half){
         options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value)
       }
     }
 
-    //模板
+    //组件模板
     var temp = '<ul class="layui-rate">';
     for(var i = 1;i <= options.length;i++){
-      var item = '<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
+      var item = '<li class="layui-inline"><i class="layui-icon '
+        + (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID)
+      + '" '+ style +'></i></li>';
+
       if(options.half){
         if(parseInt(options.value) !== options.value){
           if(i == Math.ceil(options.value)){
-            temp = temp + '<li class="layui-inline"><i class="layui-icon layui-icon-rate-half"></i></li>';
+            temp = temp + '<li class="layui-inline"><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
           }else{
             temp = temp + item 
           } 
@@ -83,34 +91,42 @@ layui.define('jquery',function(exports){
           temp = temp + item
         }
       }else{
-        temp = temp + '<li class="layui-inline"><i class="layui-icon '+(i>options.value?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
+        temp = temp +item;
       }
     }
     temp += '</ul><span>' + (options.text ? options.value + "分" : "") + '</span>';
 
-    $(options.elem).after(temp);
+    //开始插入替代元素
+    var othis = options.elem
+    ,hasRender = othis.next('.' + ELEM_VIEW);
+    
+    //生成替代元素
+    hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
+
+    that.elemTemp = $(temp);
+    othis.html(that.elemTemp);
+
+    othis.addClass("layui-inline");
 
     //如果不是只读，那么进行触控事件
     if(!options.reader) that.action(); 
 
   };
 
-
+  //评分重置
-  //重置value
   Class.prototype.setvalue = function(value){
     var that = this
     ,options = that.config ;
 
-    options.value = value
+    options.value = value ;
-
+    that.render();
-  }
+  };
-
 
   //li触控事件
   Class.prototype.action = function(){
     var that = this
     ,options = that.config
-    ,_ul = $(options.elem).next("ul");
+    ,_ul = that.elemTemp;
 
     _ul.children("li").each(function(index){
       var ind = index + 1
@@ -120,7 +136,6 @@ layui.define('jquery',function(exports){
       othis.on('click', function(e){
         //将当前点击li的索引值赋给value
         options.value = ind;
-
         if(options.half){
           //获取鼠标在li上的位置
           var x = e.pageX - $(this).offset().left;
@@ -134,17 +149,16 @@ layui.define('jquery',function(exports){
       //移入
       othis.on('mousemove', function(e){
         _ul.find("i").each(function(){      
-          this.className = ICON_RATE;
+          $(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
         });
         _ul.find("i:lt(" + ind + ")").each(function(){
-          this.className = ICON_RATE_SOLID ;
+          $(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
         });
-
         // 如果设置可选半星，那么判断鼠标相对li的位置
         if(options.half){
           var x = e.pageX - $(this).offset().left;
           if(x <= 13){
-            $(this).children("i")[0].className = ICON_RATE_HALF ;
+            othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID)
           }
         }         
       })
@@ -152,15 +166,15 @@ layui.define('jquery',function(exports){
       //移出
       othis.on('mouseout', function(){
         _ul.find("i").each(function(){
-          this.className = ICON_RATE;
+          $(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
         });
         _ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
-          this.className = ICON_RATE_SOLID;
+          $(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
         });
-
+        //如果设置可选半星，根据分数判断是否有半星
         if(options.half){
           if(parseInt(options.value) !== options.value){
-            _ul.children("li:eq(" + Math.floor(options.value) + ")").children("i")[0].className = ICON_RATE_HALF ;             
+            _ul.children("li:eq(" + Math.floor(options.value) + ")").children("i").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE)             
           }
         } 
       })
@@ -168,12 +182,10 @@ layui.define('jquery',function(exports){
     })
   };
   
-
   //事件处理
   Class.prototype.events = function(){
      var that = this
     ,options = that.config;
-
   };
 
   //核心入口