Switch to full style
HTML/DHTML/JAVASCRIPT/AJAX Technology Tutorials Written By Members.
Post a reply

how to build a rating bar in easy and quick way in website

Sun Jan 20, 2013 2:05 pm

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:
1.png
1.png (618 Bytes) Viewed 11534 times

2.png
2.png (1.12 KiB) Viewed 11534 times

3.png
3.png (1.09 KiB) Viewed 11534 times

4.png
4.png (1.36 KiB) Viewed 11534 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>


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>


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 786 times

Re: how to build a rating bar in easy and quick way in website

Wed Apr 10, 2013 5:36 pm

thank u

Post a reply
  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