Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

More documents

Recommendations

Info

C H A P T E R 7 ■ ■ ■ Enhancing the User Interface with jQuery The application as it stands now is fully functional. Events can be viewed, and users with administrative clearance can log in to create, edit, or delete events. The next step is to add a layer of polish to the app that creates that finished look-and-feel, which you’ll accomplish using a technique called progressive enhancement to add AJAX functionality to the app. Adding Progressive Enhancements with jQuery Progressive enhancement is a term originally coined by Steven Champeon 1 in 2003 to describe a webdevelopment technique in which applications are designed to be accessible to any Internet connection and browser using semantic HTML and other technologies that are applied in layers (such as CSS files and JavaScript markup). For an application to follow the principles of progressive enhancement, it must adhere to the following guidelines: • Basic content is accessible to all browsers using the simplest, most semantic HTML markup possible. • All of the basic functionality of the app works in all browsers. • The user’s preferences are respected; this means that the web app doesn’t override browser settings (such as window size). • Externally linked CSS handles the styling and presentation of the document. • Externally linked JavaScript enhances the user experience, but it remains unobtrusive, or non-essential to the application’s operation. Your application already meets the first four guidelines (it’s not pretty, but the application will work with styles disabled). So as long as your JavaScript doesn’t create any new functionality that can’t be accessed with JavaScript disabled, you will have successfully created a progressively enhanced web application. 1 http://www.hesketh.com/about-us/leadership-team/ 235
Page 1:
THE EXPERT’S VOICE ® IN OPEN SOU
Page 4 and 5:
ii Pro PHP and jQuery Copyright ©
Page 6 and 7:
iv Contents at a Glance ■About th
Page 8 and 9:
vi ■ CONTENTS Understanding jQuer
Page 10 and 11:
viii ■ CONTENTS Summary .........
Page 12 and 13:
x ■ CONTENTS ■Chapter 9: Perfor
Page 14 and 15:
xii About the Author ■ Jason Leng
Page 16 and 17:
xiv Acknowledgments I feel like I s
Page 19 and 20:
C H A P T E R 1 ■ ■ ■ Introdu
Page 21 and 22:
CHAPTER 1 ■ INTRODUCING JQUERY Th
Page 23 and 24:
SETTING UP A LOCAL TESTING ENVIRONM
Page 25 and 26:
google.load("jquery", "1.4.2");
Page 27 and 28:
Basic Selectors CHAPTER 1 ■ INTRO
Page 29 and 30:
Only one paragraph in our document
Page 31 and 32:
$(".foo+p"); CHAPTER 1 ■ INTRODUC
Page 33 and 34:
$("p:odd"); [ p.foo, p#bar ] Select
Page 35 and 36:
$("p:parent"); [ p, p.foo, p, p#bar
Page 37 and 38:
which returns the following in the
Page 39:
Selecting Only Enabled or Disabled
Page 42 and 43:
26 CHAPTER 2 ■ COMMON JQUERY ACTI
Page 44 and 45:
Page 46 and 47:
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Page 54 and 55:
Page 56 and 57:
Page 58 and 59:
Page 60 and 61:
Page 62 and 63:
Page 64 and 65:
Page 66 and 67:
Page 68 and 69:
Page 70 and 71:
Page 72 and 73:
Page 74 and 75:
Page 76 and 77:
Page 78 and 79:
Page 80 and 81:
Page 82 and 83:
Page 84 and 85:
Page 86 and 87:
Page 88 and 89:
Page 90 and 91:
Page 92 and 93:
Page 94 and 95:
Page 96 and 97:
Page 98 and 99:
Page 100 and 101:
Page 103 and 104:
C H A P T E R 3 ■ ■ ■ Object-
Page 105 and 106:
$obj = new MyClass; var_dump($obj);
Page 107 and 108:
CHAPTER 3 ■ OBJECT-ORIENTED PROGR
Page 109 and 110:
Page 111 and 112:
$obj = new MyClass; // Get the valu
Page 113 and 114:
} public function setProperty($newv
Page 115 and 116:
Page 117 and 118:
} } return $this->getProperty(); pu
Page 119 and 120:
Create a new object $newobj = new M
Page 121 and 122:
} } // Create a new object $newobj
Page 123 and 124:
Private Properties and Methods CHAP
Page 125 and 126:
} public function __construct() { e
Page 127 and 128:
*/ CHAPTER 3 ■ OBJECT-ORIENTED PR
Page 129 and 130:
Ease of Implementation CHAPTER 3
Page 131 and 132:
Page 133 and 134:
Page 135 and 136:
C H A P T E R 4 ■ ■ ■ Build a
Page 137 and 138:
CHAPTER 4 ■ BUILD AN EVENTS CALEN
Page 139 and 140:
# # DocumentRoot: The directory out
Page 141 and 142:
CHAPTER 4 ■ BUILD AN EVENTS CALEN
Page 143 and 144:
} ?> } } } CHAPTER 4 ■ BUILD AN E
Page 145 and 146:
■ Note For the sake of brevity, D
Page 147 and 148:
} ?> CHAPTER 4 ■ BUILD AN EVENTS
Page 149 and 150:
} ?> } include_once $filename; CHAP
Page 151 and 152:
private $_startDay; public function
Page 154 and 155:
138 CHAPTER 4 ■ BUILD AN EVENTS C
Page 156 and 157:
Page 158 and 159:
Page 160 and 161:
Page 162 and 163:
Page 164 and 165:
Page 166 and 167:
Page 168 and 169:
Page 170 and 171:
Page 172 and 173:
Page 174 and 175:
Page 176 and 177:
Page 178 and 179:
Page 180 and 181:
Page 182 and 183:
Page 184 and 185:
168 CHAPTER 5 ■ ADD CONTROLS TO C
Page 186 and 187:
Page 188 and 189:
Page 190 and 191:
Page 192 and 193:
Page 194 and 195:
Page 196 and 197:
Page 198 and 199:
Page 200 and 201: 184 CHAPTER 5 ■ ADD CONTROLS TO C
Page 216 and 217: 200 CHAPTER 6 ■ PASSWORD PROTECTI
Page 249: P A R T 3 ■ ■ ■ Combining jQu
Page 253 and 254: Create a JavaScript Initialization
Page 255 and 256: Including the Stylesheet in the Ind
Page 257 and 258: }); }); event.preventDefault(); //
Page 259 and 260: }); }); CHAPTER 7 ■ ENHANCING THE
Page 261 and 262: Calling the Utility Function from t
Page 263 and 264: var obj = { "name" : "Jason Lengsto
Page 265 and 266: * * Enable sessions */ session_star
Page 267 and 268: Pulls up events in a modal window $
Page 269 and 270: Add a Close Button CHAPTER 7 ■ EN
Page 271 and 272: Fade Out the Modal Window CHAPTER 7
Page 273 and 274: Figure 7-4. The modal window mid-fa
Page 275 and 276: }; } { } event.preventDefault(); //
Page 277 and 278: CHAPTER 7 ■ ENHANCING THE USER IN
Page 279 and 280: C H A P T E R 8 ■ ■ ■ Editing
Page 281 and 282: $("li>a").live("click", function(ev
Page 283 and 284: } else { $id = NULL; } echo $obj->$
Page 285 and 286: } "boxin" : function(data, modal) {
Page 287 and 288: CHAPTER 8 ■ EDITING THE CALENDAR
Page 289 and 290: } { $id = (int) $_POST['event_id'];
Page 291 and 292: }; }, // Deserializes the query str
Page 293 and 294: }; }, // Code to add the event goes
Page 295 and 296: }; "deserialize" : function(str){..
Page 297 and 298: }; "deserialize" : function(str){..
Page 299 and 300: }; }, // Since the date object is c
Page 301 and 302:
Edits events without reloading $(".
Page 303 and 304:
Figure 8-3. Here the event cannot b
Page 305 and 306:
} * Returns the ID of the event */
Page 307 and 308:
}); var action = "edit_event"; // L
Page 309 and 310:
}); id = $(event.target) .siblings(
Page 311 and 312:
}); // Prevents the form from submi
Page 313 and 314:
Figure 8-6. After you edit an event
Page 315 and 316:
foreach ( $C as $name => $val ) { d
Page 317 and 318:
CHAPTER 8 ■ EDITING THE CALENDAR
Page 319 and 320:
); ) 'object' => 'Calendar', 'metho
Page 321 and 322:
}; "removeevent" : function() { //
Page 323:
Figure 8-9. After deleting "Test Ev
Page 327 and 328:
C H A P T E R 9 ■ ■ ■ Perform
Page 329 and 330:
* * Start by simply outputting the
Page 331 and 332:
egexes, they will become a powerful
Page 333 and 334:
TEST_DATA; /* * Use str_ireplace()
Page 335 and 336:
After you get the hang of regular e
Page 337 and 338:
em { background-color: #FF0; border
Page 339 and 340:
Using Character Class Shorthand CHA
Page 341 and 342:
CHAPTER 9 ■ PERFORMING FORM VALID
Page 343 and 344:
Figure 9-12. Adding an optional che
Page 345 and 346:
Regular Expression Demo em { ba
Page 347 and 348:
Figure 9-17. Expanding the validate
Page 349 and 350:
CHAPTER 9 ■ PERFORMING FORM VALID
Page 351 and 352:
public function displayForm() {...}
Page 353 and 354:
} ?> CHAPTER 9 ■ PERFORMING FORM
Page 355 and 356:
Including the New File in the Foote
Page 357 and 358:
}); // Fades out the modal window f
Page 359:
Figure 9-25. The error message in a
Page 362 and 363:
346 CHAPTER 10 ■ EXTENDING JQUERY
Page 364 and 365:
Page 366 and 367:
Page 368 and 369:
Page 370 and 371:
Page 372 and 373:
Page 374 and 375:
Page 376 and 377:
Page 378 and 379:
362 ■ INDEX ■ A active class, 2
Page 380 and 381:
364 ■ INDEX class.calendar.inc.ph
Page 382 and 383:
366 ■ INDEX .not( ) method, 27 .p
Page 384 and 385:
368 ■ INDEX array of event object
Page 386 and 387:
370 ■ INDEX .hide( ) method, 65-6
Page 388 and 389:
372 ■ INDEX login credentials cla
Page 390 and 391:
374 ■ INDEX adding effects to, 25
Page 392 and 393:
376 ■ INDEX setting in events cal
Page 394:
378 ■ INDEX extracting query stri
show all

Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

Create successful ePaper yourself

Delete template?

Save as template?