Created
February 17, 2011 12:38
-
-
Save k1000/831634 to your computer and use it in GitHub Desktop.
another jquery star rating plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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