You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
5.0 KiB
107 lines
5.0 KiB
/** layui-v2.5.6 MIT License By https://www.layui.com */
|
|
;layui.define("jquery",function(e){"use strict";
|
|
// 获取 layui 的 jQuery 实例
|
|
var a=layui.jquery,
|
|
i={config:{},index:layui.rate?layui.rate.index+1e4:0, // 默认配置
|
|
set:function(e){ // 设置配置项
|
|
var i=this;
|
|
return i.config=a.extend({},i.config,e),i
|
|
},
|
|
on:function(e,a){ // 监听事件
|
|
return layui.onevent.call(this,n,e,a)
|
|
}
|
|
};
|
|
|
|
// 定义局部变量
|
|
var l=function(){
|
|
var e=this,a=e.config;
|
|
return {
|
|
setvalue:function(a){ // 设置评分值
|
|
e.setvalue.call(e,a)
|
|
},
|
|
config:a
|
|
}
|
|
},
|
|
n="rate", // 定义组件标识符
|
|
t="layui-rate", // 样式类
|
|
o="layui-icon-rate", // 未选中的星星图标
|
|
s="layui-icon-rate-solid", // 选中的完整星星图标
|
|
u="layui-icon-rate-half", // 半星图标
|
|
r="layui-icon-rate-solid layui-icon-rate-half", // 完整星和半星
|
|
c="layui-icon-rate-solid layui-icon-rate", // 完整星图标
|
|
f="layui-icon-rate layui-icon-rate-half", // 半星图标样式
|
|
v=function(e){ // 评分控件构造函数
|
|
var l=this;
|
|
l.index=++i.index; // 自动递增索引
|
|
l.config=a.extend({},l.config,i.config,e); // 合并配置项
|
|
l.render(); // 渲染评分控件
|
|
};
|
|
|
|
v.prototype.config={length:5,text:!1,readonly:!1,half:!1,value:0,theme:""}, // 默认配置
|
|
v.prototype.render=function(){ // 渲染评分组件
|
|
var e=this,i=e.config,l=i.theme?'style="color: '+i.theme+';"':""; // 处理主题颜色
|
|
i.elem=a(i.elem); // 获取元素
|
|
parseInt(i.value)!==i.value&&(i.half||(i.value=Math.ceil(i.value)-i.value<.5?Math.ceil(i.value):Math.floor(i.value))); // 设置值为整数或半星
|
|
|
|
var n='<ul class="layui-rate" '+(i.readonly?"readonly":"")+">"; // 初始化评分组件HTML结构
|
|
for(var u=1;u<=i.length;u++){
|
|
var r='<li class="layui-inline"><i class="layui-icon '+(u>Math.floor(i.value)?o:s)+'" '+l+"></i></li>";
|
|
i.half&&parseInt(i.value)!==i.value&&u==Math.ceil(i.value)?
|
|
n=n+'<li><i class="layui-icon layui-icon-rate-half" '+l+"></i></li>":n+=r
|
|
}
|
|
n+="</ul>"+(i.text?'<span class="layui-inline">'+i.value+"星":"")+"</span>";
|
|
|
|
var c=i.elem, f=c.next("."+t);
|
|
f[0]&&f.remove(); // 移除旧的评分控件
|
|
e.elemTemp=a(n); // 渲染新的评分控件
|
|
i.span=e.elemTemp.next("span"); // 获取显示评分值的span
|
|
i.setText&&i.setText(i.value); // 设置文本
|
|
c.html(e.elemTemp); // 将评分控件添加到目标元素
|
|
c.addClass("layui-inline"); // 给元素添加样式
|
|
i.readonly||e.action(); // 如果不是只读模式，绑定事件
|
|
};
|
|
|
|
v.prototype.setvalue=function(e){ // 设置评分值并重新渲染
|
|
var a=this,i=a.config;
|
|
i.value=e;
|
|
a.render(); // 重新渲染
|
|
};
|
|
|
|
v.prototype.action=function(){ // 处理点击、鼠标悬停和移出事件
|
|
var e=this,i=e.config,l=e.elemTemp,n=l.find("i").width(); // 获取星星的宽度
|
|
l.children("li").each(function(e){ // 遍历每个星星
|
|
var t=e+1,v=a(this);
|
|
v.on("click",function(e){ // 处理点击事件
|
|
if(i.value=t,i.half){
|
|
var o=e.pageX-a(this).offset().left;
|
|
o<=n/2&&(i.value=i.value-.5) // 半星处理
|
|
}
|
|
i.text&&l.next("span").text(i.value+"星"); // 显示星级
|
|
i.choose&&i.choose(i.value); // 调用用户自定义的选择事件
|
|
i.setText&&i.setText(i.value); // 设置文本
|
|
}),
|
|
v.on("mousemove",function(e){ // 处理鼠标悬停事件
|
|
if(l.find("i").each(function(){a(this).addClass(o).removeClass(r)}),
|
|
l.find("i:lt("+t+")").each(function(){a(this).addClass(s).removeClass(f)}),
|
|
i.half){
|
|
var c=e.pageX-a(this).offset().left;
|
|
c<=n/2&&v.children("i").addClass(u).removeClass(s) // 半星高亮
|
|
}
|
|
}),
|
|
v.on("mouseleave",function(){ // 处理鼠标移出事件
|
|
l.find("i").each(function(){a(this).addClass(o).removeClass(r)});
|
|
l.find("i:lt("+Math.floor(i.value)+")").each(function(){a(this).addClass(s).removeClass(f)});
|
|
i.half&&parseInt(i.value)!==i.value&&l.children("li:eq("+Math.floor(i.value)+")").children("i").addClass(u).removeClass(c)
|
|
})
|
|
});
|
|
};
|
|
|
|
v.prototype.events=function(){ var e=this;e.config}, // 定义事件
|
|
i.render=function(e){ // 渲染评分控件并返回实例
|
|
var a=new v(e);
|
|
return l.call(a);
|
|
};
|
|
|
|
e(n,i) // 导出模块
|
|
});
|