jQuery in Action
262
CHAPTER 8
Talk to the server with Ajax
The
CSS
class identified by the
flyoutClass
option is added to the
<div>
.
A click handler is established on the flyout
<div>
g
that will cause it to
slowly fade when clicked and then to be removed from the
DOM
tree once
the fade effect has concluded.
The newly created flyout
<div>
is added to the
DOM
by appending it to the
<body>
element.
And finally, the flyout
<div>
is displayed by fading it in using the default
rate
h
.
The implementation of the
termifier()
command makes sure to return the
wrapped set as the result of the command (by returning the wrapped set as
returned by the
returned by the
click()
command) so that our new command can participate in
any jQuery command chain.
Now, let's see what it takes to apply this command to our Boot Closet page.
8.5.2 Using The Termifier
Because we rolled all the complex logic of creating and manipulating The Termi-
fier flyout into the
fier flyout into the
termifier()
command, using this new jQuery command on
the Boot Closet page is relatively simple. But first we have some interesting deci-
sions to make.
sions to make.
We need to decide how to identify the terms on the page. Remember, we need
to construct a wrapped set of elements whose content contains the term elements
for the command to operate on. We could use a
for the command to operate on. We could use a
<span>
element with a specific
class name; perhaps something like
<span class="term">Goodyear welt</span>
Creating a wrapped set of these elements would be as easy as
$('span.term')
.
But some might feel that the
<span>
markup is a bit wordy. Instead, we'll lever-
age the little-used
HTML
tag
<abbr>
. The
<abbr>
tag was added to
HTML
4 in order
to help identify abbreviations in the document. Because the tag is intended purely
for identifying document elements, none of the browsers do much with these tags
either in the way of semantics or visual rendition, so it's perfect for our use.
for identifying document elements, none of the browsers do much with these tags
either in the way of semantics or visual rendition, so it's perfect for our use.
NOTE
HTML
4
3
defines a few more of these document-centric tags such as
<cite>
,
<dfn>
, and
<acronym>
. The
HTML
5 Draft Specification
4
3
http://www.w3.org/TR/html4/
4
http://www.w3.org/html/wg/html5/