Home Web Development jQuery UI 1.10: The User Interface Library for jQuery - Fourth Edition

jQuery UI 1.10: The User Interface Library for jQuery - Fourth Edition

books-svg-icon Book
eBook $32.99 $22.99
Print $54.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $32.99 $22.99
Print $54.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Introducing jQuery UI
About this book
jQuery UI, the official UI widget library for jQuery, gives you a solid platform on which to build rich and engaging interfaces quickly, with maximum compatibility, stability, and effort. jQuery UI's ready-made widgets help to reduce the amount of code that you need to write to take a project from conception to completion. jQuery UI 1.10: The User Interface Library for jQuery has been specially revised for Version 1.10 of jQuery UI. It is written to maximize your experience with the library by breaking down each component and walking you through examples that progressively build up your knowledge, taking you from beginner to advanced user in a series of easy-to-follow steps. Throughout the book, you'll learn how to create a basic implementation of each component, then customize and configure the components to tailor them to your application. Each chapter will also show you the custom events fired by the components covered and how these events can be intercepted and acted upon to bring out the best of the library. We will then go on to cover the use of visually engaging, highly configurable user interface widgets. At the end of this book, we'll look at the functioning of all of the UI effects available in the jQuery UI library.
Publication date:
December 2013
Publisher
Packt
Pages
502
ISBN
9781782162209

 

Chapter 1. Introducing jQuery UI

Welcome to jQuery UI 1.10: The User Interface Library for jQuery. This resource aims to take you from your first steps to an advanced usage of the JavaScript library of UI widgets and interaction helpers that are built on top of the hugely popular and easy-to-use jQuery.

jQuery UI extends the underlying jQuery library to provide a suite of rich and interactive widgets along with code-saving interaction helpers, built to enhance the user interfaces of your websites and web applications. Both jQuery Core and UI are built according to strict coding conventions, which are updated regularly, and follow the current best practice for JavaScript design. As the official UI library for jQuery, it's this strict adherence to current JavaScript standards that helps to make it one of the better UI libraries available for jQuery.

In this chapter we will cover the following topics:

  • How to obtain a copy of the library

  • How to set up a development environment

  • The structure of the library

  • ThemeRoller

  • Browser support

  • How the library is licensed

  • The format of the API

jQuery has quickly become one of the most popular JavaScript libraries in use today, thanks to its ever-growing range of common UI widgets, high level of configurability, and its exceptional ease of implementation. The library is used and supported by some very well-known names, such as Microsoft, WordPress, Adobe, and Intel.

jQuery UI runs on top of jQuery, so the syntax used to initialize, configure, and manipulate the different components is in the same comfortable and easy-to-use style as jQuery. As jQuery forms the basis for UI, we can also take advantage of all the great jQuery functionality as well. The library is also supported by a range of incredibly useful tools, such as the CSS framework that provides a range of helper CSS classes, and the excellent ThemeRoller application that allows us to visually create our own custom themes for the widgets, or choose from a growing library of pre-existing themes. We will be taking a look at the ThemeRoller application later in this chapter.

Over the course of this book, we'll look at each of the existing components that make up the library. We will also be looking at their configuration options and trying out their methods in order to fully understand how they work and what they are capable of. By the end of the book, you'll be an expert in the configuration and use of each widget within the jQuery UI library. By the time we create a custom component, we'll already have a basic working knowledge of the components when we add a new widget or interaction helper, because of the consistency in how we implement the different components that make up the library. Therefore, we only need to learn any widget-specific functionality to master the particular component we wish to use.

 

Downloading the library


This book is specifically tailored towards Version 1.10 of jQuery UI and requires jQuery 1.6 or higher; throughout this book, we will be using jQuery 2.0.3 in our code samples.

Note

If you still need to support IE6 then the legacy Version 1.9.2 of the jQuery UI library is also available for download. You will also need to avail yourself of a copy of jQuery 1.10, as jQuery 2.0 does not support IE 6-8.

To obtain a copy of the library, we should visit the Download Builder at http://www.jqueryui.com/download. This tool gives us a range of different options for building a download package that is tailored to our particular requirements. The following screenshot shows the Download Builder:

We can either download the complete current release or a complete package of a legacy version. We can also select just the components that we want and download a custom package—this is particularly recommended for production environments, where we are only using a subset of the UI library; this helps to reduce bandwidth used when viewing the page.

