score
<%@ 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','layer', 'slider', 'rate'], function () {
var $ = layui.jquery;
var element = layui.element;
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>
