jQuery in Action
Putting it all together
259
In the top part of the figure we see the Features description of the item with the
terms Full-grain and Cambrelle highlighted. Clicking Full-grain causes the flyout
containing its definition to be displayed as shown in the bottom part of the figure.
terms Full-grain and Cambrelle highlighted. Clicking Full-grain causes the flyout
containing its definition to be displayed as shown in the bottom part of the figure.
We could hard-code everything to make this happen right on the page, but
we're smarter than that. As with our extensions to manipulate the select elements,
we want to create a reusable component to use elsewhere on this, or any other,
site. So once again, being jQuery-savvy, we'll implement it as a jQuery command.
we want to create a reusable component to use elsewhere on this, or any other,
site. So once again, being jQuery-savvy, we'll implement it as a jQuery command.
8.5.1 Implementing the flyout behavior
As we recall, adding a jQuery command is accomplished by use of the
$.fn
prop-
erty. We'll call our new plugin that looks up the definitions of terms The Termifier,
and the command will be named
and the command will be named
termifier()
.
The
termifier()
command will be responsible for instrumenting each ele-
ment in its matched set to achieve the following goals:
Establish a
click
handler on each matched element that initiates the dis-
play of The Termifier flyout.
Once clicked, the term defined by the current element will be looked up
using a server-side resource.
using a server-side resource.
Once received, the definition of the term will be displayed in a flyout using
a fade-in effect.
a fade-in effect.
Figure 8.9
The before and after shots
of the behavior that we'll be
adding to the page
of the behavior that we'll be
adding to the page