Adding a user interface with jQuery UI
Video: Adding a user interface with jQuery UIAdding a user interface with jQuery UI provides you with in-depth training on Web. Taught by Joe Chellman as part of the jQuery UI Widgets
- Next steps
Viewers: in countries Watching now:
Despite the possibilities offered in HTML5, there's still a call for customizable widgets that can be used in websites and web apps. jQuery UI, a popular plugin for jQuery, is here to answer that call. Joe Chellman shows how to install the plugin, use the accordion and date picker widgets, and add behaviors that change how existing page elements respond to user input. Finally, you'll apply the concepts you've learned to a typical project you might see coming from a client—a survey form.
This course is a short companion piece to jQuery for Web Designers. See that course for information about building your core jQuery skill set.
Adding a user interface with jQuery UI
So, in this case, we can make things look selectable. You can make items resizeable, sortable, and more. JQuery also includes a set of extended effects. One of the big ones that is not included in jQuery core, is animating the color of something. There are other utilities as well. JQuery is a massive library. So let's see how to install it. Just go to Download. And when you hit this page, you get a Download Builder, which lets you choose which components of jQuery UI that you want to download.
As you can see there is a lot of them. So what I usually do is toggle them All Off, and then add in the ones that I need for the particular project that I'm working on. So we're going to install just the ones that we need for this course. And you can skip all the core stuff because they'll be chosen automatically depending on which other pieces you want. So I'm going to choose the Accordion, The Date Picker, and then here under Interactions, I'm going to go for Sortable. And then finally, we're going to grab all the Effects. In addition, when we're looking at this example or where we start with plain looking HTML and then turn it into something like this, this is because there is a theme included.
This includes a copy of jQuery, the non-minimized version, as well as a non-minimized version of the jQuery UI custom build and a minimized version. So the minimized version is probably the one you'll be calling most often. But, to use this stuff, drag it in here, and I'll usually rename this to just jQuery.ui, something like that. Now open up my install file. So, there's a few things that we need to include. First of all, we need to include the style sheet, using jQuery.ui in the same folder, and then let's grab the names of these. So Cupertino is the name of my theme.
So I'm going to copy the name of the file and its full path. So it's in css cupertino. So now we have the CSS loaded, and we'll also need to include the script files. These need to go after jQuery, because of course, we need jQuery loaded first. And then the rest of it will go here, jquery.ui/js. And then we'll just grab this one. We already have jquery loaded, so we don't need that. Just like this. Save this and go back to my install page, reload, and wallah, nothing happens.
We'll be looking at how to actually start using jQuery UI in upcoming movies. But now you know what jQuery UI is and how to install a custom build. I'll mention one more thing. You'll see at the bottom of every page on the jQuery UI website similar CDN installation methods, just like you'd see for jQuery itself. These will work fine, but they will include the entire library. So this can be pretty inefficient if you're not planning to use all of jQuery UI. They also point you only to the smoothness theme, although all the themes are available over their CDN.
So, that's a look at what jQuery UI is, and how to install your own custom build.
There are currently no FAQs about jQuery UI Widgets.