jQuery in Action
Introduction to the UI Plugin
299
Exercise 4--Experiment with the Add New Test Subject button and Test
Subjects until you're convinced that the event, match, and mismatch han-
dlers are always automatically added to the test subject elements whenever
appropriate.
Subjects until you're convinced that the event, match, and mismatch han-
dlers are always automatically added to the test subject elements whenever
appropriate.
Exercise 5--Play around with expiring Live Query handlers. Reload the
page so that you start with fresh settings, and add a test subject or two to
the page with the Add New Test Subject button. Now click the Expire
Match Handlers button, which expires the match and mismatch handlers
that were established on the Test Subjects. Notice that, when you click the
Test Subjects, no match/mismatch messages appear in the Console, prov-
ing that the handlers have been removed. The click event handler still
toggles the
page so that you start with fresh settings, and add a test subject or two to
the page with the Add New Test Subject button. Now click the Expire
Match Handlers button, which expires the match and mismatch handlers
that were established on the Test Subjects. Notice that, when you click the
Test Subjects, no match/mismatch messages appear in the Console, prov-
ing that the handlers have been removed. The click event handler still
toggles the
matched
class because the element still changes appearance
when clicked.
Exercise 6--Click the Expire Event Handler button. This expires the Live
Query click handler for the Test Subjects. Note that the Test Subjects are
now unresponsive to mouse clicks and that they retain the state they had
when you clicked the button.
Query click handler for the Test Subjects. Note that the Test Subjects are
now unresponsive to mouse clicks and that they retain the state they had
when you clicked the button.
It doesn't take much imagination to see the power that this plugin brings to pages
in Rich Internet Applications where elements are changing all the time, includ-
ing popping into and out of existence. By allowing us to establish the behaviors of
these events up front, the Live Query Plugin helps us minimize the amount of
code we need to write when changing and adding elements to the page.
in Rich Internet Applications where elements are changing all the time, includ-
ing popping into and out of existence. By allowing us to establish the behaviors of
these events up front, the Live Query Plugin helps us minimize the amount of
code we need to write when changing and adding elements to the page.
Now, let's move on to one more important and useful plugin.
9.4 Introduction to the UI Plugin
When it comes to Rich Internet Applications, the
UI
is king. It's not surprising
that many jQuery plugins focus on enabling rich user interfaces. In this section,
we'll introduce the official
we'll introduce the official
UI
Plugin, an important and recent addition to the
jQuery family. Because it's an important component, we'd love to cover this plu-
gin to the same depth that we examined core jQuery; but reality intervenes, and
practical space considerations prevent more extensive coverage.
gin to the same depth that we examined core jQuery; but reality intervenes, and
practical space considerations prevent more extensive coverage.
We'll extensively cover two of the essential methods defined by this plugin--
the ones that provide support for drag-and-drop on our pages--giving you a
good feel for how the remainder of the plugin operates. Then, we'll provide an
overview of the remainder of the plugin to demonstrate what it can do to bring
good feel for how the remainder of the plugin operates. Then, we'll provide an
overview of the remainder of the plugin to demonstrate what it can do to bring