第四次配置

examples/rate.html

@@ -55,28 +55,38 @@ layui.use(['rate'], function(){
   var rate = layui.rate;
 
   //渲染
+  // var ins1 = rate.render({
+  //   elem: '#test1'
+  //   ,length: 7
+  //   ,value: 4
+  // });
+  // ins1.setValue(5);
+
+
   rate.render({
-    elem: '#test1',
+    elem: '#test1'
-    length: 7,
+    ,length: 7
-    value: 4
+    ,value: 4
+  })
+
+  rate.render({
+    elem: '#test2'
+    ,length: 6
+    ,value: 2
+    ,half: true
   })
   rate.render({
-    elem: '#test2',
+    elem: '#test3'
-    length: 6,
+    ,length: 5
-    value: 2,
+    ,value: 2.5
-    half: true
+    ,text: true
+    ,half: true
   })
   rate.render({
-    elem: '#test3',
+    elem: '#test4'
-    length: 5,
+    ,length: 8
-    value: 3,
+    ,value: 5
-    text: true
+    ,reader: true
-  })
-  rate.render({
-    elem: '#test4',
-    length: 8,
-    value: 5,
-    reader: true
   })
 
 });

src/css/layui.css

@@ -1037,7 +1037,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 .layui-upload-wrap .layui-upload-file{display: block!important; position: absolute; left: 0; top: 0; z-index: 10; font-size: 100px; width: 100%; height: 100%; opacity: .01; filter: Alpha(opacity=1); cursor: pointer;}
 
 /** 评分组件 **/
-.layui-icon-rate,.layui-icon-rate-solid{font-size: 24px;color: #FF7F00;}
+.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:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;}
 .layui-rate{display: inline-block;list-style: none;padding: 20px;}

src/lay/modules/rate.js

@@ -22,6 +22,22 @@ layui.define('jquery',function(exports){
     }
 	}
 
+  //操作当前实例
+  ,thisRate = function(){
+    var that = this
+    ,options = that.config;
+    
+    return {
+      
+       function(value){
+        console.log(options)
+
+        //that.setValue();
+      }
+      ,config: options
+    }
+  }
+
   //字符常量
   ,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'
 
@@ -47,68 +63,94 @@ layui.define('jquery',function(exports){
   Class.prototype.render = function(){
     var that = this
     ,options = that.config;
+    
 
     var temp='<ul class="layui-rate">';
     for(var i=1;i<=options.length;i++){
-      temp+='<li class="layui-inline"><i class="layui-icon '+(i>options.value?'layui-icon-rate':'layui-icon-rate-solid')+'"></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>';
+          }else{
+            temp=temp+'<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
+          } 
+        }else{
+          temp=temp+'<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
+        }
+      }else{
+        temp=temp+'<li class="layui-inline"><i class="layui-icon '+(i>Math.floor(options.value)?'layui-icon-rate':'layui-icon-rate-solid')+'"></i></li>';
+      }
     }
-    temp+='</ul><span></span>';
+    temp+='</ul><span>'+(options.text ? options.value+"分" : "")+'</span>';
 
     $(options.elem).after(temp);
 
-    if(!options.reader) that.draw();    
+    //如果不是只读，那么进行点击事件
+    if(!options.reader) that.action(); 
+
+    
 
   };
 
+
   //li点击事件
-  Class.prototype.draw=function(){
+  Class.prototype.action=function(){
     var that = this
     ,options = that.config
     ,_ul=$(options.elem).next("ul");
+
     _ul.children("li").each(function(index){
-      var ind=index+1;
+      var ind=index + 1, othis = $(this);
 
       //点击
-      $(this).click(function(){
+      othis.on('click', function(e){
         options.value=ind;
-        
+
+        if(options.half){
+          var x=e.pageX-$(this).offset().left;
+          if(x<=13){
+            options.value=options.value-0.5;
+          }
+        }
         if(options.text)  _ul.next("span").text(options.value+"分");
       })
 
       //移入
-      $(this).mouseover(function(){
+      othis.on('mousemove', function(e){
         _ul.find("i").each(function(){
-            $(this)[0].className=ICON_RATE;
+          this.className = ICON_RATE;
-          })
+        })
+        _ul.find("i:lt("+ind+")").each(function(){
+          this.className = ICON_RATE_SOLID;
+        })
+
+        // 如果设置可选半星，那么判断鼠标相对li的位置
         if(options.half){
-          $(this).prevAll("li").children("i").each(function(){
+          var x=e.pageX-$(this).offset().left;
-            $(this)[0].className=ICON_RATE_SOLID;
+          if(x<=13){
-          })
+            $(this).children("i")[0].className=ICON_RATE_HALF
-          if(){
-            
           }
-        }else{
+        }         
-          _ul.find("i:lt("+ind+")").each(function(){
-            $(this)[0].className=ICON_RATE_SOLID;
-          })
-        }
-         
       })
 
       //移出
-      $(this).mouseout(function(){
+      othis.on('mouseout', function(){
         _ul.find("i").each(function(){
-          $(this)[0].className=ICON_RATE;
+          this.className=ICON_RATE;
-        })
+        });
-        _ul.find("i:lt("+options.value+")").each(function(){
+        _ul.find("i:lt("+ Math.floor(options.value) +")").each(function(){
-          $(this)[0].className=ICON_RATE_SOLID;
+          this.className=ICON_RATE_SOLID;
         })
+        if(options.half){
+          if(parseInt(options.value)!== options.value){
+            _ul.children("li:eq("+Math.floor(options.value) +")").children("i")[0].className=ICON_RATE_HALF;             
+          }
+        } 
       })
     })
   };
   
 
-
   //事件处理
   Class.prototype.events = function(){
      var that = this
@@ -116,11 +158,10 @@ layui.define('jquery',function(exports){
 
   };
 
-
   //核心入口
   rate.render = function(options){
     var inst = new Class(options);
-    return inst;
+    return thisRate.call(inst);
   };
 	
 	exports(MOD_NAME, rate);