jQuery UI

jQuery itself is a JavaScript library for manipulating the DOM in a convenient way. We've used it many times this semester.

However, there are lots of common user interface (UI) widgets¹ and effects that people commonly want to do that jQuery doesn't do. Fortunately, many of these UI widgets and effects are packaged up in something called jQuery UI.

In this reading, I'll ask you to look at a selection of these. There is nothing particularly special about the ones I've chosen except that I have used most of them in the past and found them helpful and relatively easy to use.

jQuery UI Overall¶

First, take a few minutes to look over the home page and look at the options:

jqueryui.com

Then, take the time to read the about page: about jQueryUI

Next, I'll ask you to look at several specific items. Each item has a main page with a demo. In fact, it usually has several demos; make sure you study at least the default demo. The demo will have a way to look at the source code of the demo. Please look at the source code.

You'll notice that the source code usually loads quite a few files and other code, such as

• jquery-ui.css
• some additional custom CSS
• some example-specific CSS in a style tag
• jquery itself
• jquery UI
• some example-specific JavaScript, that puts these libraries into action.

So, when you're reading the code, don't neglect to notice all these parts.

You'll see that these jQuery UI features have "API documentation" that shows how they can be customized in a bewildering number of ways. We typically won't be using these customizations; we'll try to stick to the most common cases. You're welcome to look at the API documentation, but I am not asking you to do that on this first reading. Let's get the high-level view down first. Still, it's good to know that if a jQuery UI feature is close to what you want but not quite right, it's probably customizable in the way that you want.

In class, we'll get some more experience with using these.

• autocomplete I think developers should always use this for "state name" when asking for an address, because I detest 50-line menus.
• datepicker So easy and useful. You can use this in the final project as well
• tabs A nice way to organize a page without having lots of scrolling or switching to other pages. jQuery Mobile is based on this idea.
• sortable An interesting feature.

Four features should be enough to get us started, but if there is something else that you see that you think is cool, let me know and we'll see if we can learn about it.

Accessibility¶

Later in the course, we'll discuss accessibility, which is the property of a website being accessible by all the world's people, including those with disabilities, like blindness, deafness, inability to use a mouse and so forth. There are a few aspects of accessibility that jQuery UI touches on:

• progressive enhancement: this is the idea that the website should work even if JavaScript doesn't. This is done by having the website fall back to HTML primitives if the JS is missing, broken, or disabled. Special web browsers for people with disabilities sometimes lack JavaScript, so the website needs to be functional without it.
• ARIA: The ARIA spec allows us to use the HTML language in a more flexible way. For example, the button and a tags are clickable but div and such are not. (That's why Ottergram wrapped the clickable thumbnails with an a tag.) If, for some reason, you wanted a div to be clickable, you can notify the browser by using some special ARIA attributes. That gives you a clickable div that is still accessible.

The jQuery UI "about" page explains that the jQuery UI team has tried hard to use progressive enhancement and ARIA, so that their widgets will be accessible. Definitely a point in its favor.