jRating Ajaxed star rating system with jQuery plugin
The article source:http://www.myjqueryplugins.com/jRating
jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from" the number of the stars" to "if the stars can represent decimals or not".
There is also an option to display small or big stars and images can be changed with any other file easily.
Although the plugin can be used with any scripting language, a PHP file that handles the requests is already included in the download package.
1. First, include the CSS & jQuery files
<!-- jRating CSS --> <link rel="stylesheet" href="jRating.jquery.css" type="text/css" /> <!-- jRating and jQuery files --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jRating.jquery.js"></script>
2. Add your HTML !
<!-- Don't forget the 'data' attribut --> <!-- 'data' attribut must be written as 'average'_'id of the box' --> <div class="jRating" data="12_1"></div> <!-- In this exemple, the average is 12 and the ID is 1 --> <div class="jRating" data="8.5_2"></div> <!-- In this other exemple, the average is 8.5 and the ID is 2 -->
3. Now, call the jRating plugin
$('.jRating').jRating({options});
$(document).ready(function(){ // Very simple call $('.jRating').jRating(); // Call with options - exemple $('.jRating').jRating({ step : false, // no step length : 10, // show 10 stars at the init type : 'small' // show small stars instead of big default stars }); });
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu