File: D:/web/common/jquery.raty/index.html
<!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">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title>jQuery Raty - A Star Rating Plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.raty.min.js"></script>
<style type="text/css">
body { background: url('img/background.gif'); font: normal 11px verdana; }
div#link a { color: #EA9C00; font: bold 10px verdana; letter-spacing: .9px; text-decoration: none; }
div#link a:hover { color: #DC5; font-weight: bold; letter-spacing: .9px; text-decoration: underline; }
a#coffee { background: url('img/coffee.png') 6px 2px no-repeat #DC5; border: 1px solid #D9C640; border-radius: 4px; color: #FFF; display: block; float: right; font-size: 10px; font-weight: bold; letter-spacing: .9px; margin-right: 15px; padding: 4px 5px 4px 26px; text-decoration: none; -khtml-border-radius: 4px; -moz-border-radius: 4px; -opera-border-radius: 4px; -webkit-border-radius: 4px; }
a#coffee:hover { text-decoration: underline; }
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#copy { margin: 0 auto; text-align: center; width: 1100px; }
div#header { margin: 0 auto; padding-left: 20px; width: 1130px; }
div.description { color: #555; letter-spacing: .1px; margin-bottom: 10px; text-indent: 7px; text-align: left; }
div.left { float: left; }
div.raty-target { 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.raty-target-number { float: left; margin-right: 5px; margin-top: 2px; }
div#link { color: #AB9927; font: bold 14px 'Lucida Grande', 'Helvetica', 'Times New Roman', serif; text-shadow: 1px 1px 1px #FFF; text-transform: uppercase; }
div.notice { color: #777; font: 9px verdana; letter-spacing: 0.4px; margin-bottom: 9px; text-align: left; }
div#rodape { clear: both; height: 25px; margin-top: 5px; width: 100%; }
div.session, div.session-first { font: bold 13px verdana; border-bottom: 1px solid #EFEFEF; color: #444; letter-spacing: .7px; margin-bottom: 18px; margin-top: 24px; text-align: left; width: 1081px; }
div.session-first { margin-top: 0 !important; }
div.source { background: #F8F8FF; border: 1px solid #EFEFEF; border-left: 3px solid #CCC; 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.text { color: #555; letter-spacing: .1px; margin-bottom: 20px; margin-top: 15px; text-align: left; }
div.title { font: bold 17px verdana; color: #269; letter-spacing: .7px; margin-bottom: 20px; text-align: left; }
span.comment-html, span.comment-script { font: 12px monospace; letter-spacing: .1px; margin-bottom: 7px; margin-top: 5px; }
span.comment-html { color: #5E85DE; }
span.comment-script { color: #578F73; }
span#version { color: #777; font: 10px verdana; }
</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 class="title">jQuery Raty - A Star Rating Plugin <span id="version">(current version: 1.4.0)</span></div>
<div id="link">
<a href="http://github.com/downloads/wbotelhos/raty/jquery.raty-1.4.0.zip" target="_blank">Download</a> |
<a href="http://github.com/wbotelhos/raty" target="_blank">Github</a> |
<a href="http://wbotelhos.com/raty/changelog.txt" target="_blank">Change Log</a> |
<a href="http://wbotelhos.com/raty/README.txt" target="_blank">Readme</a> |
<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin/" target="_blank">Doubt</a> |
<a href="http://wbotelhos.com/raty/LICENSE.txt" target="_blank">Licence</a> |
<a href="http://www.wbotelhos.com/2010/07/14/jquery-raty-a-star-rating-plugin/" target="_blank" style="color: #2C8CBD;">Article</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="text">jQuery <strong>Raty</strong> is a plugin that generates a customizable star rating automatically.</div>
</div>
<div id="content">
<div id="default-demo" class="session-first">With default options:</div>
<div id="default"></div>
<div class="source">
$('#default').raty();<br/><br/>
<div id="default"></div>
</div>
<div id="fixed-demo" class="session">Started with a score and read only value:</div>
<div id="fixed"></div>
<div class="source">
$('#fixed').raty({<br/>
readOnly: true,<br/>
start: 2<br/>
});<br/><br/>
<div id="fixed"></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">
$('#anyone').raty({<br/>
readOnly: true,<br/>
noRatedMsg: 'anyone rated this product yet!'<br/>
});<br/><br/>
<div id="anyone"></div>
</div>
<div id="number-demo" class="session">With a custom score name and a number of stars:</div>
<div id="number"></div>
<div class="source">
$('#number').raty({<br/>
scoreName: 'entity.score',<br/>
number: 10<br/>
});<br/><br/>
<div id="number"></div>
</div>
<div id="click-demo" class="session">Using click function:</div>
<div id="click"></div>
<div class="source">
$('#click').raty({<br/>
click: function(score, evt) {<br/>
alert('ID: ' + this.attr('id') + '\nscore: ' + score + '\nevent: ' + evt);<br/>
}<br/>
});<br/><br/>
<div id="click"></div>
</div><br/>
<span class="comment-script">
- The argument score is the selected value;<br/>
- The argument evt is the click event;<br/>
- You can mension the star element itself using 'this'.<br/>
</span>
<div id="cancel-demo" class="session">With a default cancel button:</div>
<div id="cancel"></div>
<div class="source">
$('#cancel').raty({<br/>
cancel: true<br/>
});<br/><br/>
<div id="cancel"></div>
</div><br/>
<span class="comment-script">
- The score value for the click on cancel button is null.<br/>
</span>
<div id="cancel-custom-demo" class="session">With a custom cancel button:</div>
<div id="cancel-custom"></div>
<div class="source">
$('#cancel-custom').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="cancel-custom"></div>
</div>
<div id="half-demo" class="session">Enabling half star:</div>
<div id="half"></div>
<div class="source">
$('#half').raty({<br/>
half: true,<br/>
start: 3.3<br/>
});<br/><br/>
<div id="half"></div>
</div><br/>
<span class="comment-script">
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="icon-demo" class="session">With a custom hint and icons:</div>
<div id="icon"></div>
<div class="source">
$('#icon').raty({<br/>
hintList: ['a', '', null, 'd', '5'],<br/>
starOn: 'medal-on.png',<br/>
starOff: 'medal-off.png'<br/>
});<br/><br/>
<div id="icon"></div>
</div><br/>
<span class="comment-script">
- To display the number of the star, set null.
</span>
<div id="range-demo" class="session">With a range of custom icons:</div>
<div id="range"></div>
<div class="source">
$('#range').raty({<br/>
iconRange: [['face-a.png', 2], ['face-b.png', 3], ['face-c.png', 4], ['face-d.png', 5]],<br/>
starOff: 'face-off.png'<br/>
});<br/><br/>
<div id="range"></div>
</div><br/>
<span class="comment-script">
- It's a array of array where each inner array represents a custom icon;<br/>
- The second parameter is until where this icon will be displayed;<br/>
- The sequence of the range interval should be in a ascending order.
</span>
<div id="big-demo" class="session">With a bigger icon:</div>
<div id="big"></div>
<div class="source">
$('#big').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="big"></div>
</div><br/>
<span class="comment-script">
- You can specify your own width as following: width: 120.
</span>
<div id="group-demo" class="session">With a group of elements:</div>
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
<div class="source">
$('.group').raty();<br/><br/>
<div class="group"></div><br/>
<div class="group"></div><br/>
<div class="group"></div>
</div><br/>
<span class="comment-script">
- 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="action-demo" class="session">Using 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">
$('.action').raty({<br/>
half: true,<br/>
click: function(score, evt) {<br/>
$.fn.raty.cancel('.action');<br/>
$.fn.raty.start(score, '#result');<br/>
}<br/>
});<br/><br/>
<div class="action"></div><br/>
<div class="action"></div><br/><br/>
<div id="result"></div>
</div><br/>
<span class="comment-script">
- 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="target-demo" class="session">Displaying the hint in a target element:</div>
<div id="target" class="left"></div>
<div id="hint" class="raty-target"></div><br/>
<div class="source">
$('#target').raty({<br/>
cancel: true<br/>
cancelHint: 'none'<br/>
target: '#hint'<br/>
});<br/><br/>
<div id="target"></div><br/>
<div id="hint"></div>
</div>
<div id="target-number-demo" class="session">Displaying and keeping the score in a target element:</div>
<div id="target-number" class="raty-target-number left"></div>
<select id="score" class="left">
<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">
$('#target-number').raty({<br/>
cancel: true<br/>
target: '#score'<br/>
targetKeep: true,<br/>
targetType: 'number'<br/>
});<br/><br/>
<select id="score"><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-script">
- You can to choose the target types 'hint' or 'number'.
</span>
<div class="session">Default options:</div>
<div class="source">
cancel: false<br/>
<div class="notice">If will be showed a button to cancel the rating.</div>
cancelHint: 'cancel this rating!'<br/>
<div class="notice">The hint information.</div>
cancelOff: 'cancel-off.png'<br/>
<div class="notice">Name of the cancel image off.</div>
cancelOn: 'cancel-on.png'<br/>
<div class="notice">Name of the cancel image on.</div>
cancelPlace: 'left'<br/>
<div class="notice">Position of the cancel button.</div>
click: null<br/>
<div class="notice">Function that returns the selected value.</div>
half: false<br/>
<div class="notice">Enables half star display and selection.</div>
hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous']<br/>
<div class="notice">List of names that will be used as a hint on each star.</div>
iconRange: []<br/>
<div class="notice">Name and position of the set icons.</div>
noRatedMsg: 'not rated yet'<br/>
<div class="notice">A hint for no rated elements when it's read-only.</div>
number: 5<br/>
<div class="notice">Number of stars that will be presented.</div>
path: 'img/'<br/>
<div class="notice">A range of custom icons that you can set.</div>
readOnly: false<br/>
<div class="notice">If the stars will be read-only.</div>
scoreName: 'score'<br/>
<div class="notice">Name of the hidden field that holds the score value.</div>
size: 16<br/>
<div class="notice">The icons size.</div>
starHalf: 'star-half.png'<br/>
<div class="notice">The name of the half star image.</div>
starOff: 'star-off.png'<br/>
<div class="notice">Name of the star image off.</div>
starOn: 'star-on.png'<br/>
<div class="notice">Name of the star image on.</div>
start: 0<br/>
<div class="notice">Number of stars to be selected.</div>
target: null<br/>
<div class="notice">Number of stars to be selected.</div>
targetKeep: false<br/>
<div class="notice">If the last choose value will be keeped on mouseout.</div>
targetType: 'hint'<br/>
<div class="notice">What display on target element: hint or number.</div>
width: null<br/>
<div class="notice">The container width of the stars.</div>
</div>
<div class="session">Public functions:</div>
<div class="source">$.fn.raty.start(3);</div>
<div class="description">Starts the last Raty with 3 stars later.</div>
<div class="source">$.fn.raty.click(2, '#raty');</div>
<div class="description">Click on the second star of the Raty with ID called 'raty' later.</div>
<div class="source">$.fn.raty.readOnly(true, '.raty');</div>
<div class="description">Adjusts all Raty with class called 'raty' for read-only later.</div>
<div class="source">$.fn.raty.cancel('#raty', true);</div>
<div class="description">Cancel the rating. The second parameter is optionally and enable the click callback.</div>
</div>
<div id="rodape"><div id="copy">© 2011 <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
});
$('#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
});
$('#icon').raty({
hintList: ['a', '', null, 'd', '5'],
starOn: 'medal-on.png',
starOff: 'medal-off.png'
});
$('#range').raty({
iconRange: [['face-a.png', 2], ['face-b.png', 3], ['face-c.png', 4], ['face-d.png', 5]],
starOff: 'face-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();
$('#result').raty({
half: true,
readOnly: true
});
$('.action').raty({
click: function(score) {
$.fn.raty.cancel('.action');
$.fn.raty.start(score, '#result');
}
});
$('#target').raty({
cancel: true,
cancelHint: 'none',
target: '#hint'
});
$('#target-number').raty({
cancel: true,
target: '#score',
targetKeep: true,
targetType: 'number'
});
});
</script>
</body>
</html>