![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Today, websites are more customizable than ever, allowing users to alter their space and personalize it to their liking. Personalized home or dashboard pages, such as iGoogle, MyYahoo!, and MyAOL, have become increasingly common, and similar functionality is even being incorporated into most web applications. The jQuery library has made it simple to write complex JavaScript interactions such as these, and with the introduction of the jQuery UI, this functionality is even easier, as the library provides common user interaction types in easy-to-access jQuery plug-ins.
This article explains how to use Ajax and the jQuery UI to create highly customizable UIs with a variety of custom functionality. You learn how to customize various aspects of a web page as well as how to save preferences using Ajax. And, you'll use techniques such as drag and drop to order list items and organize page elements and UI widgets to switch themes and color schemes—all without leaving a single web page.
Creating custom UI functionality
The jQuery UI is a UI library that includes easy-to-write interactions, animations, and effects as well as widgets that can easily be custom themed. Download the jQuery UI using the link provided in Resources. During the download process, you can even configure your download by selecting the theme you want to include as well as the exact components, such as UI core (required), interactions, widgets, or effects. To use the jQuery UI, you also need the latest version of the jQuery library. It's included in the download, but you can always download the latest library directly from the jQuery site if you need to update it at a later date (see Resources for a link). Listing 1 shows how to include the jQuery UI library and other required files in your web pages.
Listing 1. Creating a web page that includes the jQuery UI code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" /> <link type="text/css" href="css/custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"> </script> </head> <body> </body> </html> |
The first CSS included provides the code for the chosen theme, ui-lightness. This is the default theme, chosen during the jQuery UI download, but you could have changed it to any of the themes provided. If you have already downloaded the library and want to update the theme you're using, simply visit ThemeRoller (see Resources) to download an existing theme from the gallery, or you can use it to customize your own theme. The second CSS included is for custom classes to style your page or override attributes used in the theme you choose. Finally, the JavaScript files included are the jQuery and jQuery UI libraries.
Creating a drag-and-drop interface with the jQuery UI
Drag-and-drop functionality is becoming increasingly popular; it's used to sort
lists and organize page elements, and it's commonly used on personal home
pages in many web applications. The jQuery UI Sortable
plug-in provides a quick way to add sortable functionality to your web pages,
with many options and events for customizing the interactions just the way
you want them.
The sample in Listing 2 shows how to create a simple sortable
list using the Sortable plug-in. You can use this plug-in
to make a simple HTML list a sortable drag-and-drop list. You simply add an identifier
to the list—in this case, you've given it an ID of
sortable so that you can easily target it with jQuery
and add the sortable function call to it. You also added the
ui-state-default class to each item to keep them
in style with the chosen theme.
Listing 2. Creating a simple sortable list with the jQuery UI
Sortable plug-in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet" />
<link type="text/css" href="css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<ul id="sortable">
<li id="item1" class="ui-state-default">Item 1</li>
<li id="item2" class="ui-state-default">Item 2</li>
<li id="item3" class="ui-state-default">Item 3</li>
<li id="item4" class="ui-state-default">Item 4</li>
<li id="item5" class="ui-state-default">Item 5</li>
<li id="item6" class="ui-state-default">Item 6</li>
<li id="item7" class="ui-state-default">Item 7</li>
</ul>
</body>
</html>
|
If you wanted to save the list item positions, you would have to save the details to a cookie or a database to render the page appropriately for later page views. If you were to use a database, you would use Ajax to send this data to a server-side script that writes the values to the database and later, on initial page loads, returns an XML or JSON response with the appropriate positions to place each element in the correct place. The sample code in Listing 3 shows how to send position values to a server-side PHP script.
Listing 3. Sending position values to a server-side script
$( "#sortable" ).sortable({
stop: function(event, ui) {
$("#sortable li").each(
function(index){
$.ajax({
type: 'POST',
url: 'filename.php',
data: 'method=updateposition&id='+$(this).attr('id'))+'&positions='+index,
success: function(xml){
// Success
}
});
}
);
}
});
|
To save the item positions in your sortable list, you need to use an event to
determine when the items have been sorted. A number of sortable events are
available, but this one requires the stop event
because it is the only one triggered after all sortable elements have been
sorted. This is critical because you need to ensure that all elements are in
their new positions before attempting to save those positions. After the
stop event has been triggered, you loop through
each list item to get its index in the list, then you retrieve each item's ID and
send both of those values to a PHP file using Ajax, which saves the results to
the database to sort the elements later, when you come back to the page.
The Sortable plug-in also provides many options for
achieving additional customization, such as:
- Defining a placeholder class for styling the way the placeholder element looks when an item is being dragged
- Connecting lists so that elements can be dropped into another sortable list on the same web page
- Displaying and restricting sortable elements in a grid
- Creating a multicolumn interface in which elements can be dragged and sorted between columns
The example in Listing 4 shows how to create a three-column
interface with drag-and-drop elements. The columns are represented by three
<div> elements floating next to each other
using CSS. To get the Sortable plug-in to work with
the column structure, simply use the connectWith
option and set its value to the column class, which is used on each column
element. The connectWith option lets you use
a multicolumn interface to drag and sort elements between columns.
Listing 4. Three-column drag-and-drop interface
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet" />
<link type="text/css" href="css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( ".column" ).sortable({
connectWith: ".column"
});
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<ul id="page">
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div>
<div class="portlet-content">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
</div>
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
</li>
</ul>
</body>
</html>
|
To keep your elements styled with the jQuery UI theme you have chosen, you use certain CSS classes to define each as a portlet, with a header and content. These CSS classes are what make up the jQuery UI CSS framework, which allows you to easily theme custom UI elements.
So far, you've used a few of the classes in the jQuery UI CSS framework. In this section, you dive a bit deeper, learning how to leverage these classes to let users change the look of their personal dashboard page on the fly. The framework includes many classes that cover common UI elements. When applied, these classes automatically theme your widget according to your chosen theme. The categories of classes available include layout helpers; widget containers; interaction states; interaction cues; icons, which include states, images, and icon types; and miscellaneous visuals, such as round corner helpers, overlays, and shadows. See Resources for more details on individual classes.
When using classes from the framework, it's easy to switch between the available themes. Listing 5 shows just how easy this process can be using the theme switcher tool provided through ThemeRoller.
Listing 5. The JavaScript and HTML used to add a theme switcher tool to a custom portlet on the sample web page
<script type="text/javascript">
$(function(){
$('#switcher').themeswitcher();
$( ".column" ).sortable({
connectWith: ".column"
});
$( "#sortable" ).sortable();
});
</script>
<div class="portlet-content">
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<div id="switcher"></div>
</div>
</div>
|
The example in Listing 5 shows how you can easily add a
theme switcher tool to a portlet in your existing sample web page. By including
the associated JavaScript file for the widget and creating a containing
<div>, you can simply target that
<div> and apply the
themeswitcher to it. Doing so results in a
drop-down menu containing the available themes that the jQuery UI provides. When a
theme is chosen, the entire page is instantly updated to match it. This type of widget
can be useful when letting users customize their
pages, and the options can even be saved to a database using the same
technique shown earlier to save element positions (although this tool already
has cookie-based storage so that when a user refreshes the page, the
previously chosen theme is still available).
The library also includes useful pre-built widgets that you can easily add to your pages. Each widget is already structured to render using your custom theme or the theme you have chosen. Listing 6 shows an example of how you could use the Tab widget in your page to organize certain content for the user and render it with your existing theme.
Listing 6. Adding jQuery UI widgets within an existing theme
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css"
rel="stylesheet" />
<link type="text/css" href="css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( "#tabs" ).tabs();
$('#switcher').themeswitcher();
$( ".column" ).sortable({
connectWith: ".column"
});
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Portlets</a>
</li>
<li>
<a href="#tabs-2">Profile information</a>
</li>
</ul>
<div id="tabs-1">
<ul id="page">
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
ToDo List
</div>
<div class="portlet-content">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
</div>
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Theme
</div>
<div class="portlet-content">
<script
type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
</div>
</div>
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
</ul>
<br class="clear" />
</div>
<div id="tabs-2">
<p>Show profile information here</p>
</div>
</div>
</body>
</html>
|
The tabbed interface consists of a containing <div>
element with an ID of tabs, two list items that are used as the actual tabs and include the tab
names, and two tabs with IDs that match the anchor in the tab list items. As
you can see, it's as easy as adding the appropriate HTML to render the tabs
and the tab content, then simply applying the Tab widget to the tab container.
Doing so automatically renders a tabbed interface and applies your chosen
theme because of the classes you've chosen.
Many effects categories are available through the jQuery UI library, and many of these transitions simply extend existing jQuery methods. Each category includes methods that have their own custom arguments, such as:
- Color transitions:
- Animate. Used to animate and colors within a web page
- Visibility transitions:
- Toggle. Toggles an element's visibility, hiding and revealing it
- Show. Reveals an element and can be animated with any of the animation types listed below
- Hide. Hides an element and can be animated with any of the animation types listed below
- Class transitions:
addClass. Can be used to add a class to an element and may include an animation between the two different display states that the class rendersremoveClass. Can be used to remove a class from an element and may include an animation between the two different display states that the class rendersswitchClass. Can be used to switch between two classes and may include an animation between the two different display states that the class renderstoggleClass. Can be used to add or remove an element's class depending on whether it already includes it and may include an animation between the two different display states that the class renders
As mentioned in some of the method descriptions, there are also animation effects that you can use in conjunction with each effect method. These effects include Blind, Bounce, Clip, Drop, Explode, Fade, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size, Slide, and Transfer. There are also advanced easing techniques that you can easily apply using the jQuery plug-in (see Resources).
Like everything else in the jQuery UI library, applying an effect is easy; Simply target an HTML element or group of elements in your web page and apply the appropriate method. Listing 7 shows you how to use the Toggle effect by applying the method to the content area of each portlet in your sample web page. In this example, the Toggle effect is triggered by double-clicking a portlet header, which results in the content toggling between being hidden and revealed.
Listing 7. Applying the Toggle effect to hide and reveal portlet content
<script type="text/javascript">
$(function(){
$( ".portlet-header" ).dblclick(function(){
$(this).parent().find(".portlet-content").toggle();
});
});
</script>
|
The content of the portlet is toggled by traversing to the parent element of
the header, and then using the jQuery find method
to locate the associated element with the portlet-content
class.
Using the jQuery UI to enhance a web page is basically as easy as including the appropriate files and making a single function call. Highly interactive interfaces were complicated to build before libraries such as jQuery and the jQuery UI, as code had to be written from scratch and it took a lot of testing to get that code to work in all the major browsers. Today, you can include a file and make a single function call to create effects and sortable elements or change themes.
Learn
-
Learn more about the jQuery library.
-
Check out the jQuery UI.
-
Find your theme on ThemeRoller.
-
Learn more about the jQuery UI CSS Framework
framework classes.
-
Web development zone: The
developerWorks web development zone specializes in articles covering various
web-based solutions.
-
IBM
technical events and webcasts: Stay current with developerWorks' technical
events and webcasts.
Get products and technologies
-
Download the
jQuery Easing plug-in.
-
Download IBM product evaluation
versions or explore
the online trials in the IBM SOA Sandbox and get your hands on application
development tools and middleware products from DB2®, Lotus®, Rational®,
Tivoli®, and WebSphere®.
Discuss
- Create your developerWorks profile today and set up a watchlist on jQuery and Ajax.
Get connected and stay connected with developerWorks community.
- Find other developerWorks members interested in web development.
- Share what you know: Join one of our developerWorks groups focused on web topics.
- Roland Barcia talks about Web 2.0 and middleware in his blog.
- Follow developerWorks' members' shared bookmarks on web topics.
- Get answers quickly: Visit the Web 2.0 Apps forum.
- Get answers quickly: Visit the Ajax forum.
Kris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software, and Fire Mountain Gems. He is the author of Ajax for Web Application Developers (Sams) and The ActionScript Migration Guide (New Riders) as well as a featured columnist and writer for numerous websites and design magazines, including Peachpit.com, InformIT.com, and Practical Web Design magazine. Kris is also the founder of www.studiosedition.com, a web design and software development studio specializing in fusion of form and function.
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Buy: WebSphere Portal Express
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
