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

test

Browse Source
This commit is contained in:
star1029 2018-04-25 22:48:22 +08:00
parent 5a27ef86a6
commit fd86bdb0d4
2 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/rate.html
View File

@ -66,7 +66,7 @@ layui.use(['rate'], function(){
rate.render({ rate.render({
elem: '#test1' elem: '#test1'
,length: 7 ,length: 7
,value: 4 ,value: 4.2
}) })
rate.render({ rate.render({
@ -85,7 +85,7 @@ layui.use(['rate'], function(){
rate.render({ rate.render({
elem: '#test4' elem: '#test4'
,length: 8 ,length: 8
,value: 5 ,value: 4.7
,reader: true ,reader: true
}) })

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

@ -39,7 +39,7 @@ 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', 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'
//构造器 //构造器
@ -56,7 +56,7 @@ layui.define('jquery',function(exports){
text: false, //是否显示评分等级 text: false, //是否显示评分等级
reader: false, //是否只读 reader: false, //是否只读
half: false, //是否可以半星 half: false, //是否可以半星
value: 5, //星星选中个数 value: 3 //星星选中个数
}; };
//评分渲染 //评分渲染
@ -64,71 +64,80 @@ layui.define('jquery',function(exports){
var that = this var that = this
,options = that.config; ,options = that.config;
//如果没有选择半星的属性，却给了小数的数值，同意向上或向下取整
var temp='<ul class="layui-rate">'; if(parseInt(options.value) !== options.value){
for(var i=1;i<=options.length;i++){ if(!options.half){
if(options.half){ options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value)
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>'+(options.text ? options.value+"分" : "")+'</span>';
//模板
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>';
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 + item
}
}else{
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 += '</ul><span>' + (options.text ? options.value + "分" : "") + '</span>';
$(options.elem).after(temp); $(options.elem).after(temp);
//如果不是只读，那么进行点击事件 //如果不是只读，那么进行触控事件
if(!options.reader) that.action(); if(!options.reader) that.action();
}; };
//li点击事件 //li触控事件
Class.prototype.action=function(){ Class.prototype.action = function(){
var that = this var that = this
,options = that.config ,options = that.config
,_ul=$(options.elem).next("ul"); ,_ul = $(options.elem).next("ul");
_ul.children("li").each(function(index){ _ul.children("li").each(function(index){
var ind=index + 1, othis = $(this); var ind = index + 1
,othis = $(this);
//点击 //点击
othis.on('click', function(e){ othis.on('click', function(e){
options.value=ind; //将当前点击li的索引值赋给value
options.value = ind;
if(options.half){ if(options.half){
var x=e.pageX-$(this).offset().left; //获取鼠标在li上的位置
if(x<=13){ var x = e.pageX - $(this).offset().left;
options.value=options.value-0.5; if(x <= 13){
options.value = options.value - 0.5;
} }
} }
if(options.text) _ul.next("span").text(options.value+"分"); if(options.text) _ul.next("span").text(options.value + "分")
}) })
//移入 //移入
othis.on('mousemove', function(e){ othis.on('mousemove', function(e){
_ul.find("i").each(function(){ _ul.find("i").each(function(){
this.className = ICON_RATE; this.className = ICON_RATE;
}) });
_ul.find("i:lt("+ind+")").each(function(){ _ul.find("i:lt(" + ind + ")").each(function(){
this.className = ICON_RATE_SOLID; this.className = ICON_RATE_SOLID ;
}) });
// 如果设置可选半星，那么判断鼠标相对li的位置 // 如果设置可选半星，那么判断鼠标相对li的位置
if(options.half){ if(options.half){
var x=e.pageX-$(this).offset().left; var x = e.pageX - $(this).offset().left;
if(x<=13){ if(x <= 13){
$(this).children("i")[0].className=ICON_RATE_HALF $(this).children("i")[0].className = ICON_RATE_HALF ;
} }
} }
}) })
@ -136,17 +145,19 @@ layui.define('jquery',function(exports){
//移出 //移出
othis.on('mouseout', function(){ othis.on('mouseout', function(){
_ul.find("i").each(function(){ _ul.find("i").each(function(){
this.className=ICON_RATE; this.className = ICON_RATE;
}); });
_ul.find("i:lt("+ Math.floor(options.value) +")").each(function(){ _ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
this.className=ICON_RATE_SOLID; this.className = ICON_RATE_SOLID;
}) });
if(options.half){ if(options.half){
if(parseInt(options.value)!== options.value){ 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")[0].className = ICON_RATE_HALF ;
} }
} }
}) })
}) })
}; };