Index

A

Accordion height

autoHeight feature, 535

autoHeight setting, 532, 533

div elements, 533

extra-high content element, 534

img elements, 532

incorrect height problems, 533

large height difference, 534–535

parent element, 536–537

resizing, 536

style element, 533

accordion method, 701–702

activate method, 543–544

active setting, 538–541

active swatch, 799

activePage property, 785

additionalflowers.json, 439

Ajax

advanced configuration settings

data conversion, 426

dataFilter setting, 424–425

ifModified setting, 421–423

JSON.stringify method, 425

statusCode setting, 423–424

synchronous request, 421

asynchronous requests, 372

basic request configuration settings, 417

callback functions, 372

default settings, 427

errors, 557–558

events handling

beforeSend setting, 411

complete setting, 409–411

context setting, 413

error setting, 407–409

event settings, 406

multiple event handling functions, 412

success function, 406–407

expected data type specifying, 388–390

filtering requests, 428–429

forms plugin, 397–398

GET request

button press response, 376–377

class attribute, 374

example document, 373

example.html, 373

flowers.html, 373, 375

get method, 375, 377, 378

HTML fragment, 374

inline data, 376

load, getScript, and getJSON methods, 379

mydata.json, 377

preventDefault method, 377

response data processing, 375–376

slice and appendTo method, 378

global events, 413–417

jqXHR object, 402–403

JSON data, 419–420

low-level API, 400–402

pitfall, 390–391

POST request, 404–405

cross-origin Ajax requests, 382–383

form data submission, 383–387

formserver.js, 381

node.js preparation, 380–382

nonform data sending, 387–388

total property, 382

spinner message, 559–560

tab content, 553–554

timeouts and headers, 418–419

type-specific convenience methods

getScript method, 392–394

HTML fragment, 391–392

JSON data, 394–397

myscript.js file, 392–394

URL setting, 404

Ajax errors, 557–558

Ajax spinner message, 559–560

Ajax tab content, 553–554

AjaxOptions setting, 555–557

ajaxSetup method, 428–439, 442

ajaxStart and ajaxStop methods, 414

Android SDK emulator, 755

animate method, 922–924

append method, 159–160

appendTo method, 165–166

Apple Safari browser, 753

attr method, 785

autoOpen setting, 720

B

background-color properties, 58

basket elements, 716

bind method, 770

boolean values, 95

border property, 62

Border style, 65

Border width, 65

Browser event shorthand methods, 243–244

bubbles property, 35

button method, 474

Button widgets

automatic creation

element types, 806–807

prevention, 807–808

configuration

buttons events, 809–811

data attributes, 808

from other elements, 808–809

icons addition, 811–813

inline buttons, 813–814

grouped buttons, 814–817

buttonDiv element, 716

buttonset method, 491–493

C

cancelable property, 35

Carousel event handler functions, 285–287

Cascading Style Sheets (CSS), 37

browser display, 37–38

embedded style

anatomy, 41

attribute, 40

complex set, 42–43

effect, 42

head element, 41

h2 element, 41

h1 selector, 43

selectors, 41

external style sheet, 43–45

HTML document, 37

inline value, 39–40

properties, 38–39

selectors

attribute, 46–47

core selectors, 45

pseudo-element and pseudo-class selectors, 49–51

relationship, 47–49

unions and negation, 52–53

shorthand properties and custom values, 64–66

style cascading

author styles, 54

browser styles, 53, 54

color property, 54

embedded styles, 53

external styles, 53

inline styles, 53

specificity and order assessments, 55–58

tweaking, important styles, 54–55

user styles, 53, 54

units

absolute lengths, 60

colors, 58–60

font-size property, 60

percentages, 64

pixels, 62–63

properties and values, 58

relative lengths, 61–62

change event, 544–546

changePage method, 778–779, 797

bind method, 779

load dialog, 782–784

transition effect direction, 780–782

ui-grid-a, ui-block-a, and ui-block-b classes, 779

changestart event, 544–546

changing icons, 541–542

children method, 156

class attribute, 46

Client-side validation, 338

clone method, 156, 157

Cloning elements, 156–157

close methods, 523–524

Collapsible content blocks

