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

增加 rate 组件

pull/231/head
star 7 years ago
parent
c588a3a3b1
commit
6c5900d0f5
3 changed files with 66 additions and 29 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. 45
      examples/rate.html
  2. 16
      src/css/layui.css
  3. 34
      src/lay/modules/rate.js

45
examples/rate.html
Unescape View File

@ -55,22 +55,34 @@ layui.use(['rate'], function(){
var rate = layui.rate;
//渲染
/*
rate.set({
elem: '#test1'
,length: 7
,value: 4.7
,theme: '#c00'
,half: true
,text: true
,reader: true
})
*/
// rate.set({
// elem: '#test1'
// ,length: 7
// ,value: 4.7
// ,theme: '#c00'
// ,half: true
// ,text: true
// ,reader: true
// })
rate.render({
elem: '#test1'
,length: 5
,length: 3
,value: 2.2
,text: true
,half: true
,setText: function(value){
var arrs = {
'0.5': '极差'
, '1' : '一般'
,'1.5': '满意'
,'2': '极满意'
};
this.span.text(arrs[value] || ( value + "星"));
}
})
rate.render({
@ -79,15 +91,20 @@ layui.use(['rate'], function(){
,value: 2
,half: true
,theme: '#5FB878'
,choose: function(value){
if( value > 3) alert("111")
}
})
rate.render({
elem: '#test3'
,length: 5
,length: 3
,value: 2.8
,text: true
,half: true
,theme: '#FF5722'
})
rate.render({
elem: '#test4'
,length: 8

16
src/css/layui.css
Unescape View File

@ -1037,11 +1037,14 @@ 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,.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: 10px;}
.layui-rate li:hover{cursor: pointer;}
.layui-icon-rate,
.layui-icon-rate-solid,
.layui-icon-rate-half{ font-size: 20px; color: #FFB800;}
.layui-rate,
.layui-rate *{display: inline-block; vertical-align: middle;}
.layui-rate{list-style: none; padding: 10px 5px 10px 0; font-size: 0;}
.layui-rate li i{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
.layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}
@ -1280,7 +1283,8 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-anim{-webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.layui-anim.layui-icon{display: inline-block;}
.layui-anim-loop{-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.layui-trans,.layui-trans a{transition: all .3s; -webkit-transition: all .3s;} /* 过度变换 */
.layui-trans,
.layui-trans a{transition: all .3s; -webkit-transition: all .3s;} /* 过度变换 */
@-webkit-keyframes layui-rotate{ /* 循环旋转 */
from {-webkit-transform: rotate(0deg);}

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

@ -1,4 +1,10 @@
/**
@Title: layui.upload 文件上传
@Author: star
@License：MIT
*/
layui.define('jquery',function(exports){
"use strict";
@ -62,7 +68,7 @@ layui.define('jquery',function(exports){
Class.prototype.render = function(){
var that = this
,options = that.config
,style = 'style="color: '+ options.theme + ';"';
,style = options.theme ? ('style="color: '+ options.theme + ';"') : '';
options.elem = $(options.elem);
@ -83,7 +89,7 @@ layui.define('jquery',function(exports){
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" '+ style +'></i></li>';
temp = temp + '<li><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
}else{
temp = temp + item
}
@ -94,7 +100,7 @@ layui.define('jquery',function(exports){
temp = temp +item;
}
}
temp += '</ul><span>' + (options.text ? options.value + "分" : "") + '</span>';
temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>';
//开始插入替代元素
var othis = options.elem
@ -104,6 +110,11 @@ layui.define('jquery',function(exports){
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
that.elemTemp = $(temp);
options.span = that.elemTemp.next('span');
options.setText && options.setText(options.value);
othis.html(that.elemTemp);
othis.addClass("layui-inline");
@ -126,7 +137,8 @@ layui.define('jquery',function(exports){
Class.prototype.action = function(){
var that = this
,options = that.config
,_ul = that.elemTemp;
,_ul = that.elemTemp
,wide = _ul.find("i").width();
_ul.children("li").each(function(index){
var ind = index + 1
@ -139,12 +151,16 @@ layui.define('jquery',function(exports){
if(options.half){
//获取鼠标在li上的位置
var x = e.pageX - $(this).offset().left;
if(x <= 13){
if(x <= wide / 2){
options.value = options.value - 0.5;
}
}
if(options.text) _ul.next("span").text(options.value + "分")
})
if(options.text) _ul.next("span").text(options.value + "星");
options.choose && options.choose(options.value);
options.setText && options.setText(options.value);
});
//移入
othis.on('mousemove', function(e){
@ -157,14 +173,14 @@ layui.define('jquery',function(exports){
// 如果设置可选半星，那么判断鼠标相对li的位置
if(options.half){
var x = e.pageX - $(this).offset().left;
if(x <= 13){
if(x <= wide / 2){
othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID)
}
}
})
//移出
othis.on('mouseout', function(){
othis.on('mouseleave', function(){
_ul.find("i").each(function(){
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});

Write Preview
Loading…
Cancel
Save