Total members 11663 |It is currently Thu Sep 21, 2017 5:13 am 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 9205 times ]

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

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

Attachment:
4.png
4.png [ 1.36 KiB | Viewed 9205 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 492 times
Author:
Mastermind
User avatar Posts: 2707
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 a system to schedule employee by checking availability     -  
 Use two dimensional array to build company sales program     -  
 Easy Copy Paste Work From Home - Online Home Based Work     -  



Topic Tags

JQuery Rating







Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team