In our final lesson in this jQuery for Beginners tutorial series, we're going to take a brief look at jQuery UI - the most widely used jQuery plugin for adding graphical user interfaces to web apps. From fancy forms and visual effects, to draggable widgets, spinners and dialog boxes - jQuery UI gives you the power to create rich web UIs.

If you haven't already, make sure to read through our previous articles in the series:

What is jQuery UI and Why Should I Use it?

jQuery UI gives you all the components necessary for a modern web application with a GUI. For want of a better description, it's a collection of widgets.

For a quick idea of what you can do with it, just browse around MakeUseOf. In ours, the content is actually just separate divs with an unordered list to act as an index. Run the jQuery tabs function on them, and they magically turn into tabs. Awesome! You can even load tab content via AJAX if you want.

jquery ui

The Rewards page also uses a "modal popup" dialog box to confirm the user action and return messages. To focus the user attention, you can have the dialog box dim the rest of the page content until the interaction is finished.

jquery ui tips

On our Answers site, we use the simple tooltip feature to provide hints on buttons.

jquery ui tips

jQuery UI really excels when it comes to forms, giving access to a multitude of sliders and pickers. I'm a big fan of the datepicker widget myself, that you can load on top of a regular text entry box where the user is supposed to type a date.

jquery ui tips

Looks complicated doesn't it? Can you imagine coding something like that in pure JavaScript? This is how you do it with jQuery UI: 

$("#dateField").datepicker();

I won't spend any more time explaining how awesome it is because the jQuery UI official demos give a good overview of all the features available as well as simple code samples. Go read it.

Adding jQuery UI

The simplest way to get started with jQuery UI is to add the following lines to your header - but make sure these are added AFTER the main jQuery reference, since jQuery UI requires jQuery to be pre-loaded. You need both a reference to the plugin script, and a stylesheet that contains the visual description of those UI elements. 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">
    
    

            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" type="text/css" />

In this case, we've linked to the theme called "ui-lightness" - but there's a good selection of pre-made themes you can choose from here, or create your own. Bear in mind that if you choose to create your own theme, it won't be hosted by Google - choose a pre-made one, and that link above will work just fine by changing the name of the theme.

jquery ui

In WordPress, I find the above method to be the easiest way of including it - just make sure you do so after wp_head() has been called. The official WordPress method is to use wp_enqueue_script() though, detailed in this StackExchange question.

Customizing the Download

One nice feature of the jQuery UI download site is that you can customise the features you want, thereby reducing the overall size of the JavaScript. The total size of the script with everything enabled (not including a stylesheet, which you'll need to also include) is about 230kb. So while you could reduce the size of that with a custom download, if you're using more than 50% of the feature set, it's not really worth it. By using the standard, full library, you can make use of the Google Hosted version - which is likely to be already cached in the users browser anyway. If you only need a few features though, do a customized download and serve a minimized file locally from your site.

Resources

We've come to the end of our mini-series, so where to go from here? Luckily, this is the internet, and Google is a thing:

I'd also suggest learning some basic PHP, which you'll need to handle any AJAX or server-side processing of forms. Remember, jQuery is just a client-side language that runs in the browser, so your fantastic new web app isn't going to do much without some server side processing. Wordpress, of course, is a great way to start learning PHP by customizing themes and writing your own plugins.

Now, take a moment to pat yourself on the back for coming this far - you're awesome - and feel free to share any comments or perhaps some additional resources in the comments.