Ajax Makeover, part 2nd: Improving existing sites with jquery, Ajax, ToolTips, and Lightbox

Ajax technology changes the appearance of large commercial Web applications, but many smaller web sites do not have the resources to rebuild the entire user interface (UI). Some of the new features of Ajax can solve real-world interface problems and improve the user experience. Through this series of articles, you can learn how to use the Open source client library to make your user interface more stylish. This article will show you how to use simple lightbox and ToolTip techniques to eliminate pop-up windows and navigational corners. adhere to the progressive Enhancement (progressive enhancement) principle during implementation to ensure that enhanced UI features do not compromise site accessibility and ensure that sites adhere to web standards strictly.

About this article

This article will step you through using Ajax technology to improve a WEB 1.0 shopping site. You can download the sample application source code that improves "before" and "after", or you can see the two versions running on the author's Web server. In addition to Ajax technology and best practices, you'll learn how Ajax can improve the user experience with incremental enhancements.

This article assumes you have a solid grasp of HTML and CSS, and a basic understanding of JavaScript and Ajax programming techniques. The sample application is built using client code only; The techniques demonstrated in this article apply to any server-side application framework. To run the sample site, you need at least one basic WEB server running on the local host. In addition, you can only follow the source code to view a running sample site on my Web server.

Revisit the "Ajax makeover, part 1th"

The 1th part of this series describes the sample application Customize Me now and begins to transform it from the Web 1.0 version to the Ajax-supported version of Web 2.0. This section discusses the need for this in terms of business and usability. In addition, progressive enhancements are defined and a step-by-step enhancement principle is introduced to improve the user experience. It also helps you set up several open source tools: The jquery JavaScript framework and several plug-ins, including Thickbox, jquery Forms, JTip, and Greybox. Use Thickbox and JQuery Forms to streamline user flow and turn the navigation detour into a modal dialog box. But this is only part of the improvement. You can now use JTIP and Greybox to further refine your site. When all is done, review the sample application to improve the "before" and "after" versions and review the process of improvement.

Use JTIP to convert pop-up windows to ToolTips

Now that the implementation of the schema object in part 1th is reviewed, the next step is to convert all pop-up windows to ToolTips to optimize navigation through JTIP. Just like Thickbox, JTip is easy to implement. For each link you want to convert, simply add the following properties:

Class attribute for "JTip". This magical word will warn JTip's Document Object Model (DOM)-parsing routines should convert this link to a ToolTip. Even if this link element already has a class attribute, you can simply add "JTip" as an additional class.

For each link, the id attribute has a unique value so that JTIP can obtain an object reference to the link. It doesn't matter what the value of the ID is, as long as it exists.

The Name property, used by JTip to render a caption within a ToolTip. Again, as long as the attribute exists, it doesn't matter what its value is. If you don't want the title to appear, simply set the value to an empty string.

After you add these attributes to the tag, each pop-up link is shown in Listing 1:

Listing 1. JTip the HTML code required for the link

<a class="jTip" name="About Pizza" id="pizza" target="productPopup"
href="productPopup.html?product=A">Pizza</a>

Now you just need to adjust the CSS. The CSS file that is included with Customize Me now 1.0 renders most of the link elements with red underlined text that changes color when the mouse hovers over it. Users want to click on the underlined link to enter the link, but the JTIP link does not have this function; When the user hovers the mouse over it, the ToolTip is triggered. Therefore, you should change their styles to make them slightly different from other links, but at the same time make sure they are sufficiently prominent to attract users to interact with them. To do this, you can add some custom styles to the JTip class with a new CSS declaration. Keep the red unchanged, but remove the underline and suspend state. At the same time, add a new CSS declaration to control the width of the tooltip content so that no more scroll bars need to be used. The new statement is based on the fact that JTip wraps its tooltip and JT's ID attribute in the same div. Finally, create another declaration to hide the main caption within the tooltip content, so that you can use JTIP to automatically generate headers by using the link's Name property. When you are done, the new CSS is shown in Listing 2:

Listing 2. CSS for JTip

/*restyle tooltip links*/
#CMN a.jTip {
text-decoration: none;
color: #930;
}
/*narrow the width of pages that will be rendered by jTip*/
#JT #main.popup {
width: 200px;
padding: 4px;
}
/*hide the headline of pages that will be rendered by jTip*/
#JT #main.popup h1 {
display: none;
}

If you view the 2.0 Search Results page in a Web browser and hover the mouse over the product and product options, you will see the JTIP in motion, as shown in Figure 1:

Figure 1. Screenshot of the JTip in motion