layui评分
-
评分
<%@ 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>