jQuery UI: Sortable 3D CSS

The jQuery UI sortable widget allows the user to pick an item up, and drop it in another location. It's kinda like the draggable widget and in fact, uses the draggable widget to implement the draggable behaviour. A key difference, however, is that sortable will shuffle the other items around as the item is dragged, and after it's dropped. It re-sorts the items. The only style changes applied to the item that's being moved is it's position. We can use some fancy 3D CSS to make the item stand out even more when it's being dragged.

jQuery UI: Selectmenu Placeholder Text

Input elements have a placeholder attribute, which does a decent job at telling the user exactly what's expected. What I really like about using this attribute is that there's no additional space required — it appears inside the widget, when there's no text. Hence the name. So, I tried to do something similar with the jQuery UI selectmenu widget.

Connecting Sliders To Number Inputs

The input element can be configured to accept numbers. When this happens, the input is just like a regular text input, expect now it's rendered with spinner buttons — used to increment or decrement values. Further constraints can be placed on number inputs, like the minimum and maximum allowed values. This let's us do interesting things, like connect the number input to a jQuery UI slider widget.

Caching Autocomplete Responses Using Lodash

I've taken a few approaches to caching responses in the jQuery UI autocomplete widget. A response, in autocomplete parlance, is the data that's displayed when the user is typing in the text input. Each keystroke is a request for data — the response is something the autocomplete must generate by filtering some data source. The filtering operations can be done locally, or remotely. Either way, we stand to benefit from caching these responses.

jQuery UI: Maximizing Dialogs

The dialog widget can be resized by the user, as well as programatically, using the API. Dialogs can also be dragged around on the screen if the draggable option is left on — the default. Sometimes, just like a real desktop window, you may want to maximize the dialog to occupy the full browser window. Blot out all the other distractions, so to speak.

Containing Draggables by Parent and Grid

The draggable widget, available in jQuery UI, doesn't constrain movement by default. If you create a draggable, without passing in any options, you're free to drag it around anywhere on the page. While this makes sense as out-of-the-box default behaviour, it's very limited in terms of practicality. In the real world, you would probably want to specify a droppable target. Or, at least constrain the movement to within a specific element on your page.

Selectmenu Item Hover State

The selectmenu widget is a nice way to augment the native HTML select element. If for no other reason, the theme support. If you're already using other jQuery UI widgets on your page, using the selectmenu widget is an easy way to align the look and feel of select elements, with everything else. Something I've noticed, however, is the hover state for the menu items isn't ideal for all themes. For example, using cupertino, I get something that looks like this.

Using Tooltips With Form Validation

The jQuery UI tooltip widget is a good way to describe what's required in a specific form input element. A good way to instruct the user, so that they're less likely to receive validation errors when they submit the form. Even with this help, the user will likely get something wrong, or just forget to supply information altogether. In this case, you can use the same tooltip widget to provide a subtle visual cue that there's something wrong with their input.

Using Datalist Elements With jQuery UI Themes

While you can't necessarily style the actual drop-down rendered by the browser you you implement the datalist element, you can at least style the input itself. For example, if you want to use the datalist element in your jQuery UI application, you might apply some theme framework CSS classes to the input element. The trick is, finding something that looks acceptable across browsers.

jQuery UI: Notifying Users About Tabs

If you're using the jQuery UI tabs widget, it probably plays a major role in the layout of your UI. If it's the top-level navigation component, each tab panel probably has quite a few elements in it. Now, let's say the user is doing something in the third tab, but something important has happened in the first tab. You could just activate the first tab for them, but that's quite obnoxious. The better solution is give the user a subtle cue that something has happened in the first tab. The user then makes the decision for themselves, whether or not to drop what they're doing and activate the first tab.

jQuery UI: Autocomplete With Select Elements

The jQuery UI autocomplete widget expects an input as it's target element. It also expects a data source — the fundamental job of the autocomplete widget is tying these two things together. When the user starts typing, the autocomplete filters the data source, and offers the user a selection of possible input text values. When you think about it, the select element is similar to the autocomplete.

jQuery UI: Disabled Tabs Are Better

If you're using the jQuery UI tabs widget, the beforeActivate event gives you the opportunity to "cancel" the activation of the tab. This works by having your handler function for this event return false. The widget knows that a false value returned by any of the beforeActivate handlers means that the whole show is off. In practice, however, this isn't necessarily the best way to go about handling tabs that shouldn't be activated.

jQuery UI: Containing Sortables

The sortable widget has an option called containment. This means that when the user picks up a sortable item with the mouse, the movement is constrained by this option value. By default, there is no such restriction in place — the user is free to move the item around on the page. This can lead to problems in understanding what they're actually supposed to do with the item. For example, basic sortables mean taking an li element, and moving it around in the parent ul element. If the user can drag the element anywhere on the page, and there's nowhere to drop it, that's not an ideal experience.

jQuery UI: Icon Radio Buttons

If you have a group of radio buttons, you can use the buttonset widget to make them look like a jQuery UI widget. That is, you call the buttonset() plugin on a container element, usually a div, and the widget groups the radio button labels together, and applies styles from the theme framework. For example, here's what a radio buttonset widget looks like by default.

Animating jQueryUI Slider Positions

The jQuery UI slider widget has an animate option that's a little misleading. It doesn't animate the slider handle when the widget is first instantiated. There's no animation when the user physically drags the slider handle. The only difference the animation option makes, when turned on, is it animates the handle when the user clicks the slider bar.

jQuery UI: Pre-loading Remote Tab Content

The tabs widget can support remote content just as well as it does local div elements. All we have do is point the href attribute to some remote HTML that we want rendered when that tab is activated. The widget is smart enough to understand that we're referencing a URI, and not a local DOM ID. The content, for any given tab referencing remote content, is loaded when the tab is selected. Not before. However, this content is cached, so the second time the user selects a tab with remote content, it'll render instantly. There's a pre-loading trick you can use to give the perception of even faster loading time.

Custom Accordion Header Icons

The jQuery UI accordion widget has an icons option that let's the developer change the defaults. The defaults use the ui-icon-triangle-1-e icon for the collapsed state, and the ui-icon-triangle-1-s icon for the expanded state. These are classes taken from the theme framework, and so the fundamental limitation is that you have to use an icon that's already there. Either that, or extend the available icons available to your theme. The latter option is painful if all you want to do is use an accordion header icon specific to the content found in that section.

Animating Position Changes

The jQuery UI position utility is about doing math. Specifically, it's performing translations for us, from human-readable position coordinates, into something the browser can understand. Obviously, this is a powerful tool to have at our disposal while doing UI development. I use it all the time. And not just to position elements as the page first loads, also in response to user events. It's this latter scenario where I would like to animate the change in position. The position utility provides an entry point for us to do that.

A Clear Text Input Widget

A standard requirement of most user interfaces is that the input elements have a clear text button. This is generally rendered as a small "x" on the right side of the input. When the user clicks this "x" icon, any text entered in the input is removed. It makes sense to add such a capability into a widget since you'll be applying it to input elements throughout the application. Let's see how this is done using jQuery UI.

Linear Gradients With Progressbars

There are two aspects of the jQuery UI progressbar widget we can style. First, there's the container. This is essentially the progressbar border. While you can style the background of the container, it's best to just leave it alone. The second aspect is the value div. This goes inside the container and increases or decreases in width as the value of the progressbar changes. This is the part the user is interested in, and we can apply interesting styles to it, such as a linear gradient.