The page is laid out in a friendly and easy-to-use way. It lists all of the different components in their respective groupings (UI Core, Interactions, and Widgets) and allows us to choose from one of the 24 different predesigned themes (or no theme at all). The page also provides information about the package (including both its compressed and uncompressed size).

Tip

If as a developer you would like to see the latest snapshot of jQuery UI under source control, then you can download a copy from GitHub, which is available at https://github.com/jquery/jquery-ui.

We'll look at the different files found within the library in just a moment, but for now we should download the complete library. It will contain everything we need, including the JavaScript and CSS files, as well as any images from the current theme that rely on different components. It even contains the latest version of jQuery itself, so we don't need to worry about downloading this separately.

For now, just use the custom Download link at the top of the page then select Smoothness as the theme on the following page, and then click on Download. We'll look at downloading and using other themes in the next chapter.

The code download that accompanies this book includes a copy of jQuery 2.03 within each chapter's exercise folder. If you need to download a new copy, you can do so—the instructions for downloading a new copy are listed in Appendix, Help and Support.

Using the hosted versions of jQuery UI

We don't need to download the library in order to implement it in a production web application. Both jQuery and jQuery UI are hosted on content delivery networks (CDN) provided by Google, CDNJS, Microsoft, and MediaTemple (who provide the CDN for the jQuery UI).

On a live site that receives a lot of international traffic, using a CDN will help ensure that the library files are downloaded to a visitor's computer from a server that is geographically close to them. This helps in making the response quicker for them and saving our own bandwidth. This is not recommended for local development however!

Tip

Hosted Files

If you would like to take advantage of using the CDN links, then these can be found at the following locations:

 

Setting up a development environment


We'll need a location to unpack the jQuery UI library in order to easily access the different parts of it within our own files. We should first create a project folder, into which all of our example files as well as all of the library, and other associated resources can be saved.

Create a new folder in your C: drive, or your home directory, and call it jqueryui. This will be the root folder of our project and will be the location where we store all of the example files that we'll make over the course of the book.

Note

The structure of the accompanying code download for this book will mirror the local environment we are creating.

To unpack the library, you can use Windows Explorer (if working on a PC), or a compression program such as 7-zip. When extracting the library, choose the jqueryui folder that we just created. If you are a Mac user, you may need to copy the contents of the jqueryui-1.10.3.custom folder into the new jqueryui folder we have just created. (We will go through the structure of the jqueryui folder later in this chapter.)

Note

7-zip is an open source archive application similar to WinZip or WinRAR; I personally find it better and easier to use. You can download it for free from at http://www.7-zip.org.

The code examples that we'll be looking at use other resources, mostly images, but occasionally some PHP files too. The accompanying code download available on the Packt Publishing website contains all of the images that we'll be using. You should download this if you can, from http://www.packtpub.com/support/book/user-interface-library-for-jquery. You'll need to create a new folder within the jqueryui project folder and call it img, then unpack all of the images within the image folder in the archive to this new folder.

Once you have unpacked the jqueryui folder and added any additional folders that are required, you will see something similar to the following screenshot—here I've used Chapter 5 as an example, which requires an additional img folder to be created:

The code download also contains all the examples as well as the library itself. These files are provided in the hope that they will be used for reference purposes only. I'd recommend that you follow the examples in the book as you go along, manually creating each file as it is shown, instead of just referring to the files in the code download. The best way to learn code, is to code.

This is all that we need to do, no additional platforms or applications need to be installed and nothing needs to be configured or set up. As long as you have a browser and some kind of code or text editor, everything is in place to begin developing with the library.

There are plenty of editors available, any of which will be fine for use with jQuery UI, if you don't already have a preferred editor—for Windows users, you can try Notepad++ (freely available from http://www.notepad-plus-plus.org), or Sublime Text 2 (shareware, which can be downloaded from http://www.sublimetext.com/2). I would avoid using memory-hungry IDEs, as they tend to facilitate too much of the work and therefore impact on the learning curve when using jQuery UI.

Note

For those of you who like to develop using a local web server, then you may use something like WAMP (for PC) or MAMP (for Mac), if you do not already have something set up as a part of your normal daily workflow. Linux users should find a suitable web server that is available from within their distro.

 

Understanding the structure of the library


Let's take a moment to look at the structure of the library once it has been unpacked, so that we know where to look for specific utilities and files. This will give us a feel for its composition and structure. Open up the jqueryui folder where we unpacked the library. The contents of this folder should be as follows:

  • A css folder

  • A development-bundle folder

  • A js folder

  • An index.html file