accordions creation, 825–826

collapse and expand events, 821–823

data attributes, 818

programmatic control, 823–824

single collapsible block

configuration, 819–821

creation, 817–818

expansion, 818

color property, 119

Content distribution networks (CDNs), 102, 474–475, 730

Content elements

elements with external resources, 25–26

forms and inputs, 23–25

semantic/presentation divide, 21–23

structural elements, 25

countImgElements function, 107

Cross-Origin Resource Sharing (CORS), 383

cycleEffects function, 270

D

Data templates

conditional templates

conditional statements, 315

{{else}} tag, 313–314

flowerTmpl template, 312

{{if}} and {{/if}} tags, 311

in-stock items, 313

stocklevel property, 312

template rendering, 313

elements creation, 294–295

first data templates example

appendTo method, 299

definition, 298–299

div elements, 299

expressions evaluation, 302–303

flower data definition, 298

inline data, 297

remote data, 297

script element, 296

tmpl method, 299

tweaking, 300–302

HTML encoding, 318–320

iteration control

{{each}} template tag, 315–316

expression, 317–318

$index variable, 316

$value variable, 316

jQuery templates library, 295–296

manipulation

data item rendering, 320–321

data modification, 323–325

flowerTmpl template, 321

handleMouse function, 321, 323

mouseenter method, 321

template item object properties, 322

tmpl property, 322

update method, 323

nested templates, 307–309

array, 309–310

data formatting, 311

flowerTmpl, 308

inline data refactoring, 310–311

inputTmpl template, 308

rowid, 310

rowTmpl template, 310

{{tmpl}} tag, 309

template variables

data variable, 304

discount property, 307

$item variable, 306–307

jQuery $ function, 305–306

stockDisplay function, 307

data-ajax attribute, 830

dataFilters, 462

data-native-menu attribute, 840

data-overlay-theme attribute, 840

data-placeholder attribute, 841

data-role attribute, 843–844

data-theme attribute, 799, 800

dayOfWeek object, 79

dcell class, 48

defaultPrevented property, 35

Deferred objects, 939

Ajax, 966–969

always method, 953–956

callbacks with long-lived task, 942–943

chaining method, 953

click handler function, 961

click method, 941

$.Deferred method, 941

definition, 939

displayMessage function, 941

DOM changes, 962–963

done method, 941–942

example, 940–941

fail method, 950, 952

for loop, 951

multiple callbacks, 956–958

notify method, 960, 961

performLongTask function, 943–945

progress method, 960–961

Deferred objects (cont.)

registering callbacks, 949

reject method, 950–952

resolve method, 942

setTimeout function, 944, 945, 961

state method, 964–966

table element, 941

then method, 953

tidying up, 946–949

when method, 958–959

destroy method, 485–486

detach method, 182–183

dialog method, 719

doAnimation function, 268

Document event shorthand methods, 243

Document Object Model (DOM), 153

child and descendant elements insertion

append method, 159–160

appendTo method, 165–166

different positions, 163–165

methods, 158

prepend method, 160–162

with function, 166–167

wrapInner method, 159

$(document).ready approach, 107

document variable, 106

element creation

API, 157–158

cloning elements, 156–157

$ function, 154–156

elements removal

detach method, 182–183

empty method, 183–184

remove method, 180–182

unwrap method, 184–185

using selector, 181

elements searching, 30–31

events handling, 33–35

function omission, 106–107

getElementsByTagName method, 31

HTMLElement properties, 29

img elements, 31

JavaScript, 29

modification, 31–32

navigation

across the hierarchy, 147

ancestor selection, 142–144

children and find methods, 138–139

down the hierarchy, 138

first matching ancestor (see First matching ancestor)

intersection creation, 140

nextAll and prevAll methods, 149–150

overlapping descendants, 139

parent elements, 141–142

sibling elements, 148–149

siblings method, 148

up the hierarchy, 141

objects

array, 115–116

creation, 114–115

events handling, 121

function, 116

index method, 116–118

multiple elements and chaining method, 118–120

parent and ancestor elements insertion

dynamic wrapping, 173

wrapAll method, 170–171

wrapInner method, 172–173

wrap method, 168–169

programming language, 27

ready event, 108–109

ready method, 106

replacing elements

replaceWith and replaceAll methods, 178–179

using function, 179–180

script element, 31, 106

sibling elements insertion

before and after methods, 175–176

insertAfter and insertBefore methods, 176

with function, 177

styles modification, 32–33

tagName and src properties, 31

document2.html file, 786

document2.html page, 790

document.querySelectorAll method, 120

Drag and drop tuning

accept setting, 664

grouping draggable and droppable elements, 666

helper element

draggable and droppable elements, 667

helper function and uses, 668

large draggable element, 666–667

manipulation, 669

over and out events, 669

property, 669

setting, 668

snapMode setting, 671

snap setting, 670–671

snapTolerance setting, 671

ui.helper property, 669

scope setting, 664–666

Draggable interaction

browser window, 643

configuration

axis setting, 644–646

delay and distance settings, 649–650

grid setting, 648–649

methods, 650–651

region setting, 646–648

start and stop events, 651–652

events, 651–652

HTML and CSS, 643

simple demonstration, 642–643

Droppable interaction

acceptable elements, 657–659

activate and deactivate events, 654–655

activeClass and hoverClass settings, 659–660

basic element, 653

drag and drop, 654

events, 652

fit and touch settings, 661–662

fit and touch values, 662

methods, 663–664

over and out events, 655–656

settings, 656, 657

text method, 654

tolerance values, 661

E

Element selection, 123

andSelf method, 136–137

DOM navigation (see Element selection:Document Object Model, navigation)

end method, 134–136

expansion, 124–126

filter method, 127

filtering elements, 129–132

mapping, 133–134

reduction

descendants, 132–133

range, 128–129

specific element, 127–128

testing, 134–135

empty method, 183–184

Error cue class, 937, 938

Event handling

bind method, 224–226

border and opacity properties, 226

CSS border property, 229

default action suppressing, 230–231

Event.data property, 229

event handler function removing, 231–233

jQuery event object members, 226–227

methods, 224

mouseenter and mouseout events, 226

multiple event types, 227–229

one method, 233

event setting, 538

Event shorthand methods

bind method, 242

browser event shorthand methods, 243–244

document event shorthand methods, 243

form event shorthand methods, 245

function argument, 241

keyboard event shorthand methods, 246

mouse event shorthand methods, 244–245

trigger method, 242–243

Example document

additional flower products adding, 279–280

basic document, 277–279

carousel buttons adding, 281–283

carousel event handler functions, 285–287

JavaScript disabling, 290

product selection total, 288–289

submit button, 283–285

Extended colors, 59

F

fade effect, 770

fieldcontainer, 832

fieldcontrol div elements, 835

fieldset element, 847

fillSpace setting, 536

Firefox Mobile Emulator, 756–757

First matching ancestor

closest method, 144

closest method with reference objects, 145

closest positioned ancestor, 145, 146

offsetParent method, 145–146

flip effect, 768

Flip switches, 843–844

Floating-point numbers, 73

font-size property, 119

Form event shorthand methods, 245

formserver.js, 436

G

get method, 442

getElementsByTagName, 120

getJSON method, 442, 966, 968

Grouped buttons, 814–817

H

has method, 132–133

header and headerSelected properties, 541

height property, 62

Highlight cue class, 935–937

holdReady method, 108–109

HTML, 13

attributes

class attribute, 17

definition, 15–16

id Attribute, 16–17

name and value, 16

snowdrop, 16

basic document, 13–15

document structure

basic structure, 18

DOCTYPE element, 18

elements with external resources, 25–26

forms and inputs, 23–25

HTML elements, 18–19

script element, 20

semantic/presentation divide, 21–23

structural elements, 25

style element, 21

DOM (see Document Object Model)

element anatomy, 15

element content, 17

element hierarchy

ancestor-descendant relationships, 28

body element, 26

parent-child relationships, 27

parts, 27

sibling relationships, 28

form event methods, 332–333

form focus, 333–334

form submission, 336–337

jQuery form-event methods, 332

value changes, 335

form values validation

addClassRules method, 345

additional-methods.js, 344

attribute and name validation, 353–356

custom check creation, 358–361

element attribute, 352–353

element name attribute, 351–352

form validation plugin, 338–340

JavaScript file, 340–341

max check, 350

multiple checks, 344–347

per-element validation, 356–357

plugin checks, 343–344

remote validation, 344

Rose product, 346

rules method, 347–349

stocklevel property, 350

tailoring checks, 349–350

validate method, 341

validation error display, 361–364

validation rules, 341–343

validation summary, 364–368

node.js server

action attribute, 330

example document, 329–330

input elements, 331

JavaScript, 328

Place Order button, 331

response, 332

server-side script, 328

void elements, 18

HTML5, 340

HTML5 data attributes, 220–221

HTMLElement object, 112

I

id attribute, 46

Image opacity, 103, 104

img elements, 107

Individual border properties, 66

Inline buttons, 813–814

insertAfter and insertBefore methods, 176

Inset lists, 859–860

Integer, 73

Interaction state classes, 934–935

iPhone, 752

is method, 134–135

J

JavaScript, 67

arrays

built-in array methods, 90–91

contents reading and modification, 89–90

contentsenumeration, 90

creation and population, 88

literal, 88–89

myArray, 88

new Array(), 88

error handling, 91–92

external script, 67

functions

code block, 70

definition, 69–70

parameters, 70–71

return results, 71

Google Chrome console, 68

inline script, 67–68

object

creation, 74–75

literals, 75

methods, 75–76

properties enumeration, 77–78

properties reading and modification, 76–77

property addition, 78–79

property deletion, 79–80

property determination, 80

operators, 80

conditional statements, 81–82

equality vs. identity operator, 82–85

numbers to strings conversion, 86–87

string concatentation, 85

strings to numbers conversion, 87–88

statements, 68–69

syntax and style, 68

undefined and null values, 93–96

variables and types

Booleans, 73

local and global variables, 72

numbers, 73–74

strings, 73

jQuery, 3, 99

animations, enabling and disabling, 275–276

arbitrary element data, 218–219

attributes and properties, 188

attr method, 188

attribute value, reading, 189–190

attribute value, setting, 190–191

attribute values with function, 193

HTMLElement object, 190

img elements, 190

multiple attributes, 191–192

output, 190

prop method, 194–195

removeAttr method, 194

src attribute, 190

basic effects methods, 248

callback function, 255–257

CDN, 102

classes

addClass method, 196

adding and removing, 197–199

all classes toggling, 203–204

blueBorder class, 196

border property, 201

doToggle, 200

dynamic toggling, 205–206

hasClass method, 196

img elements, 196

methods, 195–196

multiple classes toggling, 202

output, 197

preventDefault method, 200

redBorder class, 196, 200

removeClass method, 196

style declaration matching, 201

style element, 196

toggleClass method, 199–200

toggle direction, 204–205

CSS

font-size property, 207

method, 206

multiple properties, setting, 207–208

property values setting, 209, 210

property-specific convenience method, 210–212

relative values setting, 208, 209

style attribute, 206

custom effects

absolute target property values, 265–266

custom animation, 264–265

form element, 265

height and width properties, 265

methods, 263, 264

relative target property values, 266–267

jQuery, custom effects (cont.)

z-index property, 265

data and Ajax, 4

dcell class, 250

DOM, 3 (see also Document Object Model)

effect queue

creation, 267

custom function, 274, 275

cycleEffects function, 268

delay method, 272–273

item display, 268–270

methods, 267

stopping and clearing, 270–272

element content

div.dcell selector, 213

html method, 213, 214

methods, 213

setting, 213–215

text method, 213

element selection

extension selectors, 109–111

img elements, 109

narrowing with context, 111–112

odd img elements, 109

odd pseudo-selector, 109

element visibility animation, 253–255

event trigger method, 562–563

example code, 7

example document, 5–6

fade effects, 260

fadeOut, fadeIn, and fadeToggle methods, 261

showing and hiding elements, 261

specific opacity, 262–263

features, 4, 5

first script, 102–104

form elements, 215–218

form-event methods, 332–337

$ function, 104–106

hide element, 250

HTML editor, 9

image attribution, 11

JavaScript and CSS, 4

jQuery Mobile, 3, 5

jQuery UI, 3–4

library, 4, 8

looping effects, 257

Node.js, 9–11

partial listing, 7

plugins, 4

selection result

context, 113–114

jQuery object, 112–113

selector property, 113

setting up

flower shop example document, 100–101

jQuery-1.7.js, 101

jquery.1.7.min.js, 101

styles.css, 101

show and hide methods, 249–250

slide effects, 259–260

toggle method, 251–252

:visible and :hidden selectors, 251

web browser, 9

web server, 9

jQuery Ajax event methods, 414

jQuery Mobile, 729, 827

A-grade support, 732

automatic enhancement

custom JavaScript, 735

data-role attributes, 733–735

example document, 732, 733

Opera Mobile browser emulator, 733

resolution, 733

script element, 732

body element, 731

button addition, 891–894

CDNs, 730

check boxes

creation, 845–846

grouping, 847–849

label, 846–847

checkout process implementation, 894–899

data-ajax attribute, 830

device orientation changes

media queries, 749–750

response, 748, 749

span element, 748, 749

dialogs

close button, 793–794

data-rel attribute, 791, 792

navigation link, 795–796

page, 792–793

programmatic closing and opening, 796–798

example.html contents, 731

form element and form-related child elements, 829

guidelines, 827

initial document, 875–877

jquery-1.6.4.js file, 730

jquery.mobile-1.0.zip, 730

labels

div element, 830

fieldcontain, 830

fieldcontain cutoff point, 831–833

hiding, 833–837

portrait orientation, 830, 831

link element, 731

list widgets (see List widgets)

meta element, 731

mobile devices

Android emulator, 755

avoiding bad assumptions, 751–753

desktop browsers, 759

Firefox Mobile emulator, 756–757

identification, 751

iPhone emulator, 755

Multi-Browser Viewer, 757, 758

Opera mobile emulator, 756

two cardinal sins, 751

unrealistic simulation and testing, 753–755

Windows Phone 7 emulator, 758–759

pageinit event, 737–738

pages (see Pages and navigation)

programmatic product insertion

data.json file, 877–878

JavaScript code, 879

list items and pages, 880

page addition, 878–879

reusing pages, 880–883

quantity changes

input elements, 890, 891

range slider addition, 887–890

radio buttons, 849–851

range sliders, 851–852

script elements, 731

select elements, 837–839

custom selection menus, 839–840

data attributes, 839

flip switches, 843–844

placeholder elements, 841

programmatic menus control, 842–843

shopping basket

implementation, 883–886

simple basket, 886

text input and textarea, 829

themes

creation, 730

grid layouts, 802–803

swatches, 798–802

ThemeRoller application, 798

touch events

gesture methods, 742–745

mousedown event, 741

mouseup event, 741

standard, 739

and synthesized mouse events, 739–741

touchend event, 741

touchstart event, 741

virtual mouse events, 745–748

viewport, 735–737

jQuery UI, 469

accordion widgets

active header selection, 538–541

creation, 528–531

events, 544–547

event type, 538

height (see Accordion height)

methods, 542–544

settings, 532

autocomplete widgets

configuration methods, 522–525

default select action, 527–528

input element, 514–515

object array, 516–517

remote data source (see Remote data source)

selected item details, 526–527

settings, 517

source setting, 515

ui-widget class, 516

button, 485

custom image, 484

disabled setting, 481–482

enable and disable methods, 486–487

events, 488

HTML document, 479

icons, 482–484

label setting, 481

map object, 481

option argument with map object, 482

refresh method, 487–488

set, 491–493

settings properties, 480–481

standard buttons, 488–489

toggle button, 489–490

widget removal, 485, 486

installation

development, 472–474

production, 474–475

progress bar

jQuery UI, progress bar (cont.)

animation, 496–498

creation, 494–495

determinate tasks, 493

events, 498–500

indeterminate task, 493

methods, 495–496

slider

animation, 504–505

creation, 501

events, 509–511

methods, 507–509

orientation, 502–504

range slider, 505–506

settings, 501–502

tabs configuration

Ajax errors, 557–558

Ajax requests, 555–557

Ajax spinner message, 559–560

ajaxOptions, 555

cache, 555

collapsible, 555

collapsible tabs, 563, 564

disabled, 555

disabling individual tabs, 560–562

event, 555

event trigger, 562–563

fx, 555

panelTemplate, 555

selected, 555

spinner, 555

tabTemplate, 555

theme

custom download, 471–472

gallery, 470, 471

Sunny theme, 471

ThemeRoller page, 470

UI lightness, 471

jQuery UI datepicker widget

accordion methods, 611

basic datepicker settings

altField, 592

altField setting, 594–595

buttonImage, 592

buttonImageOnly, 592

buttonText, 592

buttonText setting, 596–597

default date, 592–594

disabled, 592

image instead of a button, 597

image rather than a button, 596–597

showOn, 592

showOn setting, 595

controlling appearance

appendText, 605

appendText setting, 610

bleed between months, 607, 608

button bar, 609

closeText, 605

currentText, 605

currentText and closeText settings, 608

displaying weeks, 606–607

duration, 605

gotoCurrent, 606

gotoCurrent setting, 609

HTML5 placeholder attribute, 610, 611

selectOtherMonths, 606

showAnim, 606

showButtonBar setting, 608

showButtonPanel, 606

showOptions, 606

showOtherMonths, 606

showWeek, 606

weekHeader, 606

events, 615–617

getDate and setDate methods, 612–613

inline datepicker, 590–591

localizing date selection, 617–619

managing date selection

applying basic constraints, 598–599

changeMonth, 597

changeYear, 597

constrainInput, 598

constrainInput setting, 598

defaultDate setting, 601

delay window creation, 600

grid of months, 602

maxDate, 598

minDate, 598

minDate and maxDate settings, 599, 600

months and years, direct access, 604–605

multimonth datepicker, 603, 604

numberOfMonths, 598

numberOfMonths setting, 601–602

open-ended date selection range, 601

pop-up datepicker, 603

showCurrentAtPos, 598

showCurrentAtPos setting, 603

showOn setting, 598

stepMonths, 598

user restriction, 599, 600

yearRange, 598

onChangeMonthYear event, 615–616

onClose event, 616

pop-up closing, 616–617

pop-up datepicker, 588–589

show and hide methods, 613–614

jQuery UI dialog widget

beforeClose event, 636

changing sizes and positions, 638–639

close event, 637

create event, 636

dialog box

adding buttons, 628, 629

autoOpen setting, 624

basic appearance, 626, 627

buttons setting, 625

closeOnEscape setting, 625

creation, 622

custom title and no resize drag handle, 626, 627

deferring,appearance, 623, 624

dialog method, 622, 623

div element, 622

draggable and stack settings, 629, 630

draggable setting, 625

height setting, 625

hide setting, 625

maxHeight setting, 625

maxWidth setting, 625

minHeight setting, 625

minWidth setting, 625

modal setting, 625

position setting, 625–627

resizeable setting, 625

show setting, 625

simple dialog box, 622, 623

stack setting, 625

title setting, 625

width setting, 625

drag event, 636

dragStart event, 636

dragStop event, 636

focus event, 636

methods, 634–636

modal dialog

capture input,user, 634

creation, 630, 631

display, 631, 632

displaying a form, 632–633

input elements, 633

open and close methods, 631

open event, 636

preventing dialog,closing, 637–638

resize event, 636

resizeStart event, 636

resizeStop event, 637

jQuery UI tabs events

add, 576

applying tab, 580–581

button presses handling, 581

create, 576

disable, 576

enable, 576

form display, 577–580

form validation

alert box, 584

preventDefault method, 584

select and show events, 584

show method, 583

user prevention, 582–583

load, 576

preventDefault method, 581

remove, 576

select, 576

show, 576

ui object dispatched properties, 576

jQuery UI tabs methods

add and remove

Ajax requests, 570–571

automatic cycling, 572–574

automatically activating new tab, 567–568

empty div element, 570

html method, 569

input and pair of button elements, 566

input element, 567

newly added static tab, 569

panel, 569

panelTemplate setting, 569

programmatically added static tabs, 570

programme, 565–566

remove active tab button, 566

resuming tab cycling, 574–575

static content, 568–570

tabsElem.tabs(), 566

ui object, 568

URL changing, 571–572

val method, 567

tabs("abort"), 565

tabs("add"), 564

tabs("destroy"), 564

tabs("disable"), 564

jQuery UI tabs methods (cont.)

tabs("enable"), 564

tabs("length"), 565

tabs("load"), 565

tabs("option"), 564

tabs("remove"), 564

tabs("rotate"), 565

tabs("select"), 564

tabs("url"), 565

jQuery utility methods, 903, 918

arrays

grep method, 908–909

HTMLElement arrays, 908

inArray method, 909–910

map method, 910–911

merge method, 911–912

unique method, 912–913

contains method, 918

data, 915

parseJSON method, 916, 917

serializeArray method, 915, 916

trim method, 917

general-purpose queues, 904

clearQueue method, 904–906

css method, 906

delay method, 906

dequeue method, 906

queue items, manual process, 906–907

val method, 906

isFunction method, 913–914

proxy function creation, 919

type method, 914–915

working with types, 913

jquery.mobile-1.0.css file, 731

jquery.mobile-1.0.js file, 731

JsFiddle, 9

JSON.stringify method, 425

K

Keyboard event shorthand methods, 246

L

label elements, 119, 120

label property, 517, 527

lang attribute, 47, 48

legend element, 847

List widgets

basic list, 854–855

filtering lists

custom filter function, 867–868

data-filter attribute, 863–865

enabling, 865–866

touch keyboard, 866–867

formatting

data attributes, 857

inset list, 859–860

split lists, 860–863

vanilla list items, 857–859

formatting items

aside addition, 873–874

count bubbles, 870–871

data attributes, 868

list dividers, 869

text emphasis, 872–873

page navigation, 856–857

Live event binding

append methods, 234

automatically registering event handlers method, 234

bind method, 234

die method, 236

DOM traversal, 236–237

live method, 235

loadingMessage property, 783

loadPage method, 785–786

M

Manually invoking event handlers

event object, 239–240

methods, 237

triggerHandler method, 240–241

triggering, 238

map method, 133–134

Metadata elements

script element, 20

style element, 21

Microsoft IIS 7.5, 331

Mobile Bandwidth, 752–753

mobileinit event, 769–770, 783

Mouse event shorthand methods, 244–245

Multi-Browser Viewer, 757–758

myData.weather, 94

N

newContent property, 546

O

oldContent property, 546

Opera Emulator, 838

Opera Mobile Emulator, 756

Order completion, 723–725

orientationchange event, 748–749, 835

orientationevent, 748–749

Outcome-indifferent callbacks, 953–956

P, Q

pagehide event, 790

Pages and navigation,

browser display, 763

control script

activatePage property, 784–785

changePage method (see changePage method)

loadPage method, 785–786

data-role attribute, 762

document

multiple jQuery Mobile pages, 766

navigate between pages, 766–767

page transitions, 768–770

events, 787

initialization, 787

pageload event, 788–789

transition response, 789–790

external pages

Ajax/Page ID issue, 773–776

document2.html file, 771–773

href attribute, 771

HTML document, 771–772

prefetch, 776–778

script and link elements, 773

headers and footers addition, 763–764

CSS fix, 764–765

degree of consistency, 766

meta element, 765

Opera Mobile, 765

viewport, 765

HTML document, 762

parents method, 142

parentsUntil Method, 143

parseJSON method, 462

performLongTasksync function, 948

Per-pixel accuracy, 754

placeholder attribute, 833

placeholder element, 722

pop effect, 769

prepend method, 160–162

preventDefault function, 35, 386

primary icon, 483

printMessages method, 76

printQueue, 270

processServerResponse function, 386, 462

products property, 462

progress-animation.gif, 497

R

Radio buttons, 849–851

Range slider, 505–506, 851–852

Real numbers, 73

Refactored example, 431–434, 699

Ajax, 436–439

completion dialog, 716–720

example document, 699

form data submission browser, 454

form data submission click event, 453–454

form data submission CSS and jQuery statements, 451–452

form data submission disabled attribute, 453

form data submission HTML elements, 452

form data submission img element, 452

