Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the chapter we're going to go look at the jQuery UI library, which is a set of prebuilt functionality including things like effects and widgets and themes that you can use to give your web applications a polished, professional look. jQuery UI is a companion library that goes along with the jQuery library itself. Now, it's optional. You don't need to use jQuery UI if you don't want to, but it does provide a lot of really great features and functions that you can use in your web applications.
Okay, so let's begin by taking to look here at the jquerui.com website, and a couple of things stand out right away. First you'll notice that it's laid out pretty much the same as the jquery.com website. You have the navigation bar up here. You got Demos, Download, API Docs, and so on. So layout is pretty much the same. Over here on the right-hand side, there is the Download section, and there is different ways to download jQuery UI. But first I want to focus over here on the left-hand side. You can see that jQuery is divided up into three sections.
There's the Interactions section. There's the Widgets section, and if we scroll down little bit more, there is the Effects section. There's also the small Utilities section, but this is mostly used internally in the library, and I'm not going to go into it here. So let's scroll back up. In the Interactions section, You can think of these as some of the same effects that jQuery provides in its base library, only expanded somewhat. So, for example there are behaviors like Draggable and Droppable and Resizable.
These are behaviors you can add to your own page elements. So for example you can use the Resizable Interaction to make something on your page resizable or you can use the Draggable to make something able to be dragged around on your page. In the Widgets section, there are a whole bunch of user interface widgets that you can use in your applications. There are things like the Accordion and then Autocomplete box and Datepickers and Progressbar, and a whole bunch of things you can use in your web apps to provide a really nice UI.
Down here in the Effect section, now some of these are similar to the ones that are already in jQuery. You might be looking at this and saying, well, there's not a whole lot here that's new. Color animation is something that jQuery does not provide out of the box, and so these are the ones--the Hide and the Show--these are actually greatly expanded in jQuery UI. A couple of other things I want to point out before we go into the rest of the chapter. First let's scroll back up over here. Under the Developer Links there's a couple of links I want to point out that are really useful.
First there's the Development Planning Wiki, and if we visit the Development Planning Wiki, you can see that this is a web page that explains the jQuery UI planning process. You can use this to keep track of all the different things that are going on in the Development of jQuery UI. It lists thing like events and various planning and developing status of what they are up to. And if we go back to the main page, one other thing to point out is the Roadmap. Roadmap gives a detailed assessment of what is going on in jQuery UI Development, and so they list out the upcoming releases.
You can see here, there is the 1.11 release. There is 1.12 and so on, down here. They have got the 2.0 release coming up, and they're listing out all the different things that they're working on for upcoming releases. If jQuery UI doesn't provide what you need today, you can visit this Roadmap to see what is that they're working on. So now that we have an overview of what jQuery UI is, let's jump in and start exercising library and see what it can do.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 93634 Viewers
82 Video lessons · 104406 Viewers
71 Video lessons · 76594 Viewers
56 Video lessons · 107919 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.