<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>评分</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<style type="text/css">
.demo-slider{
margin-top: 20px;
}
</style>
</head>
<body style="padding: 20px">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>基础效果</legend>
</fieldset>
<div id="test1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示文字</legend>
</fieldset>
<div id="test2"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>半星效果</legend>
</fieldset>
<div id="test3"></div>
<div><div id="test4"></div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义内容</legend>
</fieldset>
<div id="test5"></div>
<div><div id="test6"></div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义长度</legend>
</fieldset>
<div id="test7"></div>
<div><div id="test8"></div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>只读</legend>
</fieldset>
<div id="test9"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义主题色</legend>
</fieldset>
<ul>
<li><div id="test10"></div></li>
<li><div id="test11"></div></li>
<li><div id="test12"></div></li>
<li><div id="test13"></div></li>
<li><div id="test14"></div></li>
</ul>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
layui.use([ 'element', 'jquery', 'colorpicker', 'layer','slider','rate' ], function() {
var $ = layui.jquery;
var element = layui.element;
var colorpicker = layui.colorpicker;
var layer = layui.layer;
var slider=layui.slider;
var rate=layui.rate;
//基础效果
rate.render({
elem: '#test1'
})
//显示文字
rate.render({
elem: '#test2'
,value: 2 //初始值
,text: true //开启文本
});
//半星效果
rate.render({
elem: '#test3'
,value: 2.5 //初始值
,half: true //开启半星
})
rate.render({
elem: '#test4'
,value: 3.5
,half: true
,text: true
})
//自定义文本
rate.render({
elem: '#test5'
,value: 3
,text: true
,setText: function(value){ //自定义文本的回调
var arrs = {
'1': '极差'
,'2': '差'
,'3': '中等'
,'4': '好'
,'5': '极好'
};
this.span.text(arrs[value] || ( value + "星"));
}
})
rate.render({
elem: '#test6'
,value: 1.5
,half: true
,text: true
,setText: function(value){
this.span.text(value);
}
})
//自定义长度
rate.render({
elem: '#test7'
,length: 3
});
rate.render({
elem: '#test8'
,length: 10
,value: 8 //初始值
});
//只读
rate.render({
elem: '#test9'
,value: 4
,readonly: true
});
//主题色
rate.render({
elem: '#test10'
,value: 3
,theme: '#FF8000' //自定义主题色
});
rate.render({
elem: '#test11'
,value: 3
,theme: '#009688'
});
rate.render({
elem: '#test12'
,value: 2.5
,half: true
,theme: '#1E9FFF'
})
rate.render({
elem: '#test13'
,value: 2.5
,half: true
,theme: '#2F4056'
});
rate.render({
elem: '#test14'
,value: 2.5
,half: true
,theme: '#FF0000'
})
/**
RGB ===RAD GREEN BLUE
#F00 16*16*16==?
#00FF00 255*255*255
#FFFF0000 前两位代表透明度
*/
});
</script>
</body>
</html>
详细代码
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/2
Time: 15:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>评分</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>基础效果</legend>
</fieldset>
<div id="test1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>显示文字</legend>
</fieldset>
<div id="test2"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>半星效果</legend>
</fieldset>
<div id="test3"></div>
<div><div id="test4"></div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义内容</legend>
</fieldset>
<div id="test5"></div>
<div><div id="test6"></div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义长度</legend>
</fieldset>
<div id="test7"></div>
<div><div id="test8"></div></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>只读</legend>
</fieldset>
<div id="test9"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>自定义主题色</legend>
</fieldset>
<ul>
<li><div id="test10"></div></li>
<li><div id="test11"></div></li>
<li><div id="test12"></div></li>
<li><div id="test13"></div></li>
<li><div id="test14"></div></li>
</ul>
<script>
layui.use(['element','jquery','colorpicker','layer','rate'], function(){
var $=layui.jquery;
var element=layui.element;
var colorpicker=layui.colorpicker;
var layer=layui.layer;
var rate=layui.rate;
//常规使用
//基础效果
rate.render({
elem: '#test1'
})
//显示文字
rate.render({
elem: '#test2'
,value: 2 //初始值
,text: true //开启文本
});
//半星效果
rate.render({
elem: '#test3'
,value: 2.5 //初始值
,half: true //开启半星
})
rate.render({
elem: '#test4'
,value: 3.5
,half: true
,text: true
})
//自定义文本
rate.render({
elem: '#test5'
,value: 3
,text: true
,setText: function(value){ //自定义文本的回调
var arrs = {
'1': '极差'
,'2': '差'
,'3': '中等'
,'4': '好'
,'5': '极好'
};
this.span.text(arrs[value] || ( value + "星"));
}
})
rate.render({
elem: '#test6'
,value: 1.5
,half: true
,text: true
,setText: function(value){
this.span.text(value);
}
})
//自定义长度
rate.render({
elem: '#test7'
,length: 3
});
rate.render({
elem: '#test8'
,length: 10
,value: 8 //初始值
});
//只读
rate.render({
elem: '#test9'
,value: 4
,readonly: true
});
//主题色
rate.render({
elem: '#test10'
,value: 3
,theme: '#FF8000' //自定义主题色
});
rate.render({
elem: '#test11'
,value: 3
,theme: '#009688'
});
rate.render({
elem: '#test12'
,value: 2.5
,half: true
,theme: '#1E9FFF'
})
rate.render({
elem: '#test13'
,value: 2.5
,half: true
,theme: '#2F4056'
});
rate.render({
elem: '#test14'
,value: 2.5
,half: true
,theme: '#FE0000'
})
});
</script>
</body>
</html>
