theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #231 from star1029/master

Browse Source 
add layui.rate
This commit is contained in:
贤心 2018-04-28 11:13:50 +08:00 committed by GitHub
commit a6e805c15e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 361 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
examples/rate.html Normal file
View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>评分 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<!-- 基础评分用法 -->
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>基础用法</h3>
<hr>
<div id="test1"></div>
</div>
<!-- 半星评分用法 -->
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>选中半星</h3>
<hr>
<div id="test2"></div>
</div>
<!-- 显示提示文字 -->
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>显示提示文字</h3>
<hr>
<div id="test3"></div>
<span></span>
</div>
<!-- 只读 -->
<div class="layui-rate-div layui-col-xm4 layui-col-xm-offset4 ">
<h3>只读</h3>
<hr>
<div id="test4"></div>
</div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
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.render({
elem: '#test1'
,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({
elem: '#test2'
,length: 6
,value: 2
,half: true
,theme: '#5FB878'
,choose: function(value){
if( value > 3) alert("111")
}
})
rate.render({
elem: '#test3'
,length: 3
,value: 2.8
,text: true
,half: true
,theme: '#FF5722'
})
rate.render({
elem: '#test4'
,length: 8
,value: 4.8
,reader: true
,theme: '#01AAED'
})
});
</script>
</body>
</html>

18
src/css/layui.css
View File

@ -362,6 +362,12 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-icon-cellphone:before { content: "\e678"; }
.layui-icon-rate:before { content: "\e67b"; }
.layui-icon-rate-solid:before { content: "\e67a"; }
.layui-icon-rate-half:before { content: "\e6c9"; }
/* 基本布局 */
@ -1030,6 +1036,15 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-upload-wrap{position: relative; display: inline-block; vertical-align: middle;}
.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: 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);}
/** 代码修饰器 **/
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}
@ -1265,7 +1280,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);}

BIN
src/font/iconfont.eot
View File

Binary file not shown.

9
src/font/iconfont.svg
View File

