github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

last

pull/231/head
star 7 years ago
parent
ec213f8726
commit
9159559a6b
3 changed files with 65 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      examples/rate.html
  2. 4
      src/css/layui.css
  3. 80
      src/lay/modules/rate.js

27
examples/rate.html
Unescape View File

@ -55,17 +55,22 @@ layui.use(['rate'], function(){
var rate = layui.rate;
//渲染
var ins1 = rate.render({
/*
rate.set({
elem: '#test1'
,length: 7
,value: 4
});
ins1.setvalue(2);
,value: 4.7
,theme: '#c00'
,half: true
,text: true
,reader: true
})
*/
rate.render({
elem: '#test1'
,length: 7
,value: 4.2
,length: 5
,value: 2.2
})
rate.render({
@ -73,21 +78,23 @@ layui.use(['rate'], function(){
,length: 6
,value: 2
,half: true
,theme: '#5FB878'
})
rate.render({
elem: '#test3'
,length: 5
,value: 2.5
,value: 2.8
,text: true
,half: true
,theme: '#FF5722'
})
rate.render({
elem: '#test4'
,length: 8
,value: 4.7
,value: 4.8
,reader: true
,theme: '#01AAED'
})
});
</script>
</body>

4
src/css/layui.css
Unescape View File

@ -1038,9 +1038,9 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
/** 评分组件 **/
.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{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{display: inline-block; list-style: none; padding: 10px;}
.layui-rate li:hover{cursor: pointer;}

80
src/lay/modules/rate.js
Unescape View File

@ -36,8 +36,9 @@ 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',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half'
,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half', ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate', ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half'
//构造器
,Class = function(options){
@ -49,33 +50,40 @@ layui.define('jquery',function(exports){
//默认配置
Class.prototype.config = {
length: 5, //初始长度
text: false, //是否显示评分等级
reader: false, //是否只读
half: false, //是否可以半星
value: 3 //星星选中个数
length: 5 //初始长度
,text: false //是否显示评分等级
,reader: false //是否只读
,half: false //是否可以半星
,value: 0 //星星选中个数
,theme: ''
};
//评分渲染
Class.prototype.render = function(){
var that = this
,options = that.config;
//如果没有选择半星的属性，却给了小数的数值，同意向上或向下取整
,options = that.config
,style = 'style="color: '+ options.theme + ';"';
options.elem = $(options.elem);
//如果没有选择半星的属性，却给了小数的数值，统一向上或向下取整
if(parseInt(options.value) !== options.value){
if(!options.half){
options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value)
}
}
//模板
//组件模板
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>';
var item = '<li class="layui-inline"><i class="layui-icon '
+ (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID)
+ '" '+ style +'></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>';
temp = temp + '<li class="layui-inline"><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
}else{
temp = temp + item
}
@ -83,34 +91,42 @@ layui.define('jquery',function(exports){
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 = temp +item;
}
}
temp += '</ul><span>' + (options.text ? options.value + "分" : "") + '</span>';
$(options.elem).after(temp);
//开始插入替代元素
var othis = options.elem
,hasRender = othis.next('.' + ELEM_VIEW);
//生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
that.elemTemp = $(temp);
othis.html(that.elemTemp);
othis.addClass("layui-inline");
//如果不是只读，那么进行触控事件
if(!options.reader) that.action();
};
//重置value
//评分重置
Class.prototype.setvalue = function(value){
var that = this
,options = that.config ;
options.value = value
}
options.value = value ;
that.render();
};
//li触控事件
Class.prototype.action = function(){
var that = this
,options = that.config
,_ul = $(options.elem).next("ul");
,_ul = that.elemTemp;
_ul.children("li").each(function(index){
var ind = index + 1
@ -120,7 +136,6 @@ layui.define('jquery',function(exports){
othis.on('click', function(e){
//将当前点击li的索引值赋给value
options.value = ind;
if(options.half){
//获取鼠标在li上的位置
var x = e.pageX - $(this).offset().left;
@ -133,18 +148,17 @@ layui.define('jquery',function(exports){
//移入
othis.on('mousemove', function(e){
_ul.find("i").each(function(){
this.className = ICON_RATE;
_ul.find("i").each(function(){
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});
_ul.find("i:lt(" + ind + ")").each(function(){
this.className = ICON_RATE_SOLID ;
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
});
// 如果设置可选半星，那么判断鼠标相对li的位置
if(options.half){
var x = e.pageX - $(this).offset().left;
if(x <= 13){
$(this).children("i")[0].className = ICON_RATE_HALF ;
othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID)
}
}
})
@ -152,15 +166,15 @@ layui.define('jquery',function(exports){
//移出
othis.on('mouseout', function(){
_ul.find("i").each(function(){
this.className = ICON_RATE;
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});
_ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
this.className = ICON_RATE_SOLID;
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
});
//如果设置可选半星，根据分数判断是否有半星
if(options.half){
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").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE)
}
}
})
@ -168,12 +182,10 @@ layui.define('jquery',function(exports){
})
};
//事件处理
Class.prototype.events = function(){
var that = this
,options = that.config;
};
//核心入口

Write Preview
Loading…
Cancel
Save