Put the rest of the HTML tags into place. Figure 5.10 shows the completed table

USING jQUERY PLUGINS

15. Put the rest of the HTML tags into place. Figure 5.10 shows the completed table

15. Put the rest of the HTML tags into place. Figure 5.10 shows the completed table.

</div>

</body>

</html>

The records are sorted in the order in which they were input into the database.

In this table four columns, Arrival Date, Departure Date, Guest Name, and Guest Phone, are sortable. Figure 5.11 shows the sorting action that occurs when you click on the header for Arrival Date.

No matter how simple or complex your tables may be, the Tablesorter plugin will provide you with many options to ensure that your Web-site users can sort data to their heart’s content.

Another way of providing additional information is supplying a tool tip when the mouse hovers over an element in your HTML page. Let’s add a tool-tip plugin to the site that will provide additional information about the tabs.

NOTE: I purposely omitted how users can remove a record from being displayed in the table by selecting the check box in the column Responded.

A good exercise would be to add the jQuery change event to the check boxes and use jQuery’s AJAX functionality to mark that record as responded to. Then users will only have to view the records they need to respond to.

ptg

FIGURE 5.10 The freshly loaded table with the data unsorted.

FIGURE 5.11 The first column is ordered from earliest arrival date to latest arrival date.

ptg PROVIDING BITE-SIZED INFORMATION

Tool tips, such as the one shown in Figure 5.12, can be a great way to present your Web-site visitors with additional information about a link or a word on a Web page.

The jQuery TinyTips plugin (available at www.mikemerritt.me/blog/jquery-plugin-tinytips-1-1 and authored by Mike Merritt ) is a small, easy-to-use, and extremely ﬂexible plugin that will give you the option of presenting pictures as well as text in pop-up style tool tips. Let’s try it!

1. Open chap5/5-6.php and save a copy of it as chap5/5-7.php. Insert the source references for the TinyTips CSS and jQuery script ﬁles in the head section (highlighted):

p href=”css/ui/jquery-ui-1.8.12.custom.css" />

<link type=”text/css” rel=”stylesheet”

p href=”css/tinyTips/tinyTips.css” />

p src=”inc/jQuery/jquery-1.5.min.js"></script>

p src="inc/jQuery/jquery-ui-1.8.12.custom.min.js"></script>

FIGURE 5.12 A TinyTip provides more information about a tab on the lodge’s Web site.

ptg

p src="inc/jQuery/attractions.js"></script>

<script type=”text/javascript”

p src="inc/jQuery/jquery.tinyTips.js"></script>

2. Locate the $(document).ready(function() {… section of the code between thehead tags and include the following jQuery to set up the TinyTips:

$(‘a.tinyTip’).tinyTips(‘yellow’, ‘title’);

You are binding the anchor tags with a class of tinyTip to the tinyTips method. The properties in the tinyTips method are (in order) the CSS styles to use and the element attribute that will be displayed in the tool tip.

3. To create TinyTips on a couple of the tabs on the lodge’s Web site, include the class tinyTip and add a title attribute to the HTML markup for the tabs:

<ul>

p Welcome to the lodge...</a></li>

<li><a href="#play" class=”tinyTip” title=”Find Area p Attractions”>Play with us...</a></li>

<li><a href="#stay" class=”tinyTip” title=”Make a p Reservation Request">Stay with us...</a></li>

</ul>

Be sure to visit the TinyTips plugin Web site for other options and ways to use TinyTips in your Web sites and applications.

While you’re adding more information for the lodge site visitors, it would make sense to provide them with map information, which many business Web sites do.

Due to the popularity of featuring map data on Web sites, Google has provided an API that you can use to interact with its map application. The next jQuery plugin,

gMap, gives you the tools that you need to use the Google Maps API easily and eﬀectively in your Web sites.

ptg PUTTING BUSINESS ON THE MAP

The number of Web sites that use the Google Maps API to display maps of various types is staggering. Web sites use maps to provide directions, highlight all of their locations, and even guide players in live, interactive games.

There is only one problem: The Google Maps API can be a bear to use, espe-cially when all a designer wants to do is include a map to show the location of a retailer or service.

Cedric Kastner eliminated the complexity with his jQuery plugin for Google maps, which he called gMap (download it from http://gmap.nurtext.de). The only requirement for using gMap, other than including the proper ﬁles in your markup, is that you have an account with Google so that you can sign up for a Google Maps API key. You can sign up for the key at http://code.google.com/intl/en-US/apis/

maps/signup.html.

Let’s put the lodge’s location on the map.

1. Save a copy of chap5/5-7.php as chap5/5-8.php. Make sure you include the gMap plugin source ﬁle in the head section of chap5/5-8.php, just as you did with the plugin ﬁles you used earlier.

2. Include the following script reference using your Google Maps API key in

在文檔中 Applied jQuery (頁 191-195)