Introduction to Building Complex UIs Using jQuery UI

Building a web application with jQuery makes the task easier. Similarly, building a web application with a complex UI is made easier with jQuery's sister project jQuery UI."With jQuery UI we have a collection of interactions, widgets and a theme builder at our fingertips that allows us to make a cohesive UI. The robustness of […]

Building a web application with jQuery makes the task easier. Similarly, building a web application with a complex UI is made easier with jQuery's sister project jQuery UI.

"With jQuery UI we have a collection of interactions, widgets and a theme builder at our fingertips that allows us to make a cohesive UI. The robustness of jQuery UI makes it easy to extend it to the needs of your application."

The prepackaged themes that are available make it so that all your UI elements have a similar look and feel. The ThemeRoller that is available on jQueyUI.com can be used to make custom themes that you can use for your application.

There are a number of interactions within jQuery UI that allow you to build complex behaviors. The library provides support for dragging, dropping, resizing, selecting, and sorting elements on a page.

It also provides many prebuilt widgets that you can drop onto your UI with the ease of any jQuery plug-in. Widgets are full-featured UI controls each having a full range of options. These widgets, as of jQuery UI (1.8.12), include Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, and Tabs. There are also a number of effects that can be utilized and additionally a low-level position utility method that existing widgets are taking advantage of that you can use for your UI's.

Ralph Whitbeck, senior Web application engineer at BrandLogic, show how to build complex user interfaces using jQuery UI. In his blog post, Ralph shows how to build a To-do List application (not the back-end, but the user interface part).

The requirements of the to-do list are as follows:

  • Ability to login
  • Ability to keep track of to-do's in multiple projects
  • Add/Remove Projects
  • Add/Complete To-do items.
  • Sort To-do items.
  • To-do items will have a title, description and due date
  • The UI should share a common theme

Read the this Introduction to Complex UIs Using jQuery UI.