We can see what the structure looks like from the following screenshot:

For the purposes of using jQuery UI, it is sufficient to know that the js and css folders are the ones you will need to use within a production environment; these can be dropped into your site structure as they are, and the relevant compressed files referenced accordingly from within your code.

If however you are using the library in a development capacity, then I would recommend using the development-bundle folder instead; this contains the same code as the individual source files, but in uncompressed format.

Examining the folder structure in detail

For most people, it is not necessary to know how the jQuery UI library is made up; after all, the two key folders to use can simply be dropped in to your site and referenced accordingly. In this case, you may wish to skip this section and move onto Working with ThemeRoller.

If however your skills are more advanced and you want to learn more about the structure of the library, then please read on. I would recommend having a copy of the jQuery downloaded to hand as you work through this section, so that you can get to grips with how the library is made up.

The css folder is used to store the complete CSS framework that comes with the library. In this folder there will be a directory that has the name of the theme we chose when building the download package. Inside this is a single file that contains all of the CSS framework, and a folder that holds all the images used by the theme. We can also store the css files that we will be creating in this css directory.

The js folder contains minified versions of jQuery and the complete jQuery UI library, with all components rolled into one file. In a live project, it is the js and css folders that we'd want to drop into our site.

The index is an HTML file that gives a brief introduction to the library and displays all of the widgets along with some of the CSS classes. If this is the first time you've ever used the library, you can take a look at this file to see some of the things that we'll be working with throughout the course of this book.

The development-bundle directory contains a series of resources to help us develop with the library. It consists of the following subdirectories:

  1. A demos folder

  2. A docs folder

  3. An external folder

  4. A themes folder

  5. A ui folder

The following screenshot shows how the folder structure should appear:

Also present in the directory are the license files, JSON source files, documents showing the version of the library and its main contributors, and an uncompressed version of jQuery.

The demos folder contains a series of basic examples, showing all of the different components in action. The docs folder contains API documents for each of the different components.

The external folder contains a set of tools that may be of use to developers. They are as follows:

  • The globalize plugin

  • The jshint plugin

  • The mousewheel plugin

  • The unit testing suite qunit (consisting of a JavaScript and a CSS file)

The globalize plugin provides localization support to jQuery, and can be used to format strings, dates, and numbers in over 350 cultures. The jshint plugin, a derivative of the jslint plugin, is a tool to detect errors and potential problems in JavaScript code while enforcing your own coding conventions. The mousewheel plugin, designed by Brandon Aaron, adds cross-browser mouse wheel support to your website or online application. The QUnit framework is jQuery's unit testing suite that we can use to run unit tests on our any code that we create.

Tip

For more information on QUnit, go to http://docs.jquery.com/QUnit.

The themes folder contains either the default theme or the theme that was selected during the download builder. Other themes that we download at a later point or themes that we create ourselves can also be stored here.

The ui folder contains the individual and uncompressed source files of each of the different components of the library.

Note

If you select the Stable download option from the main page, you will find that the contents appear different—the Stable download option contains the contents of the development-bundle folder only, and the theme included by default is called Base. This is visually similar to the Smoothness theme we've downloaded in the custom package.

 

Working with ThemeRoller


ThemeRoller is a custom tool written in jQuery and PHP. It allows us to visually produce our own custom jQuery UI theme and package it up in a convenient and downloadable archive, which we can then drop into our project with no further coding (other than using the stylesheet in an HTML <link> element, of course).

ThemeRoller, hosted at http://ui.jquery.com/themeroller, was created by Filament Group, Inc., and makes use of a number of jQuery plugins released into the open source community. It can be used to produce themes for jQuery UI 1.10 or the legacy Version 1.9 of jQuery UI.

Tip

Hosted Themes

We don't even need to download a theme if we're using one of the themes available from the main site. In a production environment, you may prefer to use a CDN version of the theme, in the same way as you might use a CDN link to reference the main library.

You can import the base or smoothness theme using the following link: http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css. If you want to use one of the other themes, replace smoothness in the URL with your preferred theme.

ThemeRoller is certainly the most comprehensive tool available for creating your own jQuery UI themes. We can very quickly and easily create an entire theme comprised of all the styles needed for targeting the different widgets that make up the library, including the images we'll need.

If you looked at the index.html file a little earlier, the ThemeRoller landing page will be instantly familiar, as it shows all the UI widgets on the page, skinned with the default Smoothness theme.