@ -144,6 +144,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<glyph glyph-name="duigou" unicode="&#58904;" d="M0.055-30.783c0.341-0.341 0.683-0.683 1.023-1.023-0.881-0.199-1.222 0.142-1.023 1.023zM422.68-31.806c0.341 0.341 0.683 0.683 1.023 1.023 0.199-0.881-0.142-1.222-1.023-1.023zM1188.586 507.499c0.796-6.455-2.732-8.658-7.385-10.598-135.179-56.381-231.75-157.232-314.81-273.594-48.424-67.839-89.128-140.154-123.426-216.017-5.928-13.112-8.996-15.349-20.062-4.384-87.123 86.327-174.761 172.135-262.272 258.071-12.668 12.439-25.155 25.098-38.381 36.921-9.294 8.308-10.355 13.069 2.455 19.008 33.244 15.413 66.428 31.089 98.694 48.415 13.919 7.474 22.089 4.601 32.375-5.67 54.34-54.26 109.269-107.929 164.023-161.773 15.688-15.428 15.25-15.216 22.655 5.97 23.948 68.521 59.387 131.482 96.277 193.496 83.563 140.471 176.983 274.364 274.181 405.661 2.902 3.92 4.786 11.051 10.606 9.738 5.874-1.324 3.992-8.698 4.946-13.298 19.893-95.846 39.493-191.752 59.156-287.646 0.346-1.682 0.755-3.351 0.97-4.298z" horiz-adv-x="1600" />
<glyph glyph-name="rate-half" unicode="&#59081;" d="M1012.064 504l-359.552 31.008-140.512 331.04-140.512-331.552-359.552-30.496 273.024-236.544-82.016-351.552 309.056 186.528 309.056-186.528-81.504 351.552 272.544 236.544zM512 195.96799999999996l0 465.056 85.504-202.016 219.04-19.008-166.016-144.032 50.016-214.016-188.512 114.016z" horiz-adv-x="1024" />
<glyph glyph-name="tianjia1" unicode="&#58888;" d="M509.989715-60.972421c-246.734474 0-446.75195 200.023616-446.75195 446.75809 0 246.732427 200.017476 446.75195 446.75195 446.75195 246.733451 0 446.757067-200.019523 446.757067-446.75195C956.746782 139.051195 756.723166-60.972421 509.989715-60.972421L509.989715-60.972421zM509.989715 812.433746c-235.633648 0-426.650123-191.014428-426.650123-426.648077 0-235.639788 191.016475-426.654216 426.650123-426.654216 235.638765 0 426.654216 191.014428 426.654216 426.654216C936.643931 621.419318 745.62848 812.433746 509.989715 812.433746L509.989715 812.433746zM527.863804 153.46958l-35.741016 0L492.122789 367.909533 277.678742 367.909533 277.678742 403.653619l214.443024 0L492.121765 618.095619l35.741016 0L527.862781 403.653619l214.442 0 0-35.744086L527.863804 367.909533 527.863804 153.46958 527.863804 153.46958zM527.863804 153.46958" horiz-adv-x="1024" />
@ -243,6 +246,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<glyph glyph-name="liucheng" unicode="&#58914;" d="M512.02048 640.02048c3.584 0 6.06208 0 8.54016 0 124.19072 0 248.40192 0.04096 372.59264 0 31.10912 0 56.07424-18.08384 63.73376-46.42816 1.67936-6.20544 2.41664-12.86144 2.41664-19.29216 0.12288-169.63584 0.14336-339.2512 0.06144-508.88704-0.02048-38.03136-27.72992-65.67936-65.7408-65.69984-254.3616-0.06144-508.70272-0.06144-763.04384 0-38.1952 0.02048-65.96608 27.91424-65.96608 66.17088-0.04096 211.98848-0.04096 423.95648 0 635.96544 0 38.5024 27.87328 66.43712 66.31424 66.43712 104.83712 0.04096 209.69472 0.04096 314.53184 0 38.74816 0 66.37568-27.5456 66.49856-66.17088 0.12288-18.37056 0.06144-36.78208 0.06144-55.17312C512.02048 644.87424 512.02048 642.82624 512.02048 640.02048zM128.9216 640.4096c106.51648 0 212.56192 0 318.8736 0 0 21.31968 0 42.25024 0 63.3856-106.47552 0-212.52096 0-318.8736 0C128.9216 682.63936 128.9216 661.8112 128.9216 640.4096z" horiz-adv-x="1024" />
<glyph glyph-name="rate-solid" unicode="&#59002;" d="M957.111079 492.519576c-3.927449 11.669784-14.447037 19.86442-26.723641 20.816095L647.68068 535.250796 540.183388 811.873997c-4.586458 11.803837-15.951297 19.579941-28.614711 19.579941s-24.02723-7.776104-28.614711-19.579941L375.458719 535.250796l-282.708803-21.915126c-12.276604-0.951675-22.796192-9.146311-26.723641-20.816095-3.927449-11.669784-0.50142-24.557302 8.701173-32.737612l217.547735-193.358823-67.980277-291.298436c-2.848884-12.20702 2.009773-24.919553 12.273535-32.114418 10.264784-7.195889 23.87271-7.42818 34.375925-0.586354l240.624313 156.709111 240.625336-156.709111c5.099135-3.320629 10.92891-4.974291 16.752546-4.974291 6.173606 0 12.342096 1.858324 17.623379 5.561669 10.263761 7.194866 15.122419 19.907399 12.273535 32.114418l-67.980277 291.299459L948.409906 459.781964C957.613522 467.962274 961.037505 480.849792 957.111079 492.519576z" horiz-adv-x="1024" />
<glyph glyph-name="fontstrikethrough" unicode="&#58959;" d="M928 448l-143.616 0c-3.456 55.616-14.272 106.56-29.504 144.96C725.504 666.816 617.344 768 464.32 768L256 768l0-320L96 448C78.336 448 64 433.664 64 416S78.336 384 96 384L256 384l0-320 229.632 0c156.288 0 240.768 97.856 267.904 167.488C772.736 280.96 782.272 333.312 784.96 384L928 384C945.664 384 960 398.336 960 416S945.664 448 928 448zM349.376 711.488l63.936 0c35.712 0 251.84 27.968 266.944-263.488l-330.88 0L349.376 711.488zM439.296 120.512 349.376 120.512 349.376 382.528 349.376 384l330.88 0C665.344 113.984 467.968 120.512 439.296 120.512z" horiz-adv-x="1024" />
@ -465,6 +471,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<glyph glyph-name="star-fill" unicode="&#58968;" d="M752-43.200000000000045c-9.6 0-20.8 3.2-30.4 8l-208 104-209.6-104c-20.8-11.2-48-9.6-67.2 4.8-19.2 14.4-30.4 40-25.6 64l43.2 224L89.6 411.2C72 428.8 65.6 456 72 478.4c8 24 27.2 41.6 52.8 44.8l228.8 41.6 102.4 208c11.2 22.4 33.6 36.8 57.6 36.8s48-14.4 57.6-36.8l102.4-208 228.8-40c24-3.2 44.8-20.8 51.2-44.8 8-24 1.6-49.6-16-67.2L772.8 257.6l41.6-224c4.8-25.6-6.4-49.6-25.6-64-9.6-8-22.4-12.8-36.8-12.8z" horiz-adv-x="1024" />
<glyph glyph-name="rate" unicode="&#59003;" d="M959.008 489.984l-308 47.008L512 832 372.992 536.992l-308-47.008 223.008-228-52.992-324L512 90.976l276.992-152.992-52.992 324zM512 156L304 39.00800000000004l40 235.008-179.008 182.016 242.016 32 104.992 224 104-224 240.992-34.016L680 273.024l36.992-235.008z" horiz-adv-x="1024" />
<glyph glyph-name="template-1" unicode="&#58966;" d="M512 384zM43.52 601.6l409.6-176.64c58.88-30.72 110.08 0 110.08 0l414.72 174.08 2.56 2.56c10.24 5.12 15.36 15.36 15.36 28.16 0 15.36-10.24 28.16-23.04 30.72L563.2 837.12c-56.32 23.04-97.28 0-97.28 0L46.08 660.48c-12.8-5.12-20.48-17.92-20.48-30.72s7.68-23.04 17.92-28.16z m0 0M512 222.72000000000003c-2.56 0-7.68 0-10.24 2.56l-486.4 215.04c-12.8 5.12-17.92 20.48-12.8 33.28 5.12 12.8 20.48 17.92 33.28 12.8L512 276.48 988.16 486.4c12.8 5.12 28.16 0 33.28-12.8 5.12-12.8 0-28.16-12.8-33.28l-486.4-215.04c-2.56-2.56-7.68-2.56-10.24-2.56zM512 71.67999999999995c-2.56 0-7.68 0-10.24 2.56l-486.4 215.04c-12.8 5.12-17.92 20.48-12.8 33.28 5.12 10.24 20.48 17.92 33.28 10.24L512 125.44000000000005 988.16 332.79999999999995c12.8 5.12 28.16 0 33.28-12.8 5.12-12.8 0-28.16-12.8-33.28l-486.4-215.04H512zM512-79.36000000000001c-2.56 0-7.68 0-10.24 2.56l-486.4 215.04c-12.8 5.12-17.92 20.48-12.8 33.28 5.12 12.8 20.48 17.92 33.28 12.8L512-25.600000000000023l476.16 209.92c12.8 5.12 28.16 0 33.28-12.8 5.12-12.8 0-28.16-12.8-33.28l-486.4-215.04c-2.56-2.56-7.68-2.56-10.24-2.56z" horiz-adv-x="1024" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 269 KiB

