<script type="text/javascript" src="/a/plugins/ratings/jquery/raty/js/jquery.raty.min.js"></script>
<div id="raty1">
<div class="raty" data-rating="3"></div>
<div class="raty" data-rating="2.5"></div>
<div class="raty" data-rating="4"></div>
</div>
<script type="text/javascript">
$(function() {
$("#raty1 .raty").raty({
path: "/a/plugins/ratings/jquery/raty/img/",
start: function(){ return $(this).attr("data-rating");}
});
});
</script>
1. Raty
This is a really cool jquery ratings plugin that has a ton of great options and let's you customize pretty much anything in it. Really easy to setup and works well out of the box. You can setup groupings of ratings really easily and apply the same settings to them. Being able to change the icons so easily was definitely a big bonus for this plugin as well.
• download & usage •
Try Now:
<script type="text/javascript" src="/a/plugins/ratings/jquery/raty/js/jquery.raty.min.js"></script>
<div id="raty2">
<div class="raty" data-rating="1"></div>
<div class="raty" data-rating="3.5"></div>
<div class="raty" data-rating="4.5"></div>
</div>
<script type="text/javascript">
$(function() {
$("#raty2 .raty").raty({
path: "/a/plugins/ratings/jquery/raty/img/",
start: function(){ return $(this).attr("data-rating");},
number: 10,
cancel: true
});
});
</script>
| |
<script type="text/javascript" src="/a/plugins/ratings/jquery/raty/js/jquery.raty.min.js"></script>
<div id="raty3">
<div class="raty" data-rating="3"></div>
<div class="raty" data-rating="4"></div>
<div class="raty" data-rating="7"></div>
</div>
<script type="text/javascript">
$(function() {
$("#raty3 .raty").raty({
path: "/a/plugins/ratings/jquery/raty/img/",
start: function(){ return $(this).attr("data-rating");},
number: 7,
readOnly: true,
starOn: "medal-on.png",
starOff: "medal-off.png"
//note there doesnt seem to be a medel half
});
});
</script>
|
2. Star Rating
This is a pretty clean little jquery rating plugin. It doesn't come with too many options but it's got the basic functionality. There doesn't seem to be an option to set a custom star icon, but you could probably just modify the icon file itself, althought this will limit you to only one type of icon for your ratings per page. You can create stars using radio inputs and add as many as you want to a group by setting their name properties the same. Overall a great ratings plugin.
• download & usage •
Try Now:
<link rel="stylesheet" type="text/css" href="/a/plugins/ratings/jquery/star-rating/jquery.rating.css" />
<script type="text/javascript" src="/a/plugins/ratings/jquery/star-rating/jquery.rating.pack.js"></script>
<div id="star-rating1_1">
<input name="star1" type="radio"/>
<input name="star1" type="radio"/>
<input name="star1" type="radio" checked="checked"/>
<input name="star1" type="radio"/>
<input name="star1" type="radio"/>
</div>
<br/>
<div id="star-rating1_2">
<input name="star2" type="radio"/>
<input name="star2" type="radio" checked="checked"/>
<input name="star2" type="radio"/>
<input name="star2" type="radio"/>
<input name="star2" type="radio"/>
</div>
<br/>
<script type="text/javascript">
$(function(){
$("#star-rating1_1 input").rating();
$("#star-rating1_2 input").rating();
});
</script>
| |
<link rel="stylesheet" type="text/css" href="/a/plugins/ratings/jquery/star-rating/jquery.rating.css" />
<script type="text/javascript" src="/a/plugins/ratings/jquery/star-rating/jquery.rating.pack.js"></script>
<div id="star-rating2_1">
<input name="star3" type="radio" disabled="disabled"/>
<input name="star3" type="radio" disabled="disabled"/>
<input name="star3" type="radio" disabled="disabled"/>
<input name="star3" type="radio" disabled="disabled"/>
<input name="star3" type="radio" disabled="disabled"/>
<input name="star3" type="radio" disabled="disabled"/>
<input name="star3" type="radio" disabled="disabled" checked="checked"/>
</div>
<br/>
<div id="star-rating2_2">
<input name="star4" type="radio" disabled="disabled"/>
<input name="star4" type="radio" disabled="disabled"/>
<input name="star4" type="radio" disabled="disabled" checked="checked"/>
<input name="star4" type="radio" disabled="disabled"/>
<input name="star4" type="radio" disabled="disabled"/>
<input name="star4" type="radio" disabled="disabled"/>
<input name="star4" type="radio" disabled="disabled"/>
</div>
<br/>
<script type="text/javascript">
$(function(){
$("#star-rating2_1 input").rating();
$("#star-rating2_2 input").rating();
});
</script>
|
3. Colourful
This is a really great looking ratings pluign written in jQuery. It has a nice feel and texture to it and runs really smooth, however it's code is a little weak and could use a few improvements. It does not support any options, you will have to clean up some of the css (suggest you use the one here) and it's hard coded to work off the "rating" id so you may have to modify that as well. With just a little bit of code cleanup and a few upgrades this plugin really has the potential to be top notch.
• download & usage •
Try Now:
<link rel="stylesheet" type="text/css" href="/a/plugins/ratings/jquery/colourful/css/style.css" />
<script type="text/javascript" src="/a/plugins/ratings/jquery/colourful/js/jquery.color.js"></script>
<script type="text/javascript" src="/a/plugins/ratings/jquery/colourful/js/script.js"></script>
<ul id="rating">
<li><a href="#">This is just a piece of crap</a></li>
<li><a href="#">Nothing too new or interesting</a></li>
<li><a href="#">Not bad, I like it</a></li>
<li><a href="#">I would like to see more of this</a></li>
<li><a href="#">This is the best thing I've seen</a></li>
</ul>
|
4. eliStar
A descent little rating plugin with the most basic of options. Didn't seem to be a way to set the initial value of stars, more like a one shot deal with only the option to not be able to edit. Could be useful for a form or something where initial rating wouldn't matter.
• download & usage •
Try Now:
<link rel="stylesheet" type="text/css" href="/a/plugins/ratings/jquery/elistar/theme-dark/egstar-rating.css" />
<script type="text/javascript" src="/a/plugins/ratings/jquery/elistar/egstar-rating.min.js"></script>
<input type="text" id="eliStar1" name="eliStar1" />
<script type="text/javascript">
$(function() {
$("#eliStar1").elistars({ maxstars: 5 });
});
</script>
| |
<link rel="stylesheet" type="text/css" href="/a/plugins/ratings/jquery/elistar/theme-dark/egstar-rating.css" />
<script type="text/javascript" src="/a/plugins/ratings/jquery/elistar/egstar-rating.min.js"></script>
<input type="text" id="eliStar2" name="eliStar2" />
<script type="text/javascript">
$(function() {
$("#eliStar2").elistars({
maxstars: 10,
allowedit: false
});
});
</script>
|
