Welcome to the home of Donavon West. An independent consultant and Microsoft MVP. I'll be discussung things that are near and dear to me, including life, love, technology and politics. Are you looking for Donavon Stinson? Or possibly even Donavon Frankenreiter? (man, that dude is everywhere!)

This Blog | Home Server Hacks | LiveGadgets.net | The Swatch | VehiCROSS.net | Explore the Studio Space | Chuck Todd Facts

I was recently asked by a headhunter if I had written any jQuery plugins. I said "No, but I could probably have one written by time we get off of the phone". OK, maybe a little cocky on my part, but not too far off from the truth.

Here is my first jQuery plugin. It is a simple ProgressBar. You could use it for many different applications. One example would be to display to the user the percentage complete he or she was in filling out a survey.

Before I get into the code, let me explain a little bit of what you are seeing to the left. The top jProgressBar uses an image. The next one subtly changed it's bar color from blue to white as the percentage increases. An finally, the sine wave that you see below is made up of 20 jProgressBars oriented vertically and two sine waves that are 90 degrees out of phase.

Using jProgressBar

Using jProgressBar is easy. Simply setup a get a jQuery object then call jProgressBar. In the example below, any HTML elements with a class of percentBar will be turned onto jQuery jProgressBar objects and initialized to a 10 percent full bar.

  1. var bar = $(".percentBar").jProgressBar(10);

Later, if you would like to change the percentage, you can call the method setPercent on any jProgressBar object. For example, the jProgressBar objects created above will now display a 50 percent full bar.

  1. bar.setPercent(50);

You can also pass an optional second argument during the creation of your jProgressBar to specify settings. For example, let's say you wanted your bar to be 125px wide. You could do something like this:

  1. var bar = $(".percentBar").jProgressBar(0, {width:125, height:50});

Settings

Here is a list of all of the jProgressBar settings and their default values:

width width of the jProgressBar (default=100)
height height of the jProgressBar (default=12)
orientation 0=horizontal, 1=vertical (default=0)
border.width width of the border (default=1)

Style

The style of the jProgressBar is controlled through CSS. You can set border, background and bar sub selectors. Here is the CSS that I used on the top jProgressBar in my sample above. The border is set to a solid color of black, the background (the space not occupied by the bar) is set to white and the bar itself is made up of an image.

  1. .jProgressBar_Green .border {
  2. background-color: #000000;
  3. }
  4. .jProgressBar_Green .border .background {
  5. background-color: #ffffff;
  6. }
  7. .jProgressBar_Green .border .background .bar {
  8. background: #6dd436 url(images/jProgressBarBackground.png) right top;
  9. }

Get the code

jProgressBar is being offered on CodePlex. You can get the latest code here.

12 comments:

洪海龙 said on November 19, 2010 at 3:47 AM ...

I've read some good stuff here. Definitely worth bookmarking for revisiting.
windows 7

 
Unknown said on July 19, 2013 at 12:50 PM ...

NIce code. Interesting post. Thanks for sharing.

www.writemypapers.org

 
Unknown said on April 23, 2014 at 4:26 AM ...

Argentinosaurus is one of the largest hermes outlet dinosaurs ever discovered. You can see what its skeleton looked like at Fernbank Museum of Natural History fendi outlet in Atlanta, Ga. The Argentinosaurus skeleton in the museum's great hall dwarfs everything else in the room. From nose to tail, it's more than 120 http://www.cityofwestwego.com/home.asp feet (36.5 meters) long, and some of its vertebrae are more than 5 feet (1.5 meters) wide. If you walk up the stairs to the second-floor louis vuitton outlet landing to get a better look, the dinosaur's hip will be roughly at eye level.

 
Unknown said on July 16, 2016 at 7:44 AM ...

nice effort for nice post. well done
supersu apk
sd maid pro apk
360 security apk
showbox apk
hungry shark apk mod
es file explorer apk

 
evelyndana09@gmail.com said on August 13, 2017 at 2:02 AM ...

We the company supported in 1977 and started out franchising in view that 1992,
check casher Edison

 
Unknown said on November 18, 2017 at 12:47 AM ...

We honestly want to serve you the simplest matters with 100 percentage satisfactions. It is extraordinarily exhausting to say as soon as exactly must be forced to money your test. Usually it http://www.unitedcheckcashing.com ought to terribly tough to cash if it is now not official hours.check cashing places near me

 
Unknown said on July 4, 2018 at 6:08 AM ...

nike blazer
argentina world cup jersey
ralph lauren
nike roshe run
hermes outlet
nike air max
tommy hilfiger
air force 1
oakley sunglasses
bijoux swarovski
2018.7.4linying

 
PalaPala said on September 4, 2018 at 11:38 AM ...

Pandora Jewelry
Pandora Jewelry Outlet
Pandora Jewelry Official Site
Air Jordan Retro 11
Kyrie Shoes
Air Max 270
Pandora Jewelry Official Site
Air Jordan 4
Pandora Outlet
Latrice20180904

 
Benson said on October 25, 2019 at 2:56 AM ...

nike air max 97
adidas yeezy
jordan 13
coach outlet online
balenciaga shoes
nike epic react
off white
kobe byrant shoes
bape hoodie
supreme clothing

 
jasonbob said on October 13, 2020 at 3:54 AM ...

supreme outlet
yeezy shoes
off white hoodie
air jordan
jordan 1 off white
golden goose outlet
supreme clothing
supreme
bape hoodie
stone island jacket

 
marryann1220 said on May 20, 2021 at 8:31 AM ...

google 3752
google 3753
google 3754
google 3755
google 3756

 
Isabell Kiral said on July 5, 2021 at 5:48 AM ...

We use different plugins for getting different features and this plugin is also very useful, and many users liked it. Dissertation writing services.

 

Post a Comment