From the course: Learning jQuery UI

What is jQuery UI? - jQuery Tutorial

From the course: Learning jQuery UI

Start my 1-month free trial

What is jQuery UI?

- Before we dive in and start working with the jQuery UI library, let's take a moment to get an overview of it and the kinds of features it provides. jQuery UI provides a set of User Interface Controls, Interaction Behaviors and Visual Themes, and it's all built on top of the jQuery Javascript Library. jQuery officially supports all of the major modern browsers, including Internet Explorer, as long as you're using version eight or later. Let's take a look at the jQuery UI website to see how it is organized. Here on the jQuery UI website, you can see the various components of the library listed along the left-hand side, and they are grouped into various categories. There is the Interactions category, which lists various different kinds of interactive behaviors you can apply to page elements. Then there's the Widgets category, which are the user interface controls, and the next is the Effects category, which lists the different kinds of visual effects you can use in your applications. The site also provides interactive demos for each of these elements. Let's click on the Demos link, which will take us to the Demos page. Each feature of jQuery UI has a set of demos for it. Let's choose the Accordion demo. Each one of the demo pages lets you try out various options for that particular feature. So you can see here, I can try out various different options having to do with the Accordion control. And in addition to the demos, there is extensive API documentation for each feature. Now, let's go to the API documentation, and select the Widgets category, and once again, let's pick the Accordion widget. The documentation for each element is divided into Options, Methods and Events. So for the Accordion widget, here are the various options that you can use, the methods you can call, and the events that it generates. jQuery UI also provides a Download Builder. Let's click on the Download link. This builder lets you download the complete library, or pick and choose just the pieces that you need. And we'll see more of the Download Builder later on in the course. The other tool that the site provides directly is the ThemeRoller. So, click on the Themes link, and we'll be taken to the Themes page. jQuery UI provides an extensive set of pre-built visual themes, which you can browse by clicking on the Gallery tab. You can either download an existing theme to use, or click the Roll Your Own tab to customize an existing theme, or build a completely new one. You can also see that this page contains all of the jQuery UI visual elements, so you can see how each element will look when it has a particular theme applied. And again, we'll see more of the ThemeRoller later on in the course. Okay, that completes our brief tour of the jQuery UI site. Let's get started by learning how to use the basic jQuery components.

Contents