The Progressbar control - jQuery Tutorial

- In this chapter we'll discuss some of the more advanced jQuery UI controls. And we'll start off with the Progress Bar. Now I'm sure we've all seen Progress Bars before. They're used to indicate to the user the progress of some sort of function that's taking a while and jQuery UI provides a Progress Bar that you can use in your web apps. So here in the Example Snippets, so scroll down to the section on the Progress Bar and let's open up Progress Bar_start. And you can see here in the page I've got three divs. Here's one, here's two, and here's three. And I'm going to fill in the code that's going to illustrate how each of the various Progress Bars works and some of the options that you can use when you build these. So let's scroll back up to the code section. And over in the Snippets let's begin with something really simple. We'll copy this first example right here and we'll paste it in to the document ready function. So when the page loads I'm going to use jQuery to get a reference to the Progress1 div and call the Progress Bar function on it. And you've probably noticed this is a common pattern by now. You simply call the name of the control that you want to instantiate and that builds the control on top of whatever the container is that you've got here in this expression. I'm also going to give it an initial value of 40 percent. Now you don't have to provide an initial value if you don't want to but in this case I'm going to show the Progress Bar slightly filled in. So let's save and bring this up in the browser. And you can see that the Progress Bar is filled in about 40 percent and in this case we're using the default jQuery UI styling which is this yellowish color. Alright let's go back to the code. Let's try something a little bit different now. Let's go back to the examples. And in this case, let's copy this example here. And we'll paste that underneath the first one. So in this case, for the second Progress Bar I'm doing two different things. First, I'm going to start it off with a value of 70 and the Progress Bar control includes a completion function which will get called when the value gets all the way to 100 percent. Whatever the maximum value you've set the Progress Bar to. So in this case I'm defining an inline callback function which will simply show an alert that says Download complete when the value reaches the end of the Progress Bar and I'm also going to include a button that I can use simply to increase the value of the Progress Bar. The other thing I'm going to do is, if you look down here in the code, you'll notice that inside the div for the Progress Bar I've included another div for a label. And in this case I've got the label that just says Downloading but it can be whatever label you want. So, and oh, and here's the button right here. This is the button that is going to increment the value of the Progress Bar. So what I need to do is include some CSS to make sure that the label is properly displayed on the inside of this Progress Bar. So let's go back to the Snippets and let's copy this prog2Label stylesheet right here and we'll paste that into this empty style block that I've got. And if you scroll down to the code again you'll see that prog2Label is the div that contains the actual label. And I'm positioning that absolutely 45 percent from the left side of the parent div and five pixels down and that's because the Progress Bar uses other divs to fill in its content so I'm going to save that. And let's go back to the browser and refresh. And you can see now that my label appears pretty much in the middle of the Progress Bar and when I click the increment button you see that the progress is increasing so we'll increase it again and then we'll increase it one more time. And you can see that my alert is being called because that completion function is being invoked when the Progress Bar reaches the end. Alright, one more. Sometimes you don't know how long a process is going to take. And so you can create what's called an indeterminate Progress Bar. This is a Progress Bar that displays an animation to give an indication to the user that a process is taking place but you don't know how long it's going to take, you just can't calculate the length of time just yet. So what we're going to do is copy this line of code right here and we'll paste it in below this one. So for Progress Three I'm going to instantiate the Progress Bar with the value of false. And when you instantiate with a value of false that tells jQuery UI that this is an indeterminate Progress Bar. So let's save this and let's refresh the browser and you can see now that I've got this little animation here that's playing with the default theme and this indicates to the user that something is happening but we just don't know how long it's gonna take. Now you can also customize the color that gets displayed in here so let's go back to the code. And in the Snippets let's scroll down. Now as I mentioned previously, jQuery UI includes a very powerful theming architecture which we'll see how to customize later in the course. But for the moment, let's just paste in this style sheet. So for the Progress Three element I'm setting the UI Progress Bar value to a background color of green and UI Progress Bar value is one of the CSS properties that jQuery UI uses for its internal styling architecture. So let me save this and we go back to the browser and refresh you can see now that the color is green and jQuery is automatically using a darker green color for the lines that's using to animate across the Progress Bar.