The ThemeRoller page features an interactive menu on the left that is used to work with the application. Each item within the menu expands to give you access to the available style settings for each part of the widget, such as the Content and Clickable areas, the Header and Content areas of the widget, and other associated things, such as warnings and Error messages.

Here we can create our custom theme with ease and see the changes as soon, as they are applied to the different visible parts of each widget on the page, as shown in the following screenshot:

If you're not feeling particularly inspired while creating a theme, there is also a gallery of pre-configured themes that you can instantly use to generate a fully configured theme. Apart from convenience, the best thing about these pre-selected themes is that when you select one, it is loaded into the left menu. Therefore, you can easily make little tweaks as required.

This is an excellent way to create a visually appealing custom theme that matches the style of your existing site, and is the recommended method for creating custom skins.

Installing and using the new theme is as simple as selecting or creating it. The Download theme button in the above screenshot takes us back to the download builder that has the CSS and images for the new theme integrated into the download package.

If it's just the new theme we want, we can deselect the actual components and just download the theme. Once downloaded, the css folder within the downloaded archive will contain a folder that has the name of the theme. We can simply drag this folder into our own local css folder, and then link to the stylesheet from our pages.

We won't be looking at this tool in much detail in this book. We'll be focusing instead on the style rules that we need to manually override in our own custom stylesheets to generate the desired look of the examples manually.

 

Categorizing the component categories


There are three types of component found within the jQuery UI library, as follows:

  • Low-level interaction helpers: These components are designed to work primarily with mouse events

  • Widgets: These components produces visible objects on the page

  • Core components: These are the components that the other parts of the library rely on

Let us take a moment to consider the components that make up each of these categories, beginning with the core components.

The core components consist of:

  • Core

  • Widget

  • Mouse

  • Position

The core file sets up the construct that all components use to function, and adds some core functionality that is shared by all of the library components, such as keyboard mappings, parent-scrolling, and a z-index manager. This file isn't designed to be used on its own, and exposes no functionality that can be used outside of another component.

The interaction helpers are comprised of the following components:

  • Draggable

  • Droppable

  • Resizable

  • Selectable

  • Sortable

The interaction helpers add basic mouse-based behaviors to any element; this allows you to create sortable lists, resize elements (such as dialog boxes) on the fly or even build functionality (such as a drag-and-drop based shopping cart).

The higher-level widgets (at the time of writing) include:

  • Accordion

  • Autocomplete

  • Button

  • Datepicker

  • Dialog

  • Menu

  • Progressbar

  • Slider

  • Tabs

  • Menu

  • Tooltips

The widgets are UI controls that bring the richness of desktop application functionality to the Web. Each of the widgets can be fully customized, appearance and their behavior.

Introducing the widget factory and effects

When working with jQuery UI's widgets, you will come across the widget factory. This literally creates the basis for all of the visible widgets exposed by the library. It implements the shared API common to all widgets, such as create and destroy methods, and provides the event callback logic. It also allows us to create custom jQuery UI widgets that inherit the shared API. We will cover the Widget Factory in detail later on in this chapter.

Apart from these components and interaction helpers, there are also a series of UI effects that produce different animations or transitions on targeted elements on the page. These are excellent for adding flair and style to our pages. We'll be looking at these effects in the final chapter of this book, Chapter 14, UI Effects.

The great thing about jQuery UI's simplified API is that once you have learned to use all of the existing components (as this book will show you), you'll be able to pick up any new components very quickly. There are plans for many more components in future versions, including a move to merge jQuery Mobile into the library!

 

Browser support


Like jQuery itself, this version of jQuery UI officially supports the current and the previous version of a browser, although the library works fine with older versions of major browsers, including the following: IE7+, Firefox 2+, Opera 9+, Safari 3+, and Chrome 1+.

Tip

Support for IE6 and IE7

As mentioned earlier, the jQuery UI team has dropped support for IE6 in UI 1.10; you can still use jQuery UI though, by downloading the legacy Version 1.9.2. Users of IE7 may note that there are plans to drop support for this browser too; at the time of writing, this is currently scheduled for Version 1.11, although this is yet to be confirmed.

The widgets are built from semantically correct HTML elements generated as needed by the components. Therefore, we won't see excessive or unnecessary elements being created or used.

 

Using the book examples


The library is as flexible as standard JavaScript. By this, I mean that there is often more than one way of doing the same thing, or achieving the same end. For example, the callback events used in the configuration objects for different components can usually take either references to functions or inline anonymous functions, and use them with equal ease and efficiency.

