laboratory

[ , , , ]
Project type
jQuery plugin
Another experiment
jQuery Inline Help Plugin with JSON
Posted in laboratory as , , ,
Date: Aug 14, 2011
No comments

jQuery Inline Percent Scale Plugin

Today I played a bit with creating a jQuery plugin for generating inline percentage scales. I’ve made similar UI elements before, but there’s rarely been time to build-in any real flexibility.

Percentage scale with jQuery

This experiment is one part of a much larger project to design a banking/finance style user interface the way I think they should be done, Mint.com being my primary inspiration.

Mint.com is pretty enough, but I think styled past the point of being easy; they’re now making the data hard to read.

I’m starting from the inside out of by focusing on the percentage scale UI pattern. The beveling effect is adjustable; see for yourself by using the form on the experiment page.

The background is a lighter grey intentionally. I think only a light style on a percentage scale’s background is necessary. Its purpose is only to help visualize how much the colored bar above could be and is therefore submissive, assisting, secondary and could just as easily be excluded.

Width and height for the scale as a whole are not currently adjustable and I’m still sketching out what further options might be. Lots more I can do.

Here’s the JavaScript for version 0.0.1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/*
 
jQuery measurement unit switcher
by Weszt Hart
 
*/
(function ($) {
$.fn.hd_percentage_graph = function (options) {
 
var defaults = {
opacity: 45,
};
 
var options = $.extend(defaults, options);
 
return this.each(function () {
 
$('.hd-percentage-scale').each(function (){
 
var percentage = $(this).attr('rel');
var structure = "
";
var effectLevel = options.opacity /100;
 
$(this).append(structure);
 
$('.bevel').css('opacity',effectLevel);
$('.grad').css('opacity',effectLevel);
 
$('.scale',this).css('width:0');
 
$('.scale',this).animate({
width: percentage
}, 500, function() {
// Animation complete.
});
 
});
 
});
};
})(jQuery);

And the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* -----------------------------------------------
 
Inline percentage scale
an experiment by Weszt @ Hanami Design 
weszt@hanamidesign.com
 
 -----------------------------------------------*/
 
/* wrapper */
.hd-percentage-scale {background:#e8e8e8;display:inline-block;height:18px;min-width:100px;position:relative;}
	.hd-percentage-scale .scale {height:18px;width:0;position:relative;z-index:2}
	.hd-percentage-scale.positive .scale {background:#5cbd52;}
	.hd-percentage-scale.negative .scale {background:#ff4343;}
	.hd-percentage-scale.caution .scale {background:#ffd800;}
		.hd-percentage-scale .scale .grad {background:url(../../../images/hd-ps-grad.png) 0 0 repeat-x;height:18px;width:100%;}
 
 
	.hd-percentage-scale .bevel {position:absolute;z-index:3;}
	.hd-percentage-scale .bevel.b-top {background:#000;height:1px;left:1px;top:0px;right:1px;}
	.hd-percentage-scale .bevel.b-left {background:#000;bottom:1px;left:0px;top:0px;width:1px;}
	.hd-percentage-scale .bevel.b-right {background:#fff;right:0px;top:0px;width:1px;}
	.hd-percentage-scale .bevel.b-bottom {background:#fff;height:1px;left:1px;bottom:0px;right:1px;}
 
.scale-table {float:left;width:auto}
	.scale-table tbody tr:nth-child(even) td {background:none}	
 
#percent-value {font-size:150%;text-align:right;width:60px}

This is version 0.0.1 but as always, feedback is welcome.

View experiment

Related Posts:

0

This entry was posted on Sunday, August 14th, 2011 at 9:18 am and is filed under laboratory . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply