jQuery in Action
114
CHAPTER 4
Events are where it happens!
As a bonus, we'll also instrument the controls so that when a quantity is entered by
the hungry user, the displayed dollar amount will reflect the price for the quantity
chosen. Let's see what it takes to make all that happen.
the hungry user, the displayed dollar amount will reflect the price for the quantity
chosen. Let's see what it takes to make all that happen.
The full page code for this example is available in the file chapter4/bamboo/
bamboo.html, but let's start by examining the structure of the
HTML
that's used
to implement the display of one appetizer entry as shown in listing 4.7.
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
Fried Imperials rolls (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
Listing 4.7 HTML structure for a single appetizer entry
Figure 4.11 By hiding the options until they're needed, we reduce the confusion and
clutter, and the user isn't overwhelmed by controls that aren't relevant.
clutter, and the user isn't overwhelmed by controls that aren't relevant.
Label construct
contains control
contains control
b
Uses custom attribute
to hold price data
to hold price data
c
Holds place for
computed price
computed price
d
Contains options to be
conditionally displayed
conditionally displayed
e