1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
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: 5
| ,value: 5
| ,text: true
| ,half: true
| ,setText1: 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'
| ,value: 3.5
| ,half: true
| ,readonly: true
| })
| });
| </script>
| </body>
| </html>
|
|
