生活随笔
收集整理的這篇文章主要介紹了
评分
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
評分
<%@ 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>
總結
以上是生活随笔為你收集整理的评分的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