After

Width:  |  Height:  |  Size: 270 KiB

BIN
src/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/font/iconfont.woff
View File

Binary file not shown.

214
src/lay/modules/rate.js Normal file
View File

@ -0,0 +1,214 @@
/**
@Title: layui.upload 文件上传
@Author: star
@License：MIT
*/
layui.define('jquery',function(exports){
"use strict";
var $ = layui.jquery
//外部接口
,rate = {
config: {}
,index: layui.rate ? (layui.rate.index + 10000) : 0
//设置全局项
,set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件监听
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
,thisRate = function(){
var that = this
,options = that.config;
return {
setvalue: function(value){
that.setvalue.call(that, value);
}
,config: options
}
}
//字符常量
,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){
var that = this;
that.index = ++rate.index;
that.config = $.extend({}, that.config, rate.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
length: 5 //初始长度
,text: false //是否显示评分等级
,reader: false //是否只读
,half: false //是否可以半星
,value: 0 //星星选中个数
,theme: ''
};
//评分渲染
Class.prototype.render = function(){
var that = this
,options = that.config
,style = options.theme ? ('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)?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><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>';
}else{
temp = temp + item
}
}else{
temp = temp + item
}
}else{
temp = temp +item;
}
}
temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>';
//开始插入替代元素
var othis = options.elem
,hasRender = othis.next('.' + ELEM_VIEW);
//生成替代元素
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");
//如果不是只读，那么进行触控事件
if(!options.reader) that.action();
};
//评分重置
Class.prototype.setvalue = function(value){
var that = this
,options = that.config ;
options.value = value ;
that.render();
};
//li触控事件
Class.prototype.action = function(){
var that = this
,options = that.config
,_ul = that.elemTemp
,wide = _ul.find("i").width();
_ul.children("li").each(function(index){
var ind = index + 1
,othis = $(this);
//点击
othis.on('click', function(e){
//将当前点击li的索引值赋给value
options.value = ind;
if(options.half){
//获取鼠标在li上的位置
var x = e.pageX - $(this).offset().left;
if(x <= wide / 2){
options.value = options.value - 0.5;
}
}
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){
_ul.find("i").each(function(){
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});
_ul.find("i:lt(" + ind + ")").each(function(){
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE)
});
// 如果设置可选半星，那么判断鼠标相对li的位置
if(options.half){
var x = e.pageX - $(this).offset().left;
if(x <= wide / 2){
othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID)
}
}
})
//移出
othis.on('mouseleave', function(){
_ul.find("i").each(function(){
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF)
});
_ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){
$(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").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE)
}
}
})
})
};
//事件处理
Class.prototype.events = function(){
var that = this
,options = that.config;
};
//核心入口
rate.render = function(options){
var inst = new Class(options);
return thisRate.call(inst);
};
exports(MOD_NAME, rate);
})

5
src/layui.js
View File

@ -59,9 +59,10 @@
,tree: 'modules/tree' //树结构
,table: 'modules/table' //表格
,element: 'modules/element' //常用元素操作
,util: 'modules/util' //工具块
,flow: 'modules/flow' //流加载
,rate: 'modules/rate' //评分组件
,carousel: 'modules/carousel' //轮播
,flow: 'modules/flow' //流加载
,util: 'modules/util' //工具块
,code: 'modules/code' //代码修饰器
,jquery: 'modules/jquery' //DOM库（第三方）