Context Navigation

index.html @ 6754

Revision 6754, 28.4 KB checked in by niltonneto, 12 years ago (diff)
Ticket #0000 - Copiadas as alterações do Trunk. Versão final da 2.4.1.
Property svn:executable set to ``*

Line
1	<!DOCTYPE html>
2
3	<html lang="en" dir="ltr">
4	<head>
5	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6	<meta http-equiv="Pragma" content="no-cache">
7	<meta http-equiv="Expires" content="-1">
8	<meta name="keywords" content="jquery,rating,raty,voto,star,staring,classificacao,classificar,votar,plugin" />
9	<meta name="description" content="jQuery Raty - A Star Rating Plugin" />
10
11	<title>jQuery Raty - A Star Rating Plugin</title>
12
13	<!-- This CSS does not belong to the plugin. -->
14	<link type="text/css" rel="stylesheet" href="doc/css/stylesheet.css"/>
15
16	<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
17	<script type="text/javascript" charset="utf-8" src="js/jquery.raty.min.js"></script>
18
19	<script type="text/javascript">
20	// This code does NOT belong the plugin. See the example code at the bottom of this page.
21	var _gaq = _gaq \|\| [];
22	_gaq.push(['_setAccount', 'UA-194992347-3']);
23	_gaq.push(['_trackPageview']);
24
25	(function() {
26	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
27	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
28	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
29	})();
30	</script>
31	</head>
32	<body>
33	<div id="header">
34	<div id="title">
35	<a href="http://wbotelhos.com/raty">jQuery Raty - A Star Rating Plugin</a>
36	<span id="version">(current version: 2.4.5)</span>
37	</div>
38
39	<div id="menu">
40	<a href="http://github.com/downloads/wbotelhos/raty/jquery.raty-2.4.5.zip" target="_blank">Download</a> \|
41	<a href="http://github.com/wbotelhos/raty" target="_blank">Github</a> \|
42	<a href="http://www.wbotelhos.com/raty/changelog.md" target="_blank">Change Log</a> \|
43	<a href="http://www.wbotelhos.com/raty/README.md" target="_blank">Readme</a> \|
44	<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin" target="_blank">Article</a> \|
45	<a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">License</a> \|
46	<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> \|
47	<a href="http://www.wbotelhos.com/lab" target="_blank" style="color: #000;">yLab</a>
48	</div>
49
50	<a id="coffee" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=X8HEP2878NDEG&item_name=jQuery%20Raty" target="_blank">buy me a coffee</a>
51
52	<div class="description">jQuery <strong>Raty</strong> is a plugin that generates a customizable star rating.</div>
53	</div>
54
55	<div id="content">
56	<div id="default-demo" class="session-first">Default options:</div>
57
58	<div id="default"></div>
59
60	<div class="source">
61	$('#star').raty();<br/><br/>
62
63	<div id="star"></div>
64	</div>
65
66	<div id="fixed-demo" class="session">Started with a score and read only value:</div>
67	<div id="fixed"></div>
68
69	<div class="source">
70	$('#star').raty({<br/>
71	readOnly : true,<br/>
72	score    : 2<br/>
73	});<br/><br/>
74
75	<div id="star"></div>
76	</div>
77
78	<div id="score-demo" class="session">Starting with a callback:</div>
79	<div id="score" data-rating="3"></div>
80
81	<div class="source">
82	$('#score').raty({<br/>
83	score: function() {<br/>
84	return $(this).attr('data-rating');<br/>
85	}<br/>
86	});<br/><br/>
87
88	<div id="star" data-rating="3"></div>
89	</div>
90
91	<div id="anyone-demo" class="session">A hint for no rated elements when it's read-only:</div>
92	<div id="anyone"></div>
93
94	<div class="source">
95	$('#star').raty({<br/>
96	readOnly   : true,<br/>
97	noRatedMsg : 'anyone rated this product yet!'<br/>
98	});<br/><br/>
99
100	<div id="star"></div>
101	</div>
102
103	<div id="number-demo" class="session">Custom score name and a number of stars:</div>
104	<div id="number"></div>
105
106	<div class="source">
107	$('#star').raty({<br/>
108	scoreName : 'entity.score',<br/>
109	number    : 10<br/>
110	});<br/><br/>
111
112	<div id="star"></div>
113	</div>
114
115	<div id="click-demo" class="session">Using click function:</div>
116	<div id="click"></div>
117
118	<div class="source">
119	$('#star').raty({<br/>
120	click: function(score, evt) {<br/>
121	alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);<br/>
122	}<br/>
123	});<br/><br/>
124
125	<div id="star"></div>
126	</div><br/>
127
128	<span class="comment">
129	- The argument score is the selected value;<br/>
130	- The argument evt is the click event;<br/>
131	- You can mension the star element (DOM) itself using 'this'.<br/>
132	</span>
133
134	<div id="cancel-demo" class="session">Default cancel button:</div>
135	<div id="cancel"></div>
136
137	<div class="source">
138	$('#star').raty({<br/>
139	cancel: true<br/>
140	});<br/><br/>
141
142	<div id="star"></div>
143	</div><br/>
144
145	<span class="comment">
146	- The score value for the click on cancel button is null.<br/>
147	</span>
148
149	<div id="cancel-custom-demo" class="session">Custom cancel button:</div>
150	<div id="cancel-custom"></div>
151
152	<div class="source">
153	$('#star').raty({<br/>
154	cancel      : true,<br/>
155	cancelHint  : 'remove my rating!',<br/>
156	cancelPlace : 'right',<br/>
157	click       : function(score, evt) {<br/>
158	alert('score: ' + score);<br/>
159	}<br/>
160	});<br/><br/>
161
162	<div id="star"></div>
163	</div>
164
165	<div id="half-demo" class="session">Half star voting:</div>
166	<div id="half"></div>
167
168	<div class="source">
169	$('#star').raty({<br/>
170	half  : true,<br/>
171	score : 3.3<br/>
172	});<br/><br/>
173
174	<div id="star"></div>
175	</div><br/>
176
177	<span class="comment">
178	- You can disable the 'halfShow' option to just vote with half star but not show it.<br/>
179	- If 'halfShow' is disabled, then score >= x.6 will be rounded up visually.<br/>
180	- The interval can be:<br/>
181	-- Rounded down: [x.00 .. x.25]<br/>
182	-- Half star:    [x.26 .. x.75]<br/>
183	-- Rounded up:   [x.76 .. x.99]
184	</span>
185
186	<div id="round-demo" class="session">Custom round option:</div>
187	<div id="round"></div>
188
189	<div class="source">
190	$('#star').raty({<br/>
191	score : 1.26,<br/>
192	round : { down: .25, full: .6, up: .76 }<br/>
193	});<br/><br/>
194
195	<div id="star"></div>
196	</div><br/>
197
198	<span class="comment">
199	- This example use the default round values;<br/>
200	- down: with halfShow enabled, score <= x.25 will be rounded down; (inclusive)<br/>
201	- up: with halfShow enabled, score >= x.76 will be rounded up; (inclusive)<br/>
202	- down-up: with halfShow enabled, score > x.25 and score < .76 will be half star; (inclusive)<br/>
203	- full: with halfShow disabled, score >= x.6 will be rounded up; (inclusive)<br/>
204	</span>
205
206	<div id="icon-demo" class="session">Custom hint and icons:</div>
207	<div id="icon"></div>
208
209	<div class="source">
210	$('#star').raty({<br/>
211	hints   : ['a', '', null, 'd', '5'],<br/>
212	starOn  : 'medal-on.png',<br/>
213	starOff : 'medal-off.png'<br/>
214	});<br/><br/>
215
216	<div id="star"></div>
217	</div><br/>
218
219	<span class="comment">
220	- To display the number of the star, set null.
221	</span>
222
223	<div id="range-demo" class="session">Range of custom icons:</div>
224	<div id="range"></div>
225
226	<div class="source">
227	$('#star').raty({<br/>
228	iconRange: [<br/>
229	{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },<br/>
230	{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },<br/>
231	{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },<br/>
232	{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }<br/>
233	]<br/>
234	});<br/><br/>
235
236	<div id="star"></div>
237	</div><br/>
238
239	<span class="comment">
240	- It's a array of objects where each one represents a custom icon;<br/>
241	- The value range is until wich position the icon will be displayed;<br/>
242	- The value on is the active icon;<br/>
243	- The value off is the inactive icon;<br/>
244	- The sequence of the range interval should be in a ascending order;<br/>
245	- If the value on or off is omitted then the attribute starOn or starOff will be used.
246	</span>
247
248	<div id="big-demo" class="session">Bigger icon:</div>
249	<div id="big"></div>
250
251	<div class="source">
252	$('#star').raty({<br/>
253	cancel    : true,<br/>
254	cancelOff : 'cancel-off-big.png',<br/>
255	cancelOn  : 'cancel-on-big.png',<br/>
256	half      : true,<br/>
257	size      : 24,<br/>
258	starHalf  : 'star-half-big.png',<br/>
259	starOff   : 'star-off-big.png',<br/>
260	starOn    : 'star-on-big.png'<br/>
261	});<br/><br/>
262
263	<div id="star"></div>
264	</div><br/>
265
266	<span class="comment">
267	- You can specify your own width as following: width: 120.
268	</span>
269
270	<div id="group-demo" class="session">Group of elements:</div>
271	<div class="group"></div>
272	<div class="group"></div>
273	<div class="group"></div>
274
275	<div class="source">
276	$('.star').raty();<br/><br/>
277
278	<div class="star"></div><br/>
279	<div class="star"></div><br/>
280	<div class="star"></div>
281	</div><br/>
282
283	<span class="comment">
284	- The ID is optional and must be unique;<br/>
285	- If you don't pass a ID for the element, then it will be created.
286	</span>
287
288	<div id="target-demo" class="session">Displaying hint in a target element:</div>
289
290	<div id="target"></div>
291	<div id="hint"></div><br/>
292
293	<div class="source">
294	$('#star').raty({<br/>
295	cancel     : true,<br/>
296	cancelHint : 'none',<br/>
297	target     : '#hint'<br/>
298	});<br/><br/>
299
300	<div id="star"></div><br/>
301	<div id="target"></div>
302	</div>
303
304	<div id="target-number-demo" class="session">Displaying and keeping the score in a target element:</div>
305
306	<div id="target-number"></div>
307
308	<select id="score-target">
309	<option value="">--</option>
310	<option value="1">1</option>
311	<option value="2">2</option>
312	<option value="3">3</option>
313	<option value="4">4</option>
314	<option value="5">5</option>
315	</select>
316
317	<div class="source left">
318	$('#star').raty({<br/>
319	cancel     : true,<br/>
320	target     : '#score',<br/>
321	targetKeep : true,<br/>
322	targetType : 'number'<br/>
323	});<br/><br/>
324
325	<select id="target"><br/>
326	<option value="">0</option><br/>
327	<option value="1">1</option><br/>
328	<option value="2">2</option><br/>
329	<option value="3">3</option><br/>
330	<option value="4">4</option><br/>
331	<option value="5">5</option><br/>
332	</select><br/>
333	</div><br/>
334
335	<span class="comment">
336	- You can to choose the target types 'hint' or 'number'.
337	</span>
338
339	<div id="target-out-demo" class="session">Setting default value to the target on mouseout:</div>
340
341	<div id="target-out"></div>
342	<div id="hint-out"></div><br/>
343
344	<div class="source">
345	$('#star').raty({<br/>
346	target     : '#hint',<br/>
347	targetText : '--'<br/>
348	});<br/><br/>
349
350	<div id="star"></div><br/>
351	<div id="target"></div>
352	</div>
353
354	<div id="format-demo" class="session">Displaying hint with format template:</div>
355
356	<div id="format"></div>
357	<div id="hint-format"></div><br/>
358
359	<div class="source">
360	$('#star').raty({<br/>
361	cancel       : true,<br/>
362	cancelHint   : 'Sure?',<br/>
363	target       : '#hint',<br/>
364	targetFormat : 'your score: {score}',<br/>
365	targetText   : 'none',<br/>
366	targetKeep   : true<br/>
367	});<br/><br/>
368
369	<div id="star"></div><br/>
370	<div id="target"></div>
371	</div>
372
373	<div id="mouseover-demo" class="session">Using mouseover callback:</div>
374
375	<div id="mouseover"></div>
376	<div id="mouseover-target"></div><br/>
377
378	<div class="source" style="margin-top: 15px;">
379	$('#star').raty({<br/>
380	cancel    : true,<br />
381	mouseover : function(score, evt) {<br />
382	var target = $('#mouseover-target');<br /><br />
383
384	if (score === null) {<br />
385	target.html('Boring!');<br />
386	} else if (score === undefined) {<br />
387	target.empty();<br />
388	} else {<br />
389	target.html('score: ' + score);<br />
390	}<br />
391	}<br />
392	});<br/><br/>
393
394	<div id="star"></div><br/>
395	<div id="target"></div>
396	</div>
397
398	<span class="comment">
399	- The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback.
400	</span>
401
402	<div id="precision-demo" class="session">Half star voting precision:</div>
403
404	<div id="precision"></div>
405	<div id="precision-target"></div><br/>
406
407	<div class="source" style="margin-top: 15px;">
408	$('#star').raty({<br/>
409	half       : true,<br/>
410	precision  : true,<br/>
411	size       : 24,<br/>
412	starHalf   : 'star-half-big.png',<br/>
413	starOff    : 'star-off-big.png',<br/>
414	starOn     : 'star-on-big.png'<br/>
415	target     : '#precision-target'<br/>
416	targetType : 'number'<br/>
417	});<br/><br/>
418
419	<div id="star"></div><br/>
420	<div id="target"></div>
421	</div>
422
423	<div id="space-demo" class="session">Without space between stars:</div>
424
425	<div id="space"></div>
426
427	<div class="source">
428	$('#star').raty({<br/>
429	space: false<br/>
430	});<br/><br/>
431
432	<div id="star"></div><br/>
433	</div>
434
435	<div id="single-demo" class="session">Single icon:</div>
436
437	<div id="single"></div>
438
439	<div class="source">
440	$('#star').raty({<br/>
441	single: true<br/>
442	});<br/><br/>
443
444	<div id="star"></div><br/>
445	</div>
446
447	<div id="action-demo" class="session">Directed actions with public functions:</div>
448
449	love:
450	<div class="action"></div>
451
452	happy:
453	<div class="action"></div><br/>
454
455	your last rate:
456	<div id="result"></div>
457
458	<div class="source">
459	$('.star').raty({<br/>
460	half  : true,<br/>
461	click : function(score, evt) {<br/>
462	$(this).raty('cancel');<br/>
463	$('#result').raty('score', score);<br/>
464	}<br/>
465	});<br/><br/>
466
467	<div class="star"></div><br/>
468	<div class="star"></div><br/><br/>
469	<div id="result"></div>
470	</div><br/>
471
472	<span class="comment">
473	- All functions have a optional second parameter to specify which container will be executed;<br/>
474	- You can pass a ID or a class to be the target of the action;<br/>
475	- If the ID or class are not specified, then the last element Raty will be takes.
476	</span>
477
478	<div id="function-demo" class="session">Functions Demo:</div>
479
480	<div id="function"></div>
481	<div id="hint-function"></div><br/>
482
483	<div style="color: #CCC; margin-top: 15px;">
484	<a href="javascript:void(0);" title="1" class="score">Score 1</a> \|
485	<a href="javascript:void(0);" title="2" class="score">Score 2</a> \|
486	<a href="javascript:void(0);" title="3" class="score">Score 3</a> \|
487	<a href="javascript:void(0);" title="4" class="score">Score 4</a> \|
488	<a href="javascript:void(0);" title="5" class="score">Score 5</a>
489	</div>
490
491	<div style="color: #CCC; margin-top: 15px;">
492	<a href="javascript:void(0);" title="1" class="click">Click 1</a> \|
493	<a href="javascript:void(0);" title="2" class="click">Click 2</a> \|
494	<a href="javascript:void(0);" title="3" class="click">Click 3</a> \|
495	<a href="javascript:void(0);" title="4" class="click">Click 4</a> \|
496	<a href="javascript:void(0);" title="5" class="click">Click 5</a>
497	</div>
498
499	<div style="color: #CCC; margin-top: 15px;">
500	<a href="javascript:void(0);" title="true" class="readOnly">ReadOnly (true)</a> \|
501	<a href="javascript:void(0);" title="false" class="readOnly">ReadOnly (false)</a>
502	</div>
503
504	<div style="color: #CCC; margin-top: 15px;">
505	<a href="javascript:void(0);" title="false" class="cancel">Cancel</a> \|
506	<a href="javascript:void(0);" title="true" class="cancel">Cancel (trigger)</a>
507	</div>
508
509	<div style="color: #CCC; margin-top: 15px;">
510	<a id="reload" href="javascript:void(0);" title="reload">Reload</a> \|
511	<a id="get-score" href="javascript:void(0);" title="score">Score</a>
512	</div>
513
514	<div class="action-wrapper">
515	settings: <input id="set-id" type="text" value="{ number: 3 }" class="action-field" />
516	<a id="set-action" href="javascript:void(0);" title="set" class="action-link">set</a>
517	</div>
518
519	<div id="global-demo" class="session">Changing the settings globally:</div>
520
521	<div class="source">
522	$.fn.raty.defaults.starOn = 'star-on.gif';<br/>
523	$.fn.raty.defaults.starOff = 'star-off.gif';
524	</div>
525
526	<span class="comment">
527	- You can change any option mention the scope <b>$.fn.raty.defaults.</b> + <i>option_name</i>;<br/>
528	- This setup must be called before you bind the Raty, of course.
529	</span>
530
531	<div class="session">Default options:</div>
532
533	<div class="session-option">cancel: <span>false</span></div>
534	<div class="comment">If will be showed a button to cancel the rating.</div>
535
536	<hr />
537
538	<div class="session-option">cancelHint: <span>'cancel this rating!'</span></div>
539	<div class="comment">The hint information.</div>
540
541	<hr />
542
543	<div class="session-option">cancelHint: 'cancel this rating!'<br/>
544	<div class="comment">The hint information.</div>
545
546	<hr />
547
548	<div class="session-option">cancelOff: <span>'cancel-off.png'</span></div>
549	<div class="comment">Name of the cancel image off.</div>
550
551	<hr />
552
553	<div class="session-option">cancelOn: <span>'cancel-on.png'</span></div>
554	<div class="comment">Name of the cancel image on.</div>
555
556	<hr />
557
558	<div class="session-option">cancelPlace: <span>'left'</span></div>
559	<div class="comment">Position of the cancel button.</div>
560
561	<hr />
562
563	<div class="session-option">click: <span>undefined</span></div>
564	<div class="comment">Function that returns the selected value.</div>
565
566	<hr />
567
568	<div class="session-option">half: <span>false</span></div>
569	<div class="comment">Enables half star selection.</div>
570
571	<hr />
572
573	<div class="session-option">halfShow: <span>true</span></div>
574	<div class="comment">Enables half star display.</div>
575
576	<hr />
577
578	<div class="session-option">hints: <span>['bad', 'poor', 'regular', 'good', 'gorgeous']</span></div>
579	<div class="comment">List of names that will be used as a hint on each star.</div>
580
581	<hr />
582
583	<div class="session-option">iconRange: <span>undefined</span></div>
584	<div class="comment">List of object that represent each icon with position and names.</div>
585
586	<hr />
587
588	<div class="session-option">noRatedMsg: <span>'not rated yet'</span></div>
589	<div class="comment">A hint for no rated elements when it's read-only.</div>
590
591	<hr />
592
593	<div class="session-option">number: <span>5</span></div>
594	<div class="comment">Number of stars that will be presented.</div>
595
596	<hr />
597
598	<div class="session-option">path: <span>'img/'</span></div>
599	<div class="comment">A range of custom icons that you can set.</div>
600
601	<hr />
602
603	<div class="session-option">precision: <span>false</span></div>
604	<div class="comment">Enables the selection of a precision score.</div>
605
606	<hr />
607
608	<div class="session-option">readOnly: <span>false</span></div>
609	<div class="comment">If the stars will be read-only.</div>
610
611	<hr />
612
613	<div class="session-option">round: <span>{ down: <span>.25, full: <span>.6, up: <span>.76 }</span></div>
614	<div class="comment">Configuration to set the round rules.</div>
615
616	<hr />
617
618	<div class="session-option">score: <span>undefined</span></div>
619	<div class="comment">Number of stars to be selected.</div>
620
621	<hr />
622
623	<div class="session-option">scoreName: <span>'score'</span></div>
624	<div class="comment">Name of the hidden field that holds the score value.</div>
625
626	<hr />
627
628	<div class="session-option">single: <span>false</span></div>
629	<div class="comment">Enables the single star selection.</div>
630
631	<hr />
632
633	<div class="session-option">space: <span>true</span></div>
634	<div class="comment">Puts space between the stars.</div>
635
636	<hr />
637
638	<div class="session-option">size: <span>16</span></div>
639	<div class="comment">The icons size.</div>
640
641	<hr />
642
643	<div class="session-option">starHalf: <span>'star-half.png'</span></div>
644	<div class="comment">The name of the half star image.</div>
645
646	<hr />
647
648	<div class="session-option">starOff: <span>'star-off.png'</span></div>
649	<div class="comment">Name of the star image off.</div>
650
651	<hr />
652
653	<div class="session-option">starOn: <span>'star-on.png'</span></div>
654	<div class="comment">Name of the star image on.</div>
655
656	<hr />
657
658	<div class="session-option">target: <span>undefined</span></div>
659	<div class="comment">Element selector where the rating will be displayed.</div>
660
661	<hr />
662
663	<div class="session-option">targetFormat: <span>'{score}'</span></div>
664	<div class="comment">Template to interpolate the score with some thing.</div>
665
666	<hr />
667
668	<div class="session-option">targetKeep: <span>false</span></div>
669	<div class="comment">If the last choose value will be keeped on mouseout.</div>
670
671	<hr />
672
673	<div class="session-option">targetText: <span>''</span></div>
674	<div class="comment">Default value when there is no score or targetKeep is off.</div>
675
676	<hr />
677
678	<div class="session-option">targetType: <span>'hint'</span></div>
679	<div class="comment">What display on target element hint or number.</div>
680
681	<hr />
682
683	<div class="session-option">width : <span>undefined</span></div>
684	<div class="comment">The container width of the stars.</div>
685
686	<div class="session">Functions:</div>
687
688	<div class="source">$('#star').raty('score');</div>
689	<div class="comment">Recovers the current score or undefined for no rated. Class returns an array of score</div>
690
691	<div class="source">$('#star').raty('score', 3);</div>
692	<div class="comment">Set the score with 3 stars.</div>
693
694	<div class="source">$('#star').raty('click', 2);</div>
695	<div class="comment">Click on the second star of the Raty with ID called 'raty'.</div>
696
697	<div class="source">$('.star').raty('readOnly', true);</div>
698	<div class="comment">Adjusts all Raty with class called 'raty' for read-only.</div>
699
700	<div class="source">$('#star').raty('cancel', true);</div>
701	<div class="comment">Cancel the rating. The second optional parameter enable thes click callback.</div>
702
703	<div class="source">$('#star').raty('reload');</div>
704	<div class="comment">Reload the rating with the current configuration.</div>
705
706	<div class="source">$('#star').raty('set', { number: 10 });</div>
707	<div class="comment">Reload the rating applying new configurations.</div>
708	</div>
709
710	<div id="footer">
711	<div id="copy">© 2010 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
712	</div>
713
714	<script type="text/javascript">
715	$(function() {
716
717	$('#default').raty();
718
719	$('#fixed').raty({
720	readOnly : true,
721	score : 2
722	});
723
724	$('#score').raty({
725	score: function() {
726	return $(this).attr('data-rating');
727	}
728	});
729
730	$('#anyone').raty({
731	readOnly : true,
732	noRatedMsg : 'anyone rated this product yet!'
733	});
734
735	$('#number').raty({
736	scoreName : 'entity.score',
737	number : 10
738	});
739
740	$('#click').raty({
741	click: function(score, evt) {
742	alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
743	}
744	});
745
746	$('#cancel').raty({
747	cancel: true
748	});
749
750	$('#cancel-custom').raty({
751	cancel : true,
752	cancelHint : 'remove my rating!',
753	cancelPlace : 'right',
754	click : function(score, evt) {
755	alert('score: ' + score);
756	}
757	});
758
759	$('#half').raty({
760	half : true,
761	score : 3.3
762	});
763
764	$('#round').raty({
765	score : 1.26,
766	round : { down: .25, full: .6, up: .76 }
767	});
768
769	$('#icon').raty({
770	hints : ['a', '', null, 'd', '5'],
771	path : 'doc/img/',
772	starOn : 'medal-on.png',
773	starOff : 'medal-off.png'
774	});
775
776	$('#range').raty({
777	iconRange : [
778	{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
779	{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
780	{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
781	{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
782	],
783	path : 'doc/img/'
784	});
785
786	$('#big').raty({
787	cancel : true,
788	cancelOff : 'cancel-off-big.png',
789	cancelOn : 'cancel-on-big.png',
790	half : true,
791	path : 'doc/img/',
792	size : 24,
793	starOff : 'star-off-big.png',
794	starOn : 'star-on-big.png',
795	starHalf : 'star-half-big.png'
796	});
797
798	$('.group').raty();
799
800	$('#target').raty({
801	cancel : true,
802	cancelHint : 'none',
803	target : '#hint'
804	});
805
806	$('#format').raty({
807	cancel : true,
808	cancelHint : 'Sure?',
809	target : '#hint-format',
810	targetFormat : 'your score: {score}',
811	targetKeep : true,
812	targetText : 'none'
813	});
814
815	$('#target-number').raty({
816	cancel : true,
817	target : '#score-target',
818	targetKeep : true,
819	targetType : 'number'
820	});
821
822	$('#target-out').raty({
823	target : '#hint-out',
824	targetText : '--'
825	});
826
827	$('#mouseover').raty({
828	cancel : true,
829	mouseover : function(score, evt) {
830	var target = $('#mouseover-target');
831
832	if (score === null) {
833	target.html('Boring!');
834	} else if (score === undefined) {
835	target.empty();
836	} else {
837	target.html('score: ' + score);
838	}
839	}
840	});
841
842	$('#precision').raty({
843	half : true,
844	path : 'doc/img/',
845	precision : true,
846	size : 24,
847	starOff : 'star-off-big.png',
848	starOn : 'star-on-big.png',
849	starHalf : 'star-half-big.png',
850	target : '#precision-target',
851	targetType : 'number'
852	});
853
854	$('#space').raty({
855	space: false
856	});
857
858	$('#single').raty({
859	single: true
860	});
861
862	var $result = $('#result').raty();
863
864	$('.action').raty({
865	click: function(score, evt) {
866	$(this).raty('cancel');
867	$result.raty('score', score);
868	}
869	});
870
871	$('#function').raty({
872	cancel : true,
873	cancelHint : 'Boring!',
874	click : function(score, evt) {
875	$(this).fadeOut(function() { $(this).fadeIn(); });
876	},
877	targetKeep : true,
878	score : 2,
879	target : '#hint-function',
880	targetText : '--'
881	});
882
883	$('.score').click(function() {
884	$('#function').raty('score', this.title);
885	});
886
887	$('.click').click(function() {
888	$('#function').raty('click', this.title);
889	});
890
891	$('.readOnly').click(function() {
892	$('#function').raty('readOnly', (this.title == 'true') ? true : false);
893	});
894
895	$('.cancel').click(function() {
896	$('#function').raty('cancel', (this.title == 'true') ? true : false);
897	});
898
899	$('#reload').click(function() {
900	$('#function').raty('reload');
901	});
902
903	$('#get-score').click(function() {
904	alert($('#function').raty('score'));
905	});
906
907	$('#set-action').on('click', function() {
908	var options = $('#set-id').val();
909
910	eval("$('#function').raty('set', " + options + ");");
911	});
912
913	});
914	</script>
915	</body>
916	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: branches/2.4/prototype/plugins/jq-raty/index.html @ 6754

Download in other formats: