830 lines
29 KiB
HTML
830 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="Pragma" content="no-cache">
|
|
<meta http-equiv="Expires" content="-1">
|
|
<meta name="keywords" content="jquery,rating,raty,voto,star,staring,classificacao,classificar,votar,plugin" />
|
|
<meta name="description" content="jQuery Raty - A Star Rating Plugin" />
|
|
|
|
<title>jQuery Raty - A Star Rating Plugin</title>
|
|
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/jquery.raty.min.js"></script>
|
|
|
|
<style type="text/css">
|
|
/* This CSS does not belong to the plugin. */
|
|
body { background: url('img/background.gif'); font: normal 11px verdana; }
|
|
|
|
a { color: #2C8CBD; text-decoration: none; }
|
|
a:hover { color: #48A5D4; }
|
|
|
|
a#coffee {
|
|
background: url('img/coffee.png') 6px 2px no-repeat #DC5; border: 1px solid #D9C640; color: #FFF; display: block; float: right; font-size: 10px; font-weight: bold; letter-spacing: .9px; margin-right: 9px; padding: 4px 5px 4px 26px; text-decoration: none;
|
|
-khtml-border-radius: 4px; -moz-border-radius: 4px; -opera-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
|
|
}
|
|
a#coffee:hover { text-decoration: underline; }
|
|
|
|
span.comment { color: #999; font: 12px monospace; letter-spacing: .1px; margin-bottom: 7px; margin-top: 5px; }
|
|
|
|
div#content { background-color: #FFF; border: 1px solid #DEDEDE; box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4); margin: 0 auto; padding: 15px; width: 1100px; min-height: 510px; }
|
|
|
|
div.description { color: #555; letter-spacing: .1px; margin-bottom: 15px; margin-top: 10px; text-align: left; }
|
|
|
|
div.description-code { color: #555; letter-spacing: .1px; margin-bottom: 10px; text-indent: 7px; }
|
|
|
|
div#menu-feature { color: #AAA; float: left; margin-bottom: 20px; }
|
|
div#menu-feature a { float: left; width: 120px }
|
|
div#menu-feature a.disabled { color: #999; cursor: default; }
|
|
div#menu-feature a.selected { color: #2C8CBD; cursor: default; font-weight: bold; }
|
|
|
|
div#footer { clear: both; height: 25px; margin-top: 5px; width: 100%; }
|
|
div#footer div#copy { margin: 0 auto; text-align: center; width: 1100px; }
|
|
|
|
div#header { margin: 0 auto; padding-left: 20px; width: 1130px; }
|
|
|
|
div#menu { color: #AB9927; font: bold 14px 'Lucida Grande', 'Helvetica', 'Times New Roman', serif; text-shadow: 1px 1px 1px #FFF; text-transform: uppercase; }
|
|
div#menu a { color: #EA9C00; font: bold 10px verdana; letter-spacing: .9px; text-decoration: none; }
|
|
div#menu a:hover { color: #DC5; font-weight: bold; letter-spacing: .9px; text-decoration: underline; }
|
|
|
|
div.session { clear: both; font: bold 13px verdana; border-bottom: 1px solid #EFEFEF; color: #444; letter-spacing: .7px; margin-bottom: 18px; margin-top: 24px; text-align: left; }
|
|
div.session-first { clear: both; font: bold 13px verdana; border-bottom: 1px solid #EFEFEF; color: #444; letter-spacing: .7px; margin-bottom: 18px; text-align: left; }
|
|
div.session-mini { font: bold 10px verdana; color: #444; letter-spacing: .7px; margin-top: 17px; }
|
|
|
|
div.source { background: #F8F8FF; border: 1px solid #EFEFEF; border-left: 3px solid #CCC; clear: both; color: #444; font: 12px monospace; border-radius: 2px; letter-spacing: .1px; margin-bottom: 7px; margin-top: 15px; padding: 7px; width: 1081px; -khtml-border-radius: 2px; -moz-border-radius: 2px; -opera-border-radius: 2px; -webkit-border-radius: 2px; }
|
|
div.source div.comment { color: #777; font: 9px verdana; letter-spacing: 0.4px; margin-bottom: 9px; text-align: left; }
|
|
|
|
div#title { font: bold 17px verdana; color: #269; letter-spacing: .7px; margin-bottom: 10px; text-align: left; }
|
|
div#title span { color: #777; font: 10px verdana; }
|
|
|
|
span#version { color: #777; font: 10px verdana; }
|
|
|
|
/* custom */
|
|
|
|
.left { float: left; }
|
|
|
|
div#target, #target-out, div#function, div#format { float: left; }
|
|
|
|
div#target-number { float: left; }
|
|
|
|
div#hint, #hint-out, div#hint-function, div#hint-format { background-color: #F0F0F0; border-radius: 3px; float: left; height: 15px; margin-left: 5px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; text-align: center; width: 50px; }
|
|
|
|
div#hint-format { width: 120px; }
|
|
|
|
div#precision { float: left; }
|
|
|
|
div#precision-target { background-color: #F0F0F0; border-radius: 3px; float: left; height: 20px; margin-left: 5px; padding-left: 8px; padding-right: 8px; padding-top: 4px; text-align: center; width: 50px; }
|
|
|
|
select#score { float: left; margin-left: 5px }
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
// This code does NOT belong the plugin. See the example code at the bottom of this page.
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-194992347-3']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="header">
|
|
<div id="title">
|
|
<a href="http://wbotelhos.com/raty">jQuery Raty - A Star Rating Plugin</a>
|
|
<span id="version">(current version: 2.1.0)</span>
|
|
</div>
|
|
|
|
<div id="menu">
|
|
<a href="http://github.com/downloads/wbotelhos/raty/jquery.raty-2.1.0.zip" target="_blank">Download</a> |
|
|
<a href="http://github.com/wbotelhos/raty" target="_blank">Github</a> |
|
|
<a href="http://www.wbotelhos.com/raty/changelog.markdown" target="_blank">Change Log</a> |
|
|
<a href="http://www.wbotelhos.com/raty/README.markdown" target="_blank">Readme</a> |
|
|
<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin" target="_blank">Article</a> |
|
|
<a href="http://www.wbotelhos.com/raty/LICENSE.txt" target="_blank">License</a> |
|
|
<a href="http://www.wbotelhos.com/raty/who.html" target="_blank">Who is using</a> |
|
|
<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin/#comments" target="_blank" style="color: #2C8CBD;">Doubt</a> |
|
|
<a href="http://www.wbotelhos.com/lab" target="_blank" style="color: #000;">yLab</a>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="description">jQuery <strong>Raty</strong> is a plugin that generates a customizable star rating.</div>
|
|
</div>
|
|
|
|
<div id="content">
|
|
<div id="default-demo" class="session-first">Default options:</div>
|
|
|
|
<div id="default"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty();<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div>
|
|
|
|
<div id="fixed-demo" class="session">Started with a score and read only value:</div>
|
|
<div id="fixed"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
readOnly: true,<br/>
|
|
start: 2<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div>
|
|
|
|
<div id="start-demo" class="session">Starting with a callback:</div>
|
|
<div id="start" data-rating="3"></div>
|
|
|
|
<div class="source">
|
|
$('#start').raty({<br/>
|
|
start: function() {<br/>
|
|
return $(this).attr('data-rating');<br/>
|
|
}<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star" data-rating="3"></div>
|
|
</div>
|
|
|
|
<div id="anyone-demo" class="session">A hint for no rated elements when it's read-only:</div>
|
|
<div id="anyone"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
readOnly: true,<br/>
|
|
noRatedMsg: 'anyone rated this product yet!'<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div>
|
|
|
|
<div id="number-demo" class="session">Custom score name and a number of stars:</div>
|
|
<div id="number"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
scoreName: 'entity.score',<br/>
|
|
number: 10<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div>
|
|
|
|
<div id="click-demo" class="session">Using click function:</div>
|
|
<div id="click"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
click: function(score, evt) {<br/>
|
|
alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);<br/>
|
|
}<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- The argument score is the selected value;<br/>
|
|
- The argument evt is the click event;<br/>
|
|
- You can mension the star element (DOM) itself using 'this'.<br/>
|
|
</span>
|
|
|
|
<div id="cancel-demo" class="session">Default cancel button:</div>
|
|
<div id="cancel"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
cancel: true<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- The score value for the click on cancel button is null.<br/>
|
|
</span>
|
|
|
|
<div id="cancel-custom-demo" class="session">Custom cancel button:</div>
|
|
<div id="cancel-custom"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
cancel: true,<br/>
|
|
cancelHint: 'remove my rating!',<br/>
|
|
cancelPlace: 'right',<br/>
|
|
click: function(score, evt) {<br/>
|
|
alert('score: ' + score);<br/>
|
|
}<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div>
|
|
|
|
<div id="half-demo" class="session">Half star voting:</div>
|
|
<div id="half"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
half: true,<br/>
|
|
start: 3.3<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- You can disable the 'halfShow' option to just vote with half star but not show it.<br/>
|
|
- If 'halfShow' is disabled, then score >= x.6 will be rounded up visually.<br/>
|
|
- The interval can be:<br/>
|
|
-- Rounded down: [x.00 .. x.25]<br/>
|
|
-- Half star: [x.26 .. x.75]<br/>
|
|
-- Rounded up: [x.76 .. x.99]
|
|
</span>
|
|
|
|
<div id="round-demo" class="session">Custom round option:</div>
|
|
<div id="round"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
start: 1.26,<br/>
|
|
round: { down: .25, full: .6, up: .76 }<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- This example use the default round values;<br/>
|
|
- down: with halfShow enabled, score <= x.25 will be rounded down; (inclusive)<br/>
|
|
- up: with halfShow enabled, score >= x.76 will be rounded up; (inclusive)<br/>
|
|
- down-up: with halfShow enabled, score > x.25 and score < .76 will be half star; (inclusive)<br/>
|
|
- full: with halfShow disabled, score >= x.6 will be rounded up; (inclusive)<br/>
|
|
</span>
|
|
|
|
<div id="icon-demo" class="session">Custom hint and icons:</div>
|
|
<div id="icon"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
hintList: ['a', '', null, 'd', '5'],<br/>
|
|
starOn: 'medal-on.png',<br/>
|
|
starOff: 'medal-off.png'<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- To display the number of the star, set null.
|
|
</span>
|
|
|
|
<div id="range-demo" class="session">Range of custom icons:</div>
|
|
<div id="range"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
iconRange: [<br/>
|
|
{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },<br/>
|
|
{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },<br/>
|
|
{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },<br/>
|
|
{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }<br/>
|
|
]
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- It's a array of objects where each one represents a custom icon;<br/>
|
|
- The value range is until wich position the icon will be displayed;<br/>
|
|
- The value on is the active icon;<br/>
|
|
- The value off is the inactive icon;<br/>
|
|
- The sequence of the range interval should be in a ascending order;<br/>
|
|
- If the value on or off is omitted then the attribute starOn or starOff will be used.
|
|
</span>
|
|
|
|
<div id="big-demo" class="session">Bigger icon:</div>
|
|
<div id="big"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
cancel: true,<br/>
|
|
cancelOff: 'cancel-off-big.png',<br/>
|
|
cancelOn: 'cancel-on-big.png',<br/>
|
|
half: true,<br/>
|
|
size: 24,<br/>
|
|
starHalf: 'star-half-big.png',<br/>
|
|
starOff: 'star-off-big.png',<br/>
|
|
starOn: 'star-on-big.png'<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- You can specify your own width as following: width: 120.
|
|
</span>
|
|
|
|
<div id="group-demo" class="session">Group of elements:</div>
|
|
<div class="group"></div>
|
|
<div class="group"></div>
|
|
<div class="group"></div>
|
|
|
|
<div class="source">
|
|
$('.star').raty();<br/><br/>
|
|
|
|
<div class="star"></div><br/>
|
|
<div class="star"></div><br/>
|
|
<div class="star"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- The ID is optional and must be unique;<br/>
|
|
- If you don't pass a ID for the element, then it will be created.
|
|
</span>
|
|
|
|
<div id="target-demo" class="session">Displaying hint in a target element:</div>
|
|
|
|
<div id="target"></div>
|
|
<div id="hint"></div><br/>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
cancel: true,<br/>
|
|
cancelHint: 'none',<br/>
|
|
target: '#hint'<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div><br/>
|
|
<div id="target"></div>
|
|
</div>
|
|
|
|
<div id="target-number-demo" class="session">Displaying and keeping the score in a target element:</div>
|
|
|
|
<div id="target-number"></div>
|
|
|
|
<select id="score">
|
|
<option value="">--</option>
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
|
|
<div class="source left">
|
|
$('#star').raty({<br/>
|
|
cancel: true,<br/>
|
|
target: '#score',<br/>
|
|
targetKeep: true,<br/>
|
|
targetType: 'number'<br/>
|
|
});<br/><br/>
|
|
|
|
<select id="target"><br/>
|
|
<option value="">0</option><br/>
|
|
<option value="1">1</option><br/>
|
|
<option value="2">2</option><br/>
|
|
<option value="3">3</option><br/>
|
|
<option value="4">4</option><br/>
|
|
<option value="5">5</option><br/>
|
|
</select><br/>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- You can to choose the target types 'hint' or 'number'.
|
|
</span>
|
|
|
|
<div id="target-out-demo" class="session">Setting default value to the target on mouseout:</div>
|
|
|
|
<div id="target-out"></div>
|
|
<div id="hint-out"></div><br/>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
cancel: true,<br/>
|
|
cancelHint: 'none',<br/>
|
|
target: '#hint'<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div><br/>
|
|
<div id="target"></div>
|
|
</div>
|
|
|
|
<div id="format-demo" class="session">Displaying hint with format template:</div>
|
|
|
|
<div id="format"></div>
|
|
<div id="hint-format"></div><br/>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
cancel: true,<br/>
|
|
cancelHint: 'Sure?',<br/>
|
|
target: '#hint',<br/>
|
|
targetFormat: 'your score: {score}',<br/>
|
|
targetText: 'none',<br/>
|
|
targetKeep: true<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div><br/>
|
|
<div id="target"></div>
|
|
</div>
|
|
|
|
<div id="precision-demo" class="session">Half star voting precision:</div>
|
|
|
|
<div id="precision"></div>
|
|
<div id="precision-target"></div><br/>
|
|
|
|
<div class="source" style="margin-top: 15px;">
|
|
$('#star').raty({<br/>
|
|
half: true,<br/>
|
|
precision: true,<br/>
|
|
size: 24,<br/>
|
|
starHalf: 'star-half-big.png',<br/>
|
|
starOff: 'star-off-big.png',<br/>
|
|
starOn: 'star-on-big.png'<br/>
|
|
target: '#precision-target'<br/>
|
|
targetType: 'number'<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div><br/>
|
|
<div id="target"></div>
|
|
</div>
|
|
|
|
<div id="space-demo" class="session">Without space between stars:</div>
|
|
|
|
<div id="space"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
space: false<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div><br/>
|
|
</div>
|
|
|
|
<div id="single-demo" class="session">Single icon:</div>
|
|
|
|
<div id="single"></div>
|
|
|
|
<div class="source">
|
|
$('#star').raty({<br/>
|
|
single: true<br/>
|
|
});<br/><br/>
|
|
|
|
<div id="star"></div><br/>
|
|
</div>
|
|
|
|
<div id="action-demo" class="session">Directed actions with public functions:</div>
|
|
|
|
love:
|
|
<div class="action"></div>
|
|
|
|
happy:
|
|
<div class="action"></div><br/>
|
|
|
|
your last rate:
|
|
<div id="result"></div>
|
|
|
|
<div class="source">
|
|
$('.star').raty({<br/>
|
|
half: true,<br/>
|
|
click: function(score, evt) {<br/>
|
|
$(this).raty('cancel');<br/>
|
|
$('#result').raty('start', score);<br/>
|
|
}<br/>
|
|
});<br/><br/>
|
|
|
|
<div class="star"></div><br/>
|
|
<div class="star"></div><br/><br/>
|
|
<div id="result"></div>
|
|
</div><br/>
|
|
|
|
<span class="comment">
|
|
- All public functions have a optional second parameter to specify which container will be executed;<br/>
|
|
- You can pass a ID or a class to be the target of the action;<br/>
|
|
- If the ID or class are not specified, then the last element Raty will be takes.
|
|
</span>
|
|
|
|
<div id="function-demo" class="session">Public functions:</div>
|
|
|
|
<div id="function"></div>
|
|
<div id="hint-function"></div><br/>
|
|
|
|
<div style="color: #CCC; margin-top: 15px;">
|
|
<a href="javascript:void(0);" title="1" class="start">Start 1</a> |
|
|
<a href="javascript:void(0);" title="2" class="start">Start 2</a> |
|
|
<a href="javascript:void(0);" title="3" class="start">Start 3</a> |
|
|
<a href="javascript:void(0);" title="4" class="start">Start 4</a> |
|
|
<a href="javascript:void(0);" title="5" class="start">Start 5</a>
|
|
</div>
|
|
|
|
<div style="color: #CCC; margin-top: 15px;">
|
|
<a href="javascript:void(0);" title="1" class="click">Click 1</a> |
|
|
<a href="javascript:void(0);" title="2" class="click">Click 2</a> |
|
|
<a href="javascript:void(0);" title="3" class="click">Click 3</a> |
|
|
<a href="javascript:void(0);" title="4" class="click">Click 4</a> |
|
|
<a href="javascript:void(0);" title="5" class="click">Click 5</a>
|
|
</div>
|
|
|
|
<div style="color: #CCC; margin-top: 15px;">
|
|
<a href="javascript:void(0);" title="true" class="readOnly">ReadOnly (true)</a> |
|
|
<a href="javascript:void(0);" title="false" class="readOnly">ReadOnly (false)</a>
|
|
</div>
|
|
|
|
<div style="color: #CCC; margin-top: 15px;">
|
|
<a href="javascript:void(0);" title="false" class="cancel">Cancel</a> |
|
|
<a href="javascript:void(0);" title="true" class="cancel">Cancel (trigger)</a>
|
|
</div>
|
|
|
|
<div id="global-demo" class="session">Changing the settings globally:</div>
|
|
|
|
<div class="source">
|
|
$.fn.raty.defaults.starOn = 'star-on.gif';<br/>
|
|
$.fn.raty.defaults.starOff = 'star-off.gif';
|
|
</div>
|
|
|
|
<span class="comment">
|
|
- You can change any option mention the scope <b>$.fn.raty.defaults.</b> + <i>option_name</i>;<br/>
|
|
- This setup must be called before you bind the Raty, of course.
|
|
</span>
|
|
|
|
<div class="session">Default options:</div>
|
|
|
|
<div class="source">
|
|
cancel: false<br/>
|
|
<div class="comment">If will be showed a button to cancel the rating.</div>
|
|
|
|
cancelHint: 'cancel this rating!'<br/>
|
|
<div class="comment">The hint information.</div>
|
|
|
|
cancelOff: 'cancel-off.png'<br/>
|
|
<div class="comment">Name of the cancel image off.</div>
|
|
|
|
cancelOn: 'cancel-on.png'<br/>
|
|
<div class="comment">Name of the cancel image on.</div>
|
|
|
|
cancelPlace: 'left'<br/>
|
|
<div class="comment">Position of the cancel button.</div>
|
|
|
|
click: undefined<br/>
|
|
<div class="comment">Function that returns the selected value.</div>
|
|
|
|
half: false<br/>
|
|
<div class="comment">Enables half star selection.</div>
|
|
|
|
halfShow: true<br/>
|
|
<div class="comment">Enables half star display.</div>
|
|
|
|
hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous']<br/>
|
|
<div class="comment">List of names that will be used as a hint on each star.</div>
|
|
|
|
iconRange: undefined<br/>
|
|
<div class="comment">List of object that represent each icon with position and names.</div>
|
|
|
|
noRatedMsg: 'not rated yet'<br/>
|
|
<div class="comment">A hint for no rated elements when it's read-only.</div>
|
|
|
|
number: 5<br/>
|
|
<div class="comment">Number of stars that will be presented.</div>
|
|
|
|
path: 'img/'<br/>
|
|
<div class="comment">A range of custom icons that you can set.</div>
|
|
|
|
readOnly: false<br/>
|
|
<div class="comment">If the stars will be read-only.</div>
|
|
|
|
scoreName: 'score'<br/>
|
|
<div class="comment">Name of the hidden field that holds the score value.</div>
|
|
|
|
size: 16<br/>
|
|
<div class="comment">The icons size.</div>
|
|
|
|
starHalf: 'star-half.png'<br/>
|
|
<div class="comment">The name of the half star image.</div>
|
|
|
|
space: true<br/>
|
|
<div class="comment">Option to take off the spaces between the star.</div>
|
|
|
|
starOff: 'star-off.png'<br/>
|
|
<div class="comment">Name of the star image off.</div>
|
|
|
|
starOn: 'star-on.png'<br/>
|
|
<div class="comment">Name of the star image on.</div>
|
|
|
|
start: 0<br/>
|
|
<div class="comment">Number of stars to be selected.</div>
|
|
|
|
target: undefined<br/>
|
|
<div class="comment">Number of stars to be selected.</div>
|
|
|
|
targetKeep: false<br/>
|
|
<div class="comment">If the last choose value will be keeped on mouseout.</div>
|
|
|
|
targetText: ''<br/>
|
|
<div class="comment">Default value when there is no score or targetKeep is off.</div>
|
|
|
|
targetType: 'hint'<br/>
|
|
<div class="comment">What display on target element: hint or number.</div>
|
|
|
|
width: undefined<br/>
|
|
<div class="comment">The container width of the stars.</div>
|
|
</div>
|
|
|
|
<div class="session">Public functions:</div>
|
|
|
|
<div class="source">$('#star').raty('start', 3);</div>
|
|
<div class="description">Starts the last Raty with 3 stars.</div>
|
|
|
|
<div class="source">$('#star').raty('click', 2);</div>
|
|
<div class="description">Click on the second star of the Raty with ID called 'raty'.</div>
|
|
|
|
<div class="source">$('.star').raty('readOnly', true);</div>
|
|
<div class="description">Adjusts all Raty with class called 'raty' for read-only.</div>
|
|
|
|
<div class="source">$('#star').raty('cancel', true);</div>
|
|
<div class="description">Cancel the rating. The second optional parameter enable thes click callback.</div>
|
|
|
|
<div class="source">$('#star').raty('score');</div>
|
|
<div class="description">Recovers the current score. For class returns an array. No rated returns null.</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<div id="copy">© 2010 <a href="http://www.wbotelhos.com/" target="_blank">wbotelhos.com</a></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
|
|
$('#default').raty();
|
|
|
|
$('#fixed').raty({
|
|
readOnly: true,
|
|
start: 2
|
|
});
|
|
|
|
$('#start').raty({
|
|
start: function() {
|
|
return $(this).attr('data-rating');
|
|
}
|
|
});
|
|
|
|
$('#anyone').raty({
|
|
readOnly: true,
|
|
noRatedMsg: 'anyone rated this product yet!'
|
|
});
|
|
|
|
$('#number').raty({
|
|
scoreName: 'entity.score',
|
|
number: 10
|
|
});
|
|
|
|
$('#click').raty({
|
|
click: function(score, evt) {
|
|
alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
|
|
}
|
|
});
|
|
|
|
$('#cancel').raty({
|
|
cancel: true
|
|
});
|
|
|
|
$('#cancel-custom').raty({
|
|
cancel: true,
|
|
cancelHint: 'remove my rating!',
|
|
cancelPlace: 'right',
|
|
click: function(score, evt) {
|
|
alert('score: ' + score);
|
|
}
|
|
});
|
|
|
|
$('#half').raty({
|
|
half: true,
|
|
start: 3.3
|
|
});
|
|
|
|
$('#round').raty({
|
|
start: 1.26,
|
|
round: { down: .25, full: .6, up: .76 }
|
|
});
|
|
|
|
$('#icon').raty({
|
|
hintList: ['a', '', null, 'd', '5'],
|
|
starOn: 'medal-on.png',
|
|
starOff: 'medal-off.png'
|
|
});
|
|
|
|
$('#range').raty({
|
|
iconRange: [
|
|
{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
|
|
{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
|
|
{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
|
|
{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
|
|
]
|
|
});
|
|
|
|
$('#big').raty({
|
|
cancel: true,
|
|
cancelOff: 'cancel-off-big.png',
|
|
cancelOn: 'cancel-on-big.png',
|
|
half: true,
|
|
size: 24,
|
|
starOff: 'star-off-big.png',
|
|
starOn: 'star-on-big.png',
|
|
starHalf: 'star-half-big.png'
|
|
});
|
|
|
|
$('.group').raty();
|
|
|
|
$('#target').raty({
|
|
cancel: true,
|
|
cancelHint: 'none',
|
|
target: '#hint'
|
|
});
|
|
|
|
$('#format').raty({
|
|
cancel: true,
|
|
cancelHint: 'Sure?',
|
|
target: '#hint-format',
|
|
targetFormat: 'your score: {score}',
|
|
targetKeep: true,
|
|
targetText: 'none'
|
|
});
|
|
|
|
$('#target-number').raty({
|
|
cancel: true,
|
|
target: '#score',
|
|
targetKeep: true,
|
|
targetType: 'number'
|
|
});
|
|
|
|
$('#target-out').raty({
|
|
target: '#hint-out',
|
|
targetText: '--'
|
|
});
|
|
|
|
$('#precision').raty({
|
|
half: true,
|
|
precision: true,
|
|
size: 24,
|
|
starOff: 'star-off-big.png',
|
|
starOn: 'star-on-big.png',
|
|
starHalf: 'star-half-big.png',
|
|
target: '#precision-target',
|
|
targetType: 'number'
|
|
});
|
|
|
|
$('#space').raty({
|
|
space: false
|
|
});
|
|
|
|
$('#single').raty({
|
|
single: true
|
|
});
|
|
|
|
var $result = $('#result').raty();
|
|
|
|
$('.action').raty({
|
|
click: function(score, evt) {
|
|
$(this).raty('cancel');
|
|
$result.raty('start', score);
|
|
}
|
|
});
|
|
|
|
$('#function').raty({
|
|
cancel: true,
|
|
cancelHint: 'Boring!',
|
|
click: function(score, evt) {
|
|
$(this).fadeOut(function() { $(this).fadeIn(); });
|
|
},
|
|
targetKeep: true,
|
|
start: 2,
|
|
target: '#hint-function',
|
|
targetText: '--'
|
|
});
|
|
|
|
$('.start').click(function() {
|
|
$('#function').raty('start', this.title);
|
|
});
|
|
|
|
$('.click').click(function() {
|
|
$('#function').raty('click', this.title);
|
|
});
|
|
|
|
$('.readOnly').click(function() {
|
|
$('#function').raty('readOnly', (this.title == 'true') ? true : false);
|
|
});
|
|
|
|
$('.cancel').click(function() {
|
|
$('#function').raty('cancel', (this.title == 'true') ? true : false);
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |