Total members 11889 |It is currently Thu Mar 28, 2024 4:06 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





The question in this article is how to build a rating bar in easy and quick way ? the short answer to this is JQuery. Yes, JQuery. You will just have to download JQuery Raty Plugin.
In addition to JQuery package
javascript code
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>

You will need to included JQuery Raty package
javascript code
<script type="text/javascript" charset="utf-8" src="js/jquery.raty.min.js"></script>


This plugin has a several of rating styles such as:
Attachment:
1.png
1.png [ 618 Bytes | Viewed 13338 times ]

Attachment:
2.png
2.png [ 1.12 KiB | Viewed 13338 times ]

Attachment:
3.png
3.png [ 1.09 KiB | Viewed 13338 times ]

Attachment:
4.png
4.png [ 1.36 KiB | Viewed 13338 times ]


This plugin allows the developer to create a voting button with different number of starts , float voting , fixed voting , custom voting icons , different sizes, different labels and cancel voting button per each voting bar.
Following are some code snippets:
javascript code
$('#star').raty({
half : true,
score : 3.3
});

<div id="star"></div>

This code also initializes the Raty plugin on an element with the ID "star". The code sets the "half" option to "true", which allows for half-star ratings. It also sets the "score" option to 3.3, which means that the initial rating will be 3.3 stars.
The <div> element with the ID "star" is where the rating system will be displayed.
It will display 3.3 stars, and user will be able to give half star rating.



Custom images
javascript code
$('#star').raty({
iconRange: [
{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
]
});

<div id="star"></div>

The code above initializes the Raty plugin on an element with the ID "star". The plugin allows you to create a star rating system on the webpage. The code uses the "iconRange" option to specify different images for the stars depending on the rating range. For example, when the rating is between 2 and 3, the "face-a.png" image is used for the filled-in stars, and the "face-a-off.png" image is used for the empty stars. Similarly, different images are used for ratings between 3 and 4, and so on. The <div> element with the ID "star" is where the rating system will be displayed.


As you see above the code is very simple to use taking in mind that you will need to download all the needed files and images to this plugins such as JQuery files and star's images . You can visit the orginal plugin webpage to get download it for free.
Code:
http://wbotelhos.com/raty/

jquery.raty.js:
javascript code
/*!
* jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty
* -------------------------------------------------------------------
*
* jQuery Raty is a plugin that generates a customizable star rating.
*
* Licensed under The MIT License
*
* @version 2.4.5
* @since 2010.06.11
* @author Washington Botelho
* @documentation wbotelhos.com/raty
* @twitter twitter.com/wbotelhos
*
* Usage:
* -------------------------------------------------------------------
* $('#star').raty();
*
* <div id="star"></div>
*
*/

;(function($) {

var methods = {
init: function(settings) {
return this.each(function() {
var self = this,
$this = $(self).empty();

self.opt = $.extend(true, {}, $.fn.raty.defaults, settings);

$this.data('settings', self.opt);

self.opt.number = methods.between(self.opt.number, 0, 20);

if (self.opt.path.substring(self.opt.path.length - 1, self.opt.path.length) != '/') {
self.opt.path += '/';
}

if (typeof self.opt.score == 'function') {
self.opt.score = self.opt.score.call(self);
}

if (self.opt.score) {
self.opt.score = methods.between(self.opt.score, 0, self.opt.number);
}

for (var i = 1; i <= self.opt.number; i++) {
$('<img />', {
src : self.opt.path + ((!self.opt.score || self.opt.score < i) ? self.opt.starOff : self.opt.starOn),
alt : i,
title : (i <= self.opt.hints.length && self.opt.hints[i - 1] !== null) ? self.opt.hints[i - 1] : i
}).appendTo(self);

if (self.opt.space) {
$this.append((i < self.opt.number) ? '&#160;' : '');
}
}

self.stars = $this.children('img:not(".raty-cancel")');
self.score = $('<input />', { type: 'hidden', name: self.opt.scoreName }).appendTo(self);

if (self.opt.score && self.opt.score > 0) {
self.score.val(self.opt.score);
methods.roundStar.call(self, self.opt.score);
}

if (self.opt.iconRange) {
methods.fill.call(self, self.opt.score);
}

methods.setTarget.call(self, self.opt.score, self.opt.targetKeep);

var space = self.opt.space ? 4 : 0,
width = self.opt.width || (self.opt.number * self.opt.size + self.opt.number * space);

if (self.opt.cancel) {
self.cancel = $('<img />', { src: self.opt.path + self.opt.cancelOff, alt: 'x', title: self.opt.cancelHint, 'class': 'raty-cancel' });

if (self.opt.cancelPlace == 'left') {
$this.prepend('&#160;').prepend(self.cancel);
} else {
$this.append('&#160;').append(self.cancel);
}

width += (self.opt.size + space);
}

if (self.opt.readOnly) {
methods.fixHint.call(self);

if (self.cancel) {
self.cancel.hide();
}
} else {
$this.css('cursor', 'pointer');

methods.bindAction.call(self);
}

$this.css('width', width);
});
}, between: function(value, min, max) {
return Math.min(Math.max(parseFloat(value), min), max);
}, bindAction: function() {
var self = this,
$this = $(self);

$this.mouseleave(function() {
var score = self.score.val() || undefined;

methods.initialize.call(self, score);
methods.setTarget.call(self, score, self.opt.targetKeep);

if (self.opt.mouseover) {
self.opt.mouseover.call(self, score);
}
});

var action = self.opt.half ? 'mousemove' : 'mouseover';

if (self.opt.cancel) {
self.cancel.mouseenter(function() {
$(this).attr('src', self.opt.path + self.opt.cancelOn);

self.stars.attr('src', self.opt.path + self.opt.starOff);

methods.setTarget.call(self, null, true);

if (self.opt.mouseover) {
self.opt.mouseover.call(self, null);
}
}).mouseleave(function() {
$(this).attr('src', self.opt.path + self.opt.cancelOff);

if (self.opt.mouseover) {
self.opt.mouseover.call(self, self.score.val() || null);
}
}).click(function(evt) {
self.score.removeAttr('value');

if (self.opt.click) {
self.opt.click.call(self, null, evt);
}
});
}

self.stars.bind(action, function(evt) {
var value = parseInt(this.alt, 10);

if (self.opt.half) {
var position = parseFloat((evt.pageX - $(this).offset().left) / self.opt.size),
diff = (position > .5) ? 1 : .5;

value = parseFloat(this.alt) - 1 + diff;

methods.fill.call(self, value);

if (self.opt.precision) {
value = value - diff + position;
}

methods.showHalf.call(self, value);
} else {
methods.fill.call(self, value);
}

$this.data('score', value);

methods.setTarget.call(self, value, true);

if (self.opt.mouseover) {
self.opt.mouseover.call(self, value, evt);
}
}).click(function(evt) {
self.score.val((self.opt.half || self.opt.precision) ? $this.data('score') : this.alt);

if (self.opt.click) {
self.opt.click.call(self, self.score.val(), evt);
}
});
}, cancel: function(isClick) {
return $(this).each(function() {
var self = this,
$this = $(self);

if ($this.data('readonly') === true) {
return this;
}

if (isClick) {
methods.click.call(self, null);
} else {
methods.score.call(self, null);
}

self.score.removeAttr('value');
});
}, click: function(score) {
return $(this).each(function() {
if ($(this).data('readonly') === true) {
return this;
}

methods.initialize.call(this, score);

if (this.opt.click) {
this.opt.click.call(this, score);
} else {
methods.error.call(this, 'you must add the "click: function(score, evt) { }" callback.');
}

methods.setTarget.call(this, score, true);
});
}, error: function(message) {
$(this).html(message);

$.error(message);
}, fill: function(score) {
var self = this,
number = self.stars.length,
count = 0,
$star ,
star ,
icon ;

for (var i = 1; i <= number; i++) {
$star = self.stars.eq(i - 1);

if (self.opt.iconRange && self.opt.iconRange.length > count) {
star = self.opt.iconRange[count];

if (self.opt.single) {
icon = (i == score) ? (star.on || self.opt.starOn) : (star.off || self.opt.starOff);
} else {
icon = (i <= score) ? (star.on || self.opt.starOn) : (star.off || self.opt.starOff);
}

if (i <= star.range) {
$star.attr('src', self.opt.path + icon);
}

if (i == star.range) {
count++;
}
} else {
if (self.opt.single) {
icon = (i == score) ? self.opt.starOn : self.opt.starOff;
} else {
icon = (i <= score) ? self.opt.starOn : self.opt.starOff;
}

$star.attr('src', self.opt.path + icon);
}
}
}, fixHint: function() {
var $this = $(this),
score = parseInt(this.score.val(), 10),
hint = this.opt.noRatedMsg;

if (!isNaN(score) && score > 0) {
hint = (score <= this.opt.hints.length && this.opt.hints[score - 1] !== null) ? this.opt.hints[score - 1] : score;
}

$this.data('readonly', true).css('cursor', 'default').attr('title', hint);

this.score.attr('readonly', 'readonly');
this.stars.attr('title', hint);
}, getScore: function() {
var score = [],
value ;

$(this).each(function() {
value = this.score.val();

score.push(value ? parseFloat(value) : undefined);
});

return (score.length > 1) ? score : score[0];
}, readOnly: function(isReadOnly) {
return this.each(function() {
var $this = $(this);

if ($this.data('readonly') === isReadOnly) {
return this;
}

if (this.cancel) {
if (isReadOnly) {
this.cancel.hide();
} else {
this.cancel.show();
}
}

if (isReadOnly) {
$this.unbind();

$this.children('img').unbind();

methods.fixHint.call(this);
} else {
methods.bindAction.call(this);
methods.unfixHint.call(this);
}

$this.data('readonly', isReadOnly);
});
}, reload: function() {
return methods.set.call(this, {});
}, roundStar: function(score) {
var diff = (score - Math.floor(score)).toFixed(2);

if (diff > this.opt.round.down) {
var icon = this.opt.starOn; // Full up: [x.76 .. x.99]

if (diff < this.opt.round.up && this.opt.halfShow) { // Half: [x.26 .. x.75]
icon = this.opt.starHalf;
} else if (diff < this.opt.round.full) { // Full down: [x.00 .. x.5]
icon = this.opt.starOff;
}

this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + icon);
} // Full down: [x.00 .. x.25]
}, score: function() {
return arguments.length ? methods.setScore.apply(this, arguments) : methods.getScore.call(this);
}, set: function(settings) {
this.each(function() {
var $this = $(this),
actual = $this.data('settings'),
clone = $this.clone().removeAttr('style').insertBefore($this);

$this.remove();

clone.raty($.extend(actual, settings));
});

return $(this.selector);
}, setScore: function(score) {
return $(this).each(function() {
if ($(this).data('readonly') === true) {
return this;
}

methods.initialize.call(this, score);
methods.setTarget.call(this, score, true);
});
}, setTarget: function(value, isKeep) {
if (this.opt.target) {
var $target = $(this.opt.target);

if ($target.length == 0) {
methods.error.call(this, 'target selector invalid or missing!');
}

var score = value;

if (!isKeep || score === undefined) {
score = this.opt.targetText;
} else {
if (this.opt.targetType == 'hint') {
score = (score === null && this.opt.cancel)
? this.opt.cancelHint
: this.opt.hints[Math.ceil(score - 1)];
} else {
score = this.opt.precision
? parseFloat(score).toFixed(1)
: parseInt(score, 10);
}
}

if (this.opt.targetFormat.indexOf('{score}') < 0) {
methods.error.call(this, 'template "{score}" missing!');
}

if (value !== null) {
score = this.opt.targetFormat.toString().replace('{score}', score);
}

if ($target.is(':input')) {
$target.val(score);
} else {
$target.html(score);
}
}
}, showHalf: function(score) {
var diff = (score - Math.floor(score)).toFixed(1);

if (diff > 0 && diff < .6) {
this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + this.opt.starHalf);
}
}, initialize: function(score) {
score = !score ? 0 : methods.between(score, 0, this.opt.number);

methods.fill.call(this, score);

if (score > 0) {
if (this.opt.halfShow) {
methods.roundStar.call(this, score);
}

this.score.val(score);
}
}, unfixHint: function() {
for (var i = 0; i < this.opt.number; i++) {
this.stars.eq(i).attr('title', (i < this.opt.hints.length && this.opt.hints[i] !== null) ? this.opt.hints[i] : i);
}

$(this).data('readonly', false).css('cursor', 'pointer').removeAttr('title');

this.score.attr('readonly', 'readonly');
}
};

$.fn.raty = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist!');
}
};

$.fn.raty.defaults = {
cancel : false,
cancelHint : 'cancel this rating!',
cancelOff : 'cancel-off.png',
cancelOn : 'cancel-on.png',
cancelPlace : 'left',
click : undefined,
half : false,
halfShow : true,
hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'],
iconRange : undefined,
mouseover : undefined,
noRatedMsg : 'not rated yet',
number : 5,
path : 'img/',
precision : false,
round : { down: .25, full: .6, up: .76 },
readOnly : false,
score : undefined,
scoreName : 'score',
single : false,
size : 16,
space : true,
starHalf : 'star-half.png',
starOff : 'star-off.png',
starOn : 'star-on.png',
target : undefined,
targetFormat : '{score}',
targetKeep : false,
targetText : '',
targetType : 'hint',
width : undefined
};

})(jQuery);

I hope you found this article helpful.




Attachments:
jquery.raty-2.4.5.zip [119.4 KiB]
Downloaded 1091 times

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada
Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time

thank u


Author:
Newbie
User avatar Posts: 1
Have thanks: 0 time
Post new topic Reply to topic  [ 2 posts ] 

  Related Posts  to : how to build a rating bar in easy and quick way in website
 Operator overloading easy code     -  
 Build Calculator in OpenGL     -  
 how to build cell phone app     -  
 Creating a Java Application Build using RAD 7     -  
 Build distribution applications by remoting(TCP/HTTP)     -  
 a moving graph sortof widget build using Swing     -  
 Build Linear Regression in Python - Supervised Learning     -  
 build a system to schedule employee by checking availability     -  
 Use two dimensional array to build company sales program     -  



Topic Tags

JQuery Rating
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com