jQuery in Action
296
CHAPTER 9
Prominent, powerful, and practical plugins
We've provided a lab page to help illustrate the use of these techniques. Bring up
the file chapter9/livequery/lab.livequery.html in your browser, and you'll see the
display of figure 9.7.
the file chapter9/livequery/lab.livequery.html in your browser, and you'll see the
display of figure 9.7.
This lab page displays three panes: the Control Panel with buttons that do
interesting things, a Test Subjects container, and the Console, which displays
messages to let us know what's going on.
messages to let us know what's going on.
The setup for this page bears some explanation. In the ready handler, the
Control Panel buttons are instrumented to perform their respective actions once
clicked (refer to the file for details if interested), and two Live Query statements
are executed:
clicked (refer to the file for details if interested), and two Live Query statements
are executed:
$('div.testSubject').livequery('click',
function(){
$(this).toggleClass('matched');
}
);
$('div.matched').livequery(
function(){ reportMatch(this,true); },
function(){ reportMatch(this,false); }
);
The first of these statements establishes a Live Query event handler for all
<div>
elements with the class
testSubject
b
. These elements include the single test
Figure 9.7 The Live Query Lab lets us observe Live Query in action.
Establishes a proactive
click event handler
click event handler
b
Establishes match and
mismatch handlers
mismatch handlers
c