In practice, it is advisable to keep your code as minimal as possible (which jQuery can really help with anyway). But to make the examples more readable and understandable, we'll be separating as much of the code as possible into discrete modules. Therefore, callback functions and configuration options will be defined separately from the code that calls or uses them.

Throughout this book, we will separate JavaScript and CSS code into separate files; while this is overkill for the purposes of development work, it is advisable for production websites. Scripts that reside in external js files can be cached by the browser for vastly improved loading speeds; those written in-line (that is, directly into a <script> tags) are not cached by the browser.

I'd also just like to make it clear that the main aim throughout the course of this book is to learn how to use the different components that make up jQuery UI. If an example seems a little convoluted, it may be that this is the easiest way to expose the functionality of a particular method or property, as opposed to a situation that we would find ourselves coding for regular implementations.

I'd like to add here that the jQuery UI library is currently going through a rapid period of expansion, bug-fixing, and development. For this release, the jQuery team is focusing on bug-fixing to help make the library as stable as possible. Over the longer term, the jQuery UI team is focusing on complete redesigns of each widget's API, ahead of adding a host of new widgets in future releases, and completing a planned merger with jQuery Mobile.

 

Library licensing


Like jQuery, the jQuery UI library is licensed under the MIT open source license. This is a very unrestrictive license that allows the creators to take credit for its production and retain intellectual rights over it, without preventing us developers from using the library in any way that we like on any type of site.

The MIT license explicitly states that users of the software (jQuery UI in this case) are free to use, copy, merge, modify, publish, distribute, sublicense, and sell. This lets us do pretty much whatever we want with the library. The only requirement imposed by this license is that we must keep the original copyright and warranty statements intact.

This is an important point to make. You can take the library and do whatever you like with it. You can build applications on top of the library and then sell those applications or give them away for free. You can put the library in embedded systems such as cell phone OSes and sell them. But whatever you do, leave the original text file with John Resig's name present on it. You can also duplicate it word-for-word in the help files or documentation of your application.

The MIT license is very lenient, but because it is not copyrighted itself, we are free to change it. We can therefore demand that the users of our software give attribution to us instead of the jQuery team, or pass off the code as our own.

The license is not there to restrict us in any way and is not the same as the kind of license that comes with software that you might purchase and install on your own computer. In most cases, how the library is licensed will not be a consideration when using it. Plugin authors, however, will want to ensure that their plugins are released under a similar license.

 

Introducing the API


Once you've worked with one of the components from the library, you'll instantly feel at home when working with any of the other components, since the methods of each component are called in exactly the same way.

The API for each component consists of a series of different methods. While these are all technically methods, it may be useful to categorize them based on their particular function.

Method type

Description

The plugin method

This method is used to initialize the component and is simply the name of the component, followed by parentheses. I will refer to this throughout the book as the plugin method or the widget method.

Shared API methods

The destroy method can be used with any of the components to completely disable the widget being used and in most cases returns the underlying HTML to its original state.

The option method is used by all components to get or set any configuration option after initialization.

The enable and disable methods are used by most library components to enable or disable the component.

The widget method, exposed by all widgets, returns a reference to the current widget.

Specialized methods

Each component has one or more methods unique to that particular component that perform specialized functions.

Methods are consistently called throughout each of the different components by passing the method that we'd like to call, as a simple string to the component's plugin method, with any arguments that the method accepts passed as strings after the method name.

For example, to call the destroy method of the accordion component, we would simply use the following code:

$("#someElement").accordion("destroy");

See how easy that was! Every single method that is exposed by all of the different components is called in this same simple way.

Some methods such as standard JavaScript functions accept arguments that trigger different behavior in the component. If we wanted to call the disable method on a particular tab in the tabs widget for example, we would use the following code:

$("#someElement").tabs("disable", 1);

The disable method, when used in conjunction with the tabs widget, accepts an integer that refers to the index of the individual tab within the widget. Similarly, to enable the tab again we would use the enable method as shown in the following code:

$("#someElement").tabs("enable", 1);

Again, we supply an argument to modify how the method is used. Sometimes the arguments that are passed to the method vary between components. The accordion widget, for example, does not enable or disable individual accordion panels, only the whole widget, so no additional arguments following the method name are required.

The option method is slightly more complex than the other common methods, but it's also more powerful and is just as easy-to-use. The method is used to either get or set any configurable option after the component has been initialized.

To use the option method in getter mode to retrieve the current value of an option, we could use the following code:

$("#someElement").accordion("option", "navigation");

The previous code would return the current value of the navigation option of the accordion widget. So to trigger the getter mode, we just supply the option name that we'd like to retrieve.

In order to use the option method in the setter mode instead, we can supply the option name and the new value as arguments:

$("#someElement").accordion("option", "navigation", true);

The previous code would set the value of the navigation option to true. Note that an object literal can also be passed to the option method in order to set several different options at once. For example:

$("#someElement").accordion("option", {
  animate: "bounceslide",
  heightStyle: "fill"
});

As you can see, although the option method gives us the power to use both the get and set configuration options, it still retains the same easy-to-use format of the other methods.

Events and callbacks

The API for each component also contains a rich event model that allows us to easily react to different interactions. Each component exposes its own set of unique custom events, yet the way in which these events are used is the same, regardless of which event is used.

We have two ways of working with events in jQuery UI. Each component allows us to add callback functions that are executed when the specified event is fired, as values for configuration options. For example, to use the select event of the tabs widget, which is fired every time a tab is selected, we could use the following code:

var options = {
  select: function() {
  ...
  }
};
$("#myTabs").tabs(options);

The name of the event is used as the option name and an anonymous function is used as the option value. We'll look at all of the individual events that are used with each component in later chapters.

The other way of working with events is to use the jQuery's on() method. To use events in this way, we simply specify the name of the component followed by the name of the event:

$("#someElement").on("tabsselect", function() {
...
});

Usually, but not always, callback functions used with the on() method are executed after the event has been fired, while callbacks that are specified using configuration options are executed directly before the event is fired. The callback functions are called in the context of the DOMElement that triggered the event. For example, in a tabs widget with several tabs, the select event will be triggered by the actual tab that is selected and not the tabs widget as a whole. This is extremely useful to us because it allows us to associate the event with a particular tab.

Some of the custom events fired by jQuery UI components are cancelable and if stopped, can be used to prevent certain actions from taking place. The best example of this (which we'll look at later in the book) is preventing a dialog widget from closing by returning false in the callback function of the beforeClose event:

beforeClose: function() {
  if (readyToClose === false) {
    event.preventDefault();
}

If the arbitrary condition in this example was not met, false would be returned by the callback function and the dialog would remain open. This is an excellent and powerful feature that can give us fine-grained control over each widget's behavior.

Callback arguments

An important feature of using any widget is its ability to accept callbacks. We can use callbacks to run anonymous functions that perform a specific task. For example, we could fire an alert on screen each time a particular header is clicked in an Accordion widget.

Any anonymous functions that we supply as callback functions to the different events automatically pass two arguments: the original, extended or modified event object, and an object containing useful information about the widget. The information contained in the second object varies between components. As an example, let's take a look at a callback that could be implemented when using the Accordion widget:

$("#myAccordion").accordion({
  activate: function (event, ui) {
    if(ui.newHeader.length > 0){
      alert(ui.newHeader.attr("id"));
    } else {
      // closed
    }
  }
});

Here we've passed the arguments to the function and used them to determine which accordion heading is open, before displaying the result on screen. The same principle of passing these objects to any callback functions that we define applies to all components; we will cover this in detail in later chapters.

 

Summary


jQuery UI removes the difficulty of building engaging and effective user interfaces. It provides a range of components that can be used quickly and easily out of the box with little configuration. Each component exposes a comprehensive set of properties and methods for integration with your pages or applications that can be leveraged if a more complex configuration is required.

Each component is designed to be efficient, lightweight, and semantically correct, all while making use of the latest object-oriented features of JavaScript, and using a concise, well-tested framework. When combined with jQuery, it provides an awesome addition to any web developer's toolkit.

So far, we've seen how the library can be obtained, how your system can be set up to utilize it, and how the library is structured. We've also looked at how we can add or customize a theme for different widgets, how the API simply and consistently exposes the library's functionality, and the different categories of component. We've covered some important topics during the course of this chapter, but now we can get on with using the components of jQuery UI and get down to some proper coding, beginning with a look at the CSS framework.

Latest Reviews (1 reviews total)
This is a really good book for starting to learn JQuery UI. It is well written the examples are useful and easy to follow. There are a few errors in a couple of the examples but it was easy to work out the fix. I'm still working through the book but would definitely recommend it.
jQuery UI 1.10: The User Interface Library for jQuery - Fourth Edition
Unlock this book and the full library FREE for 7 days
Start now