Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
This course is a short companion piece to jQuery for Web Designers. See that course for information about building your core jQuery skill set.
Skill Level Intermediate
In this movie we're going to take a loot at what it's like to work generally with jQuery UI widgets, taking the accordion as our example. Here is a page with our fairly plain HTML, and over here is the real file. I have moved around the installation of jQuery UI so that I won't have to copies of it in every singe lesson folder for the exercise files. So eagle-eyed viewers may have noticed that some of these pads are a little different than when we installed it in the installation movie. So here is the mark up. It's fairly simple, just headers followed by divs.
Every jQuery UI widget has specific requirements for the structure of its HTML. In the case of the accordion, it's just some sort of header type thing, followed by some sort of other type thing. It can be just about whatever you want, as long as they're at the same level in the DOM. Just read the documentation for the different widget types that you want to implement and make sure that your HTML fits the requirements, or you might get unexpected effects. And when I instantiate the jQuery UI accordion widget, all of that gets turned into this.
I've triggered it with this button. So, I'm going to reload and we'll look at how this is actually working. Scroll down a little more, here's my button. And, here is the code. As you can see, it couldn't hardly be simpler. Here's jQuery UI. And, now down here, I'm selecting an element called group of three, which you can see is the ID that contains the headers and then their divs. So I'm just saving that, and then when this trigger button is clicked, all I'm doing is calling the accordion method on that group, and that's it. When this first loads, these are all the default behaviors.
One pane is always open. I can also navigate this whole thing by keyboard. So, you may see the second one is highlighted now and now the last one. And if I hit Return, it opens. So, there's some pretty good accessibility built into jQuery UI as well, despite the fact that these are made with Java script. So this is what this widget looks like with no options configured whatsoever. If we look over on the jQuery UI website, there's a series of demos that are available for every widget type. And they have lots of different examples on different kinds of behaviors that you might find useful.
So here's their default configuration with another one of the default themes. And you can also see that there are some versions where you can collapse every section, or you can customize these icons and all that sort of thing. There's a lot of examples here which is nice in itself, but then also, here, you can view the source for that example. In addition, if you scroll down a little further, you can see, you want to see more about the accordion widget, check out the API, which will link you to the API page for that particular widget, or whatever else it is you're looking at.
So looking at this, we can see that the accordion widget has quite a few options, it has some methods, and it has some events you can hook into. The main thing we're interested in right now is the options. So, I can set some options when I create this accordion by passing in an object. The animate option can take a whole bunch of different data types, but what I want to do right now is just disable animation. So, all I need to do is set it to false. Jumping back up to the top, collapsible will allow me to collapse all of those content panes.
So I can set that to true. And then I can also use the event option to choose a different event that will cause each of these panes to disclose. Of course, I'm clicking. That's the default, but I can also use mouse enter. So if I save this, come back here and reload. When I first reload, of course, nothing's happening because I have this triggered by this button. So I'll click the button. And then you can see there's no animation, but when I mouse over these things, they open up. And I can collapse all of them, reset the options to their defaults, and there's one more thing I want to discuss about these options on any of these widgets.
So I've reloaded. You can set options both when you create the widget, and there are also some options that make sense that you can work with after the widget has been created. So let's say that in my accordion, I want to use these links in the content to jump to the next pane. We're not doing that right now. So, let's inspect one, each of these links has an id. So I'm just going to use one of them for now, I'm going to add a click listener to that link. I'm going to keep this prevent default. And now, to jump to a different section, I'm going to use the Active option.
This tells jQuery UI which of the panes I want to be active, and here's how I set that option. I call the same method on the same object again, and I pass in an argument, called option, followed by the name of the option that I want to change, which in this case is active. And now, the number of the pane. And these are zero indexed, so the first of these panes would be zero, and the next one would be one and this one would be two.
So what I'm doing here is telling this link, which has this ID, that I want it to activate the next pane. So let me save this and reload. Get this going, and now when I click this link, the next pane is made active. So you can see that that's an easy way to allow the content to navigate three accordion for you. jQuery has many widgets and they all have a very rich set of options that you can play with. And you can set them when you create the widget or at any time afterwards.
So that's a look at how to work with the jQuery UI accordion widget, but we've learned a lot things that apply to all widgets.