Create customizable web interfaces with the jQuery UI and Ajax

Today's websites are becoming increasingly customizable, with personalized home or dashboard pages such as iGoogle. In this article, learn how to use Asynchronous JavaScript and XML (Ajax) and the new jQuery UI to create these customizable user interfaces.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris 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.



08 March 2011

Also available in Chinese Japanese

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.

Join the Web development group on My developerWorks

Discuss topics and share resources with other developers about web development in the My developerWorks Web development group.

Not a member of My developerWorks? Join now!

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.

The jQuery UI CSS framework

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.

Using effects to enhance a UI

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 renders
    • removeClass. Can be used to remove a class from an element and may include an animation between the two different display states that the class renders
    • switchClass. Can be used to switch between two classes and may include an animation between the two different display states that the class renders
    • toggleClass. 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.


Conclusion

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.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=631035
ArticleTitle=Create customizable web interfaces with the jQuery UI and Ajax
publish-date=03082011