diff --git a/examples/rate.html b/examples/rate.html index 772d1b8..ea11359 100644 --- a/examples/rate.html +++ b/examples/rate.html @@ -16,62 +16,34 @@ body{padding:20px;}
-
+

基础用法

-
    -
    • -
    • -
    • -
    • -
    • -
+
-
+

选中半星

-
    -
    • -
    • -
    • -
    • -
    • -
+
-
+

显示提示文字

-
    -
    • -
    • -
    • -
    • -
    • -
+
-
+

只读

-
    -
    • -
    • -
    • -
    • -
    • -
+
-
-
-
-
@@ -82,20 +54,31 @@ body{padding:20px;} layui.use(['rate'], function(){ var rate = layui.rate; - //设置全局 - rate.set({ - score: 3.5 - }); - - - var ins = rate.render({ - elem: '#test1' + //渲染 + rate.render({ + elem: '#test1', + length: 7, + value: 4 + }) + rate.render({ + elem: '#test2', + length: 6, + value: 2, + half: true + }) + rate.render({ + elem: '#test3', + length: 5, + value: 3, + text: true + }) + rate.render({ + elem: '#test4', + length: 8, + value: 5, + reader: true }) - - rate.primary(".layui-rate-primary","li"); - rate.half(".layui-rate-half","li"); - rate.text(".layui-rate-text","li"); }); diff --git a/src/css/layui.css b/src/css/layui.css index 2b26e07..339b4df 100644 --- a/src/css/layui.css +++ b/src/css/layui.css @@ -1038,10 +1038,10 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh /** 评分组件 **/ .layui-icon-rate,.layui-icon-rate-solid{font-size: 24px;color: #FF7F00;} -.layui-rate{height: 120px;border: 1px solid #EEE;border-radius: 5px;padding: 20px;margin-top: 10px;margin-bottom: 10px;transition: 300ms;} -.layui-rate:hover{box-shadow: 0 0 10px #CCC; transition: 300ms;} -.layui-rate-primary,.layui-rate-half,.layui-rate-text,.layui-rate-read{display: inline-block;list-style: none;padding: 20px;} -.layui-rate-primary li,.layui-rate-half li,.layui-rate-text li:hover{cursor: pointer;} +.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 li:hover{cursor: pointer;} diff --git a/src/lay/modules/rate.js b/src/lay/modules/rate.js index 89982b6..cb7564b 100644 --- a/src/lay/modules/rate.js +++ b/src/lay/modules/rate.js @@ -23,7 +23,8 @@ layui.define('jquery',function(exports){ } //字符常量 - ,ICON_RATE = 'layui-icon-rate', ICON_RATA_SOLID = 'layui-icon-rate-solid' + ,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' + //构造器 ,Class = function(options){ @@ -35,12 +36,11 @@ layui.define('jquery',function(exports){ //默认配置 Class.prototype.config = { - limit: 10 //每页显示的数量 - ,loading: true //请求数据时，是否显示loading - ,cellMinWidth: 60 //所有单元格默认最小宽度 - ,text: { - none: '无数据' - } + length: 5, //初始长度 + text: false, //是否显示评分等级 + reader: false, //是否只读 + half: false, //是否可以半星 + value: 5, //星星选中个数 }; //评分渲染 @@ -48,85 +48,80 @@ layui.define('jquery',function(exports){ var that = this ,options = that.config; - /* - - div class="layui-rate layui-col-xm4 layui-col-xm-offset4 "> -

只读

-
-
    -
    • -
    • -
    • -
    • -
    • -
-
+ var temp='
    '; + for(var i=1;i<=options.length;i++){ + temp+='
    • '; + } + temp+='
'; - */ - - var obj = { - primary:function(e,x){ - $(e+' > '+x).each(function(index){ - var ind=index; - $(this).mouseover(function(){ - - }), - $(this).mouseout(function(){ - - }), - $(this).click(function(){ - $(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE) - $(this).prevAll().each(function(){ - $(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE) - }) - $(this).nextAll().each(function(){ - $(this).children("i").addClass(ICON_RATE).removeClass(ICON_RATA_SOLID) - }) - }) - }) - }, - half:function(e,x){ - - }, - text:function(e,x){ - $(e+' > '+x).each(function(index){ - var ind=index; - $(this).click(function(){ - $(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE) - $(this).prevAll().each(function(){ - $(this).children("i").addClass(ICON_RATA_SOLID).removeClass(ICON_RATE) - }) - $(this).nextAll().each(function(){ - $(this).children("i").addClass(ICON_RATE).removeClass(ICON_RATA_SOLID) - }) - $(e).next("span").text(ind+1); - }) - }) - } - }; + $(options.elem).after(temp); + if(!options.reader) that.draw(); }; + //li点击事件 + Class.prototype.draw=function(){ + var that = this + ,options = that.config + ,_ul=$(options.elem).next("ul"); + _ul.children("li").each(function(index){ + var ind=index+1; + + //点击 + $(this).click(function(){ + options.value=ind; + + if(options.text) _ul.next("span").text(options.value+"分"); + }) + + //移入 + $(this).mouseover(function(){ + _ul.find("i").each(function(){ + $(this)[0].className=ICON_RATE; + }) + if(options.half){ + $(this).prevAll("li").children("i").each(function(){ + $(this)[0].className=ICON_RATE_SOLID; + }) + if(){ + + } + }else{ + _ul.find("i:lt("+ind+")").each(function(){ + $(this)[0].className=ICON_RATE_SOLID; + }) + } + + }) + + //移出 + $(this).mouseout(function(){ + _ul.find("i").each(function(){ + $(this)[0].className=ICON_RATE; + }) + _ul.find("i:lt("+options.value+")").each(function(){ + $(this)[0].className=ICON_RATE_SOLID; + }) + }) + }) + }; + + //事件处理 Class.prototype.events = function(){ + var that = this + ,options = that.config; + }; - } - - - //核心接口 - rate.render = function(options){ - var inst = new Class(options); - return thisTable.call(inst); - }; //核心入口 rate.render = function(options){ var inst = new Class(options); - return thisTable.call(inst); + return inst; }; - exports('rate', rate); + exports(MOD_NAME, rate); }) \ No newline at end of file