Skip to content

Instantly share code, notes, and snippets.

@k1000
Created February 17, 2011 12:38
Show Gist options
  • Save k1000/831634 to your computer and use it in GitHub Desktop.
Save k1000/831634 to your computer and use it in GitHub Desktop.
another jquery star rating plugin
// JavaScript Document
/*************************************************
Star Rating System
First Version: 23 June 2010
Author: Kamil Selwa
Inspriation: http://php.scripts.psu.edu/rja171/widgets/rating.php
Usage: $('#rating').rating( {url:'www.url.to.post.com', curvalue:3});
options
url: post changes to
callback: function - can be used for ajax calls
Plugin works with elements where label encapsulate intput and span element:
<label for="star_1" title="horrible"><span>horrible</span><input type="radio" name="rate" id="star_1" value="1" /></label>
requires
rating_star.png
---------- CSS -----------
fieldset.rate { float: left; background: #ededed; margin: 20px 0 }
.rate input, .rate button { display: none }
.rate legend { display: inline; position: absolute; float: right; margin-top: -15px; color: #999 }
.rate label {
cursor: pointer;
display: block; float: left;
background: transparent url( ../images/rating_star.png) -3px no-repeat;
width: 16px; height: 16px;
}
.rate label span { position: absolute; background: white; margin-top: -15px; display: none; }
.rate .on { background-color: #FF3D00 }
.rate .hvr { background-color: orange }
.rate .add { background-color: #9EDF00 }
************************************************/
jQuery.fn.rating = function( options ) {
var container = $(this);
var stars = container.find("input[type=radio]");
var tform = ( container.attr("method") )? container: container.parents("form")
var settings = {
url : tform.action, // post changes to
//inirating : container.find("input:checked").val(), // number of selected stars
maxvalue : stars.size(),
class_on: "on",
class_hvr: "hvr",
class_add: "add"
};
if(options) {
jQuery.extend(settings, options);
callback = options.callback
};
tform.find("button").hide()
//console.log( options.callback )
function set_class( index, cls_name ) {
for (var i=0; i < stars.length; i++) {
if ( i < index) {
$(stars[i]).parent().addClass(cls_name);
} else {
$(stars[i]).parent().removeClass(cls_name);
}
}
}
function get_checked_index() {
checked = 0
for (var i=0; i < stars.length; i++) {
if ( $(stars[i]).attr('checked') ) {
checked = i;
}
}
return checked
}
if (container.find("input:checked").length > 0) {
set_class(get_checked_index() + 1, settings.class_on )
}
// set actions
var j = 1
stars.each( function( s ){
var voteindex = j;
$(this).parent().hover(function() { //On hover...
set_class( voteindex, settings.class_hvr )
} , function() { //on hover out...
stars.parent().removeClass( settings.class_hvr );
}).mousedown(function(e) {
set_class( voteindex, settings.class_add )
// callback cab be used for ajax call
if (settings.callback != undefined){
var input = $(this).find("input");
//settings.callback( container, input.attr("name"), input.val() )
settings.callback( e, input.attr("name"), input.val() )
} else {
container.parents("form").submit();
}
});
j++;
})
return this;
}
function set_message(message) {
var msg_box = $("#messages");
msg_box.html( "<li>"+ message + "</li>" )
if ( msg_box.css("display") == "none" ) {
msg_box.slideDown(400).delay(4000).fadeOut()
} else {
msg_box.delay(4000).fadeOut()
}
}
function send_ajax_votes(ele, name, val) {
var form = $(ele.target).parents("form");
var post_url = form.attr("action");
//console.log(ele)
$.ajax({
url: post_url,
type: "GET",
dataType: 'json',
cache: false,
data: form.serialize( ) + "&"+name+"="+val,
success: function(respond) {
if (respond.message){
set_message(respond.message)
}
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment