На нашем ресурсе вы можете поделиться своими или бесплатно скачать книги для разработчиков на PHP, Mysql, Ajax, Ruby on Rails, C++, Unix, WinApi, C# sharp, .NET, Java, UML, различным Frameworks. 

<input type="radio" name="imperial.option"

value="vegetarian"/>

Vegetarian

</label>

</div>

</div>

We repeat this

HTML

structure for each appetizer entry. Note that this snippet

contains no visual rendition information; such information is factored out to

CSS

definitions (which can be found in the file bamboo.css in the same folder as the

HTML

file).

Similarly, note that there's no script embedded within the

HTML

markup. The

behavior of our page will be defined following the principles of Unobtrusive Java-
Script with all script properly sequestered from the

HTML

markup.

We should emphasize some aspects of this structure because they will become

important when adding the behaviors to these elements. First, note that the
check box elements (as well as the radio elements further into the markup) are
contained within

<label>

elements

b

that also hold the text that corresponds to

the controls. This makes clicking the text of the label flip the checked state of the
contained control as if the user clicked the control itself. This is a handy usability
enhancement that makes it easier for people to use our pages (especially for so-
called sloppy clickers, a group to which at least one of your authors belongs).

Another notable feature is the

<span>

element that contains the quantity text

box and price display

c

. This element is adorned with a custom attribute named

price

that we use to store the price value for the appetizer. We'll need this value to

calculate the price when the quantity is entered, and the attribute will also serve
as a useful selector handle in our jQuery selectors. (The use of custom attributes
in this fashion is considered controversial by some; please see the sidebar for
more information.)

Note also that the

<span>

element created to contain the computed amount is

initially empty

d

. We could just fill it in statically, but that means we'd have price

information in two places--generally considered not a best practice. Later, we'll
see how we fill this in as part of the setup behavior of the page.

The final major construct in our markup is the

<div>

element

e

that contains

the radio buttons representing the appetizer options. This is the element that will
be hidden until an appetizer is checked.

With the markup all settled, let's develop the behavior of the page step by

step, starting with hiding the container element for the radio button options.