floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第四次配置

Browse Source
This commit is contained in:
star 2018-04-25 19:21:27 +08:00
parent 53e3951331
commit 5a27ef86a6
3 changed files with 98 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
examples/rate.html
View File

@ -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',
length: 7,
value: 4
elem: '#test1'
,length: 7
,value: 4
})
rate.render({
elem: '#test2'
,length: 6
,value: 2
,half: true
})
rate.render({
elem: '#test2',
length: 6,
value: 2,
half: true
elem: '#test3'
,length: 5
,value: 2.5
,text: true
,half: true
})
rate.render({
elem: '#test3',
length: 5,
value: 3,
text: true
})
rate.render({
elem: '#test4',
length: 8,
value: 5,
reader: true
elem: '#test4'
,length: 8
,value: 5
,reader: true
})
});

2
src/css/layui.css
View File

@ -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;}

99
src/lay/modules/rate.js
View File

@ -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(){
$(this)[0].className=ICON_RATE_SOLID;
})
if(){
var x=e.pageX-$(this).offset().left;
if(x<=13){
$(this).children("i")[0].className=ICON_RATE_HALF
}
}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;
})
_ul.find("i:lt("+options.value+")").each(function(){
$(this)[0].className=ICON_RATE_SOLID;
this.className=ICON_RATE;
});
_ul.find("i:lt("+ Math.floor(options.value) +")").each(function(){
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);