Introduction | Steve Reynolds Blog

Posts Tagged ‘Introduction’

An Introduction to jQuery UI – Part 1

Monday, February 23rd, 2009

jQuery UI is a fantastic library that sits neatly on top of jQuery enabling you to animate various elements for amazing front-end interactions. In the first of 3 articles, I will discuss the Interaction functionality, followed by Widgets, then Effects in part 3.

Drag & Drop

Drag and Drop is becoming more and more popular nowdays, especially in customizable user interfaces for complex applications. jQuery UI takes simple drag and drop functionality a step further, by not only making it easy to enable drag and drop on an element, but also to define certain criteria around that, like only drag vertically, or only allow dragging within a parent element. You can also set “handles” which are discrete elements where the drag and drop functionality is actioned, meaning a zone within another zone , so that for example only a title bar enables the drag and drop functions for a particular element.

Apple's MobileMe Drag and Drop

As I said, enabling the functionality is very simple for basic drag and drop

$("#element").draggable();

There is also a Droppable element to this too which allows you to target drop zones effectively.

Resizable

I ran through resizable previously in my WordPress Admin jQuery case study. It’s an easy to implement plugin to enable dynamic resizing of elements. You can choose to constrain to particular sizes, or only grow horizontally for example. You can also animate your resizing with a great grow/shrink effect.

$("#element").resizable();

Selectable

Selectable allows you to select multiple elements, either by clicking on them to choose them, or by dragging to multi select them. Can think of some great implementations within forms, or even a file managing interface… However, as you can see above – I experienced some odd behavior in Safari, so seems to suggest there may be some work to do on this part of jQuery UI.

Default functionality again is very simple to implement with jQuery:

$("#element").selectable();

Sortable

The final plugin in the Interaction section is Sortable. With Sortable you give yourself the ability to re-use some of the drag and drop functionality to allow you to sort your elements. A simple example is for organising page widgets like in Sharepoint, or the BBC homepage. WordPress have used it in various places within their new Administration section, allowing the users to be extremely flexible and create very personal experiences.

There’s a theme here with the code implementation, as you can tell – very easy stuff for basic functionality:

$("#element").sortable();

Conclusion

For me, the Interactive functionalities are the most powerful of all the tools that come with jQuery UI – Developers can really build some great intuitive, interactive applications with minimal effort, and that’s what jQuery is all about! In Part 2 I will discuss some Widgets that are available with jQuery UI to bring some more bling to your web applications.