form data submission name attribute, 453

form data submission progress, 452

form data submission serialize method, 453

form data submission using Ajax, 448–454

form validation, 442–446

change event, 446

form element, 445

remote validation, 446–448

when and then methods, 445–446

getJSON method, 700, 702

jQuery UI button, 714–716

Node.js script, 434–436

place Order button click, 720–723

product dispaly, 701–702

product information sourcing, 439–442

server response

Ajax request, 461–463

date process, 462–464

enhancement support document, 455–460

new form addition, 460–461

order summary, 455

shopping basket addition, 702–704

Refactored example, shopping basket addition (cont.)

change event, 706

rows addition, 706, 707

rows deletion, 707–708

rows updation, 708

table addition, 705

wrapping accordion, 704–705

starting document, 700, 701

theme style

document header, 711

jQuery UI CSS framework style, 709, 710

rounded corner table, 711–713

styles.css file, 710–711

ui-widget-content class, 709

ui-widget-header, 709

wide framework styles, 710

Remote data source

function as data source, 521–522

generated data, 518

minLength and delay settings, 520–521

Node.js, 518–519

remote server, 519, 520

term, 518

removeTableRow function, 707, 708, 713

replaceWith and replaceAll methods, 178–179

Resizable interaction

alsoResize setting, 693

aspectRatio setting, 693

autoHide setting, 693

div elements, 692

drag handle to change, 693

ghost setting, 693

handles setting, 693

maxHeight setting, 693

maxWidth setting, 693

minHeight setting, 694

minWidth setting, 694

resizable method, 692

settings

drag handles, 696

handles setting, 696–697

resizable element size, 695–696

resizing related elements, 694–695

resize method, 542

Rounded corner classes, 932–933

S

script element, 770

search methods, 542–544

secondary icon, 483

Selectable interaction

cancel setting, 690

enabling multiple element selection, 689

events, 691

mouse selection, 689

settings, 690

ui.selecting class, 688, 689

sendOrder function, 719, 723

showErrors method, 463

showLoadMsg setting, 783

singlepage.html file, 776

slice method, 128

slide effect, 768

Sortable interaction

adding button,sort order, 676

cancel method, 684–685

change and sort events, 687

connectToSortable setting, 679, 680

connectWith setting, 677–679

dropOnEmpty setting, 677

empty space styling, 682–683

events, 686

items setting, 677

placeholder setting, 678, 683

refresh method, 685–686

serialize method, 676–677

sortable class, 675

sortable items, 680–682

sortable method, 674

sorted element order, 675

sorting item,dragging, 675

toArray method, 675

ui object properties, 686

Split lists, 860–863

src attribute, 179, 180

styles.css file, 44

swiperight event, 781

switchClass method, 926–927

T

Tab widget, 550–552

tbody element, 713

thead element, 712, 713

tmpl method, 462

U

UI effects and CSS framework, 921, 927

animating classes, 924–926

animating colors, 922–924

cue classes

error cue, 937, 938

highlight class, 935–937

interaction state classes, 934–935

rounded corner classes, 932–933

show and hide elements, 928–929

standalone effects, 929–930

widget container classes, 930–931

ui-hidden-accessible class, 834

ui-hidden-class, 833

ui-hide-label class, 833, 835

ui.item object, 526

ui-progressbar class, 498

ui-progressbar-value class, 497

ui-widget-header class, 712

unwrap method, 184–185

User agent styles, 53

V

value property, 516, 527

vclick event, 747

vertical-align property, 48

virtual events, 747

Virtual page, 735–737

vmousedown event, 746

vmouseover event, 746

W, X, Y, Z

weather property, 94

Widget container classes, 930–931

Widgets, 477, 513

jQuery UI accordion widgets (see jQuery UI, accordion widgets)

jQuery UI autocomplete widgets (see jQuery UI, autocomplete widgets)

jQuery UI button (see jQuery UI, button)

jQuery UI progress bar (see jQuery UI, progress bar)

jQuery UI slider (see jQuery UI, slider)

Width property, 63, 64

Windows Phone 7 emulator, 758–759, 838

wrap method, 168–169

wrapAll method, 170–171

wrapInner method, 172–173