Examples of jQuery, Ajax, tooltip, and lightbox

This article will gradually guide you to use Ajax technology to improve a Web1.0 shopping site. You can download the source code of the improved "previous" and "later" sample applications, or view the two versions running on the author's Web server. In addition to Ajax technology and best practices, you will also learn how Ajax uses progressive reinforcement principles About this article

This article will gradually guide you to use Ajax technology to improve a Web 1.0 shopping site. You can download the source code of the improved "previous" and "later" sample applications, or view the two versions running on the author's Web server. In addition to Ajax technology and best practices, you will also learn how to useProgressive enhancementTo improve user experience.

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

Back to Top

Review "Ajax transformation, Part 1"

Part 1 of this series introduces the sample app Customize Me Now and begins to transform it from Web 1st to Web 1.0 supported by Ajax. This section discusses the necessity of doing so in terms of business and availability. In additionProgressive enhancementIt also introduces how the progressive enhancement principle improves the user experience. It also helps you set up several open-source tools: jQuery JavaScript framework and several plug-ins, including ThickBox, jQuery Forms, jTip, and GreyBox. Using ThickBox and jQuery Forms can streamline user streams and transform navigation detours into mode dialogs. But this is only part of the improvement. Now, you can use jTip and GreyBox to further optimize the site. After completing all the steps, check the previous and later versions of the sample application and review the improvement process.

Now we have reviewed the implementation of the pattern object in Part 1. Next we will use jTip to convert all the pop-up windows into tooltip to optimize the navigation. Like ThickBox, jTip is easy to implement. For each link to be converted, you only need to add the following attributes:

Class Attribute of "jTip. This magic word will warn jTip's Document Object Model (DOM)-parsing routine to convert this link into a tooltip. Even if the link element already has the 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 the object reference of the link. The value of id is not important, as long as it exists.

Name attribute, which is used by jTip to display the title in the tooltip. Similarly, as long as an attribute exists, its value is not important. If you do not want the title to appear, set the value to an empty string.

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

Listing 1. HTML code required for the jTip Link
Href = "http://www.ibm.com/developerworks/cn/web/wa-aj-overhaul2/productPopup.html? Product = A "> Pizza

Now you only need to adjust CSS. CSS files included with Customize Me Now 1.0 will present most of the link elements in red-underlined text. This type of text changes color when you hover your mouse over it. All users want to click the underlined link to access the link, but these jTip links do not have this function. When the user suspends the mouse, A tooltip is triggered. Therefore, you should change their styles to make them slightly different from other links, but make sure they are fully highlighted to attract users to interact with them. To this end, you can use a new CSS declaration to add some custom styles to the jTip class. Keep the red color unchanged, but remove the underline and suspension status. At the same time, add a new CSS declaration to control the width of the tooltip content, so that no longer need to use the scroll bar. This new voice is based on the fact that jTip wraps the tooltip and the id attribute of JT in the same div. Finally, create another declaration to hide the main title in the tooltip content. In this way, you can use jTip to automatically generate a header Through the name attribute of the link. After that, the new CSS is shown in Listing 2:

Listing 2. CSS for jTip
/* Restyle tooltip links */
# CEN 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 your mouse over the product and product options, you will see the jTip in progress, as shown in 1:

Figure 1. The jTip

Use GreyBox to convert off-site links to lightbox

After eliminating the impact of various navigation detours, Customize Me Now 2.0 is basically formed. What we need to do now is to process the off-site link. The search result page still contains a pop-up link that can connect to the vendor's website. Unlike the pop-up window replaced with jTip, these links can be transferred to uncontrolled and fully functional Web sites. They are too large to be presented in the form of a tooltip, and they are too separate from other applications, so they cannot be in the form of a Mode dialog box. GreyBox is suitable for this situation.

Unlike the multi-function ThickBox (which can process iframe windows, Ajax data, image slides, and many other types of content), GreyBox has only one function. It can use a translucent overlay to overlay the Web site, and then open another Web site at the top. Lightbox processing differs significantly from the mode dialog box, but the appearance is significantly different. ThickBox can be used on these links, but using this method cannot be so clear that two sites are divided. You always want users to think that they see two completely different sites.

So far, you should be familiar with using GreyBox to enable the link. You only need to add a series of attributes to the link.

Title: This will overwrite a title for GreyBox.

Rel: add this uncommon HTML attribute and set its value to "gb_page_fs []"-a special attribute for enabling open source libraries.

After these attributes are added to the off-site link, each pop-up link is shown in listing 3 (although Google does not produce Pisa in the real world ):

Listing 3. HTML used for GreyBox Link
Our Product's Manufacturer "rel =" gb_page_fs [] "> manufacturer's website

Similarly, you can view the Customize Me Now 2.0 search result page in a browser and click the link of the vendor site to see the Running Effect of GreyBox. 2:

Figure 2. Running GreyBox

What are the gains?

So far, all operations have been completed. But how does this Ajax transformation change Customize Me Now? What are the benefits?

Improved User Experience

To understand the benefits of these changes, see Figure 3, which is the site map of the original 1.0 version:

Figure 3. Customize Me Now 1.0 Site Map

See Figure 4. This is the site map of the modified version 2.0. Now the navigation path provides a line from search to purchase. Site owners use this typical ventilation pipe type to increase the conversion and make it easier for users to understand the site process. You can still access the same information, but now the additional data can pop up in the process without the user leaving the context.

Figure 4. Customize Me Now 2.0 site map

Progressive enhancement

You have managed to enhance the application, and do not destroy the application because of JavaScript Luddites. To view the improvement effect, you only need to disable JavaScript execution in the browser and then interact with the 2.0 site. The operation of this site is very similar to that of Customize Me Now 1.0. Except some links seem a little different, they operate the same way.

Ignored

Customize Me Now has changed a lot between version 1.0 and version 2.0. But there are still many improvements to this application.

Typical Ajax Functions

You may have noticed that the tooltip and mode dialog box are not really a traditional Ajax call. You load a complete HTML document, and typical Ajax functions load small pieces of XHTML, XML, or JavaScript Serialized Object Notation (JSON ). Both ThickBox and jTip support more common Ajax formats. However, you can use the same URL on the Ajax and non-Ajax versions of each page to load the complete document. This is the easiest way to achieve progressive enhancement. For traditional Ajax, you must change the template framework on the server. In addition, you must write custom JavaScript code to append the rendering logic to the URL so that the server can return all or only the content of the page. With jQuery, there is not much code to write. However, this is unnecessary for client demonstration.

Security measures

This demonstration does not address the security issues of Ajax development. Web Application Security is a broad topic and beyond the scope of this article. In a sense, security is omitted in this example because only client code is focused. Many security measures must be implemented on the server. That is to say, developers at the technical level must assume their own responsibilities for the security of the entire application. Front-end developers are no exception because many malicious hacker attacks are successful by exploiting JavaScript code, CSS, and tag vulnerabilities. For more information about this topic, see