Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:10Length:50 minutes
Jui form 3
  • Overview
  • Transcript

2.3 jQuery UI Spinner Widget

In this lesson, you will learn how to use the jQuery UI Spinner widget, which appends an up and down arrow to an input field, allowing users to easily change the number value of the field.

Related Links

2.3 jQuery UI Spinner Widget

Hello and welcome back. In this lesson, we're gonna pick up where we left off and we're gonna create another text field that's gonna have a numeric value in it. And we're going to use the jQuery UI spinner widget to give it up and down arrows that we can click to change that number. So you can find the URL for the starting pen in your course notes. Once you've opened that up, go ahead click on fork to create a new copy. And in the new copy let's get started. So in our HTML, after our category widget we're gonna do the same thing again. We're gonna create a new div of here with a class of ui widget. Inside that div we're gonna create a simple input field of a type of text. Notice I'm not giving it a type of number. And the reason I'm doing that is because if you add a type of number instead of text, then some browsers in some operating systems will automatically give you that little up, down arrow. And it will give it to you in addition to the up, down arrows that the jQuery UI spinner widget gives you. So we don't wanna do that. So we're gonna set it up as a text input instead. And I'm gonna give this one an id of experience. We're gonna ask our users how many years of experience they have. So we've given it an id of experience. We need to put a label before that input, so we'll go up to the line above that and we'll do a label for experience. And we'll just say, How many years of experience do you have? And then we'll close that label. And then all we need to do to turn on the spinner is jump into our JavaScript, point to that item. So we gave it an id of experience, and then you might already guess what's gonna go after this .spinner(); to end your statement. Once we do that, you'll see that it creates this nice little spinner for us with up and down arrows. If we click on the up arrow it increases that number. If we click on the down arrow, it decreases that number and it even goes into the negatives. So there are a lot of options associated with this. We can jump into the jQuery UI website to see that. So let's go to the main jQuery website where we have these interactions in widgets. Under Widgets we'll find Spinner, under Spinner we can view source to see the source for the code that's up here. And you can see a few samples of how it's used. You can set the spinner value, for example, by pointing to that spinner and calling .spinner and then inside the parentheses we type in a string that says value and then set that value equal to a certain number. And so that's what this set value to five button is doing. We can also go down to the API documentation to get a list of all the things that we can do with this spinner. And over here on our options, you'll notice we can even set a maximum and a minimum. Let's see how those work. I'm going to click on Maximum and that'll scroll down to the part where we can see that. So here we go. When we initialize that spinner, we can create an object with the max property, and set that max to a certain value. And it's gonna the same thing for the min value. So let's jump back into our code, and when we initialize our spinner, obviously nobody's gonna have zero years of experience so we can set a minimum of zero here. So inside the curly brackets we could set min equal to zero and then we can go down to the next line and set max equal to let's say nobody has more than 50 years of experience. So we've set a minimum and a maximum. Let's see if that works. We hit the down arrow, and it simply sets it to zero. We can keep hitting down, and it just stays there. We hit the up arrow, and it starts going up. And we can hold on to the up arrow and it goes faster until it gets to 50. Notice you can also use the up and down arrow keys to change those numbers. And those are the basics of how the spinner works. Now as we can see, that spinner is not taking up the full width. And for that matter, neither is the select items. So let's add a little to our CSS to set the width of those. And we're gonna start by pointing to, remember in our HTML, we created this input with an id of experience. So let's go into our CSS and let's create a new rule for that. And let's do it right after where we're setting our width for our input and our select. And I'm going to point to #experience. And here we're gonna set the width to 100%. And you'll see that that doesn't do the trick for us. And you'll also discover that that's not going to do the trick for us or we've already discovered that that's not going to do the trick for us for the select menu, as well. Because that select menu is set to a width of 100 also. And the reason for that is jQuery doesn't always use the HTML element that you create. Sometimes it hides that element and puts a new element in its place. So let's right-click on our spinner element here and click on Inspect. And we can see our input there and if we go up to the surrounding element, you'll see that it's surrounded by the span and that span has a class of ui-spinner. If we click on that span and then come over here to the right, we might be able to get a clue as to what's going on here. And I don't see a width set anywhere, but I'm guessing that if we set the width to that UI spinner class that that might do the trick. So let's go ahead and try that. So instead of pointing to #experience, let's point to .ui-spinner. And there we go. Sure enough, that takes our width up to the full 100%. So let's try that with our select dropdown here. Let's right-click on that and inspect that and see what's different. So we can see our actual select field up here. And if we hover over that we see that nothing is highlighted in the browser window. And the reason for that is, this is one of those elements that jQuery is basically just hiding. And it's replacing it with this span that shows up right below it. So let's click on that span and you can see that that span has a width of 14 Ms.. Now we wanna make sure that we are as specific with our CSS rule as this particular CSS rule is. We wanna use the exact same selector to make sure that we overwrite it. If we just use UI select menu button then it probably wouldn't work. We need to use this full selector just for the sake of specificity. If we can highlight that properly, there we go. We'll hit Ctrl+C to copy that or Cmnd+C if you're using a Mac. And then we'll jump back over here. And in addition to UI spinner, I'm gonna type comma space and we're also gonna add the rule that we just copied down below. And sure enough that brings our width up to a full 100%. So let's save our work and we'll move on to the next lesson. Thank you for watching.

Back to the top