-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathSample.htm
More file actions
359 lines (351 loc) · 15.2 KB
/
Copy pathSample.htm
File metadata and controls
359 lines (351 loc) · 15.2 KB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Score.js Sample & Documents</title>
<link rel='stylesheet' href='css/font-awesome-3.2.1.css'>
<link rel="stylesheet" href="css/prism.css">
<link rel='stylesheet' href='css/jQuery.score.css'>
<link rel='stylesheet' href='css/style.css'>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/prism.js"></script>
<script src="js/jQuery.score.js"></script>
<script src="js/application.js"></script>
</head>
<body>
<div id="container">
<header>
<div class="logo">
<h1>Score.js - Sample & Documents</h1>
<p>jQuery Star Rating Plugin</p>
</div>
</header>
<div class="section">
<h1>Option</h1>
<div class="part">
<h2>Default</h2>
<hr>
<p>使用默认参数启用scorejs，当目标标签为 'ul' 时使用将 'li' 标签初始化，否则使用 'span' 标签初始化</p>
<div class="example">
<div style="float:left; width:512px;">
<span>div</span>
<div class="demo-option-default"></div>
</div>
<div class="divider-vertical" style="float:left;"></div>
<div style="float:left;">
<span>ul</span>
<ul class="demo-option-default"></ul>
</div>
<div style="clear:both;"></div>
</div>
<div class="code">
<pre><code class="language-markup"><div class="demo-default"></div> Or <ul class="demo-default"></ul></code></pre>
<pre><code class="language-javascript">$('.demo-default').score();</code></pre>
</div>
<p>配置项默认值保存在$.fn.score.defaults，可在使用前直接修改，修改后将影响到之后创建的所有实例</p>
<p>插件配置项默认值如下：</p>
<div class="code">
<pre><code class="language-javascript">$.fn.score.defaults = {
number : 5,
size : 26,
color : 'black',
score : undefined,
vertical : false,
hints : undefined,
click : undefined,
mouseover : undefined,
mouseout : undefined,
readOnly : false,
fontAwesome : false,
debug : false
}</code></pre>
</div>
</div>
<div class="part">
<h2>Number</h2>
<hr>
<p>评分的范围，设定的数字代表可用来评分的图标总数</p>
<div class="example">
<ul class="demo-option-number"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-number').score({
number: 10
});</code></pre>
</div>
</div>
<div class="part">
<h2>Size</h2>
<hr>
<p>图标的大小，按照CSS的文字尺寸单位px控制大小</p>
<div class="example">
<ul class="demo-option-size"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-number').score({
size: 32
});</code></pre>
</div>
</div>
<div class="part">
<h2>Color</h2>
<hr>
<p>图标的颜色，按照CSS的颜色规则取值</p>
<div class="example">
<ul class="demo-option-color"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-color').score({
color: '#08C'
});</code></pre>
</div>
</div>
<div class="part">
<h2>Score</h2>
<hr>
<p>初始化时的分数</p>
<div class="example">
<ul class="demo-option-score"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-score').score({
score: 3
});</code></pre>
</div>
</div>
<div class="part">
<h2>Vertical</h2>
<hr>
<p>垂直模式，即竖向排列图标</p>
<div class="example">
<ul class="demo-option-vertical"></ul>
</div>
<p>提示：为了能够更自由的在页面定义样式，插件不强行限制图标的宽度，由于垂直分布需要使用块级元素，因此需要自己定义浮动以及清理来自适应宽度</p>
<p>自适应宽度示例(自行查看源代码参考)：</p>
<div class="example">
<ul class="demo-option-vertical" style="float:left;"></ul>
<div style="clear:both;"></div>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-vertical').score({
vertical: true
});</code></pre>
</div>
</div>
<div class="part">
<h2>Hints</h2>
<hr>
<p>用指定文本替换评分条目提示，例: ['bad', 'poor', 'regular', 'good', 'gorgeous']（默认是从1开始的阿拉伯数字）</p>
<p>注意：如果给定的数组元素多余图标数将省略后面的，反之缺少的以对应的阿拉伯数字补上</p>
<div class="example">
<ul class="demo-option-hints"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-hints').score({
hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']
});</code></pre>
</div>
</div>
<div class="part">
<h2>Click</h2>
<hr>
<p>评分图标Click事件回调函数</p>
<p>回调函数中的this指向</p>
<div class="example">
<ul class="demo-option-click"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-click').score({
click: function(score, event){
alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
}
});</code></pre>
</div>
</div>
<div class="part">
<h2>Mouseover</h2>
<hr>
<p>评分图标Mouseover事件回调函数</p>
<div class="example">
<ul class="demo-option-mouseover"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-mouseover').score({
mouseover: function(score, event){
alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
}
});</code></pre>
</div>
</div>
<div class="part">
<h2>Mouseout</h2>
<hr>
<p>评分图标Mouseout事件回调函数</p>
<div class="example">
<ul class="demo-option-mouseout"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-mouseout').score({
mouseout: function(score, event){
alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
}
});</code></pre>
</div>
</div>
<div class="part">
<h2>Read Only</h2>
<hr>
<p>图标的大小，按照CSS的文字尺寸单位px控制大小</p>
<div class="example">
<ul class="demo-option-readOnly"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-readOnly').score({
readOnly: true,
score: 3
});</code></pre>
</div>
</div>
<div class="part">
<h2>FontAwesome</h2>
<hr>
<p>图标的大小，按照CSS的文字尺寸单位px控制大小</p>
<div class="example">
<ul class="demo-option-fontAwesome"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-option-fontAwesome').score({
fontAwesome: true
});</code></pre>
</div>
</div>
</div>
<div class="section">
<h1>API</h1>
<div class="part">
<h2>Score</h2>
<hr>
<p>手动设置分数，如果省略第二个参数将返回当前的分数</p>
<p>设置分数作用于当前jQuery选择器选定的所有元素，获取分数只作用于jQuery对象集合中的第一个元素</p>
<p>注意：如果设定的分数超过Number大小将设置为满分</p>
<div class="code">
<pre><code class="language-javascript">$('.score').score('score', score); // 设置分数为score</code></pre>
<pre><code class="language-javascript">$('.score').score('score'); // 获取分数</code></pre>
</div>
</div>
<div class="part">
<h2>Option</h2>
<hr>
<p>修改或增加配置，如果省略第二个参数将返回当前的配置项对象</p>
<p>给定的配置项同样是对象的形式，其行为是将参数给定的配置项与当前的配置项合并后重新加载</p>
<p>设置配置项作用于当前jQuery选择器选定的所有元素，获取配置项只作用于jQuery对象集合中的第一个元素</p>
<div class="code">
<pre><code class="language-javascript">$('.score').score('option', {optionKey:optionValue[,optionKey:optionValue]}); // 设置配置项</code></pre>
<pre><code class="language-javascript">$('.score').score('option'); // 获取配置项</code></pre>
</div>
</div>
<div class="part">
<h2>ReadOnly</h2>
<hr>
<p>设置为只读模式</p>
<p>此方法仅仅改变展示方式，并不会修改配置项</p>
<p>提示：此方法被触发时将移除所有已绑定的事件，并显示最近设置的分数，如果触发前鼠标仍然在图标上移动但未点击则会立刻显示为前一次点击时的分数</p>
<div class="code">
<pre><code class="language-javascript">$('.score').score('readOnly', true); // 设置为只读</code></pre>
<pre><code class="language-javascript">$('.score').score('readOnly', false); // 取消只读</code></pre>
</div>
</div>
<div class="part">
<h2>Cancel</h2>
<hr>
<p>取消当前评分</p>
<div class="code">
<pre><code class="language-javascript">$('.score').score('cancel');</code></pre>
</div>
</div>
<div class="part">
<h2>Destroy</h2>
<hr>
<p>销毁插件实例</p>
<p>提示：销毁实例时，在初始化前设置的style属性将被还原，初始化之后手动增加和修改的style属性值将被保留（参考Live Demo）</p>
<div class="code">
<pre><code class="language-javascript">$('.score').score('destroy');</code></pre>
</div>
</div>
</div>
<div class="section">
<h1>Live Demo</h1>
<div class="example" style="margin-bottom: 20px;">
<ul class="demo-live-application" style="color:red; font-size:10px;"></ul>
</div>
<div class="code">
<pre><code class="language-javascript">$('.demo-live-application').score({
number : 10,
size : 32,
color : '#08C',
score : 4,
vertical : false,
hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'],
click : function(score, event){
alert('Class Name: '+this.className+'\n' + 'Score: '+score+'\n' + 'Event Type: '+event.type+'\n');
},
readOnly : false,
fontAwesome : true,
debug : true
});
</code></pre>
</div>
<div class="part">
<div class="live-part" style="float:left; width:500px;">
<div>
<span>Set Score</span>
<input class="api-score-input" type="text" value="1">
<button class="api-score-set">Run</button>
</div>
<div>
<span>Get Score</span>
<button class="api-score-get">Run</button>
</div>
<div>
<span>Set Option</span>
<input class="api-option-input" type="text" value="{number:5,size:40,color:'gold'}" style="width:300px;">
<button class="api-option-set">Run</button>
</div>
<div>
<span>Get Option</span>
<button class="api-option-get">Run</button>
</div>
<div>
<span>Set ReadOnly</span>
<button class="api-readOnly-true">Run</button>
</div>
</div>
<div class="live-part" style="float:right; width:500px;">
<div>
<span>Set ReadOnly with 5s delay</span>
<button class="api-readOnly-true-5s">Run</button>
</div>
<div>
<span>Unset ReadOnly</span>
<button class="api-readOnly-false">Run</button>
</div>
<div>
<span>Cancel</span>
<button class="api-cancel">Run</button>
</div>
<div>
<span>Destroy</span>
<button class="api-destroy">Run</button>
</div>
<div>
<span>以例子给定的配置再次初始化</span>
<button class="live-application-create">Run</button>
</div>
</div>
<div style="clear:both;"></div>
</div>
<p>说明：以上代码实现请自行查看application.js</p>
</div>
</div>
</body>
</html>