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

More documents

Recommendations

Info

C H A P T E R 2 ■ ■ ■ Common jQuery Actions and Methods Now that you understand how element selection works, you can start learning the basics of how jQuery simplifies interaction with web pages. In this chapter, you’ll get your hands dirty with the most common and useful aspects of jQuery. This chapter will read more like a reference and may be a bit dry at times, but it’s definitely in your best interest to work through the examples presented within. Having a basic understanding of how these methods work and what they do will prove invaluable as you start building the example project later on in this book. Understanding the Basic Behavior of jQuery Scripts One of the most convenient features of jQuery is the fact that nearly all its methods are chainable, which means methods can be executed one right after the other. This leads to clear, concise code that is easy to follow: $('p') .addClass('new-class') .text("I'm a paragraph!") .appendTo('body'); Chainable methods are possible because each method returns the jQuery object itself after modification. At first, this concept may seem difficult to understand, but as you work through the examples in this chapter, it should become clearer. Understanding jQuery Methods jQuery attempts to make several common programming tasks easier. At a glance, it simplifies JavaScript development by providing the following powerful tools: • DOM element selection using CSS syntax (which you learned in Chapter 1) • Simple traversal and modification of the DOM • Easy syntax for handling browser events (such as clicks and mouse-overs) 25
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 43 and 44: CHAPTER 2 ■ COMMON JQUERY ACTIONS
Page 47 and 48: $("p.foo").next(); This generates t
Page 49 and 50: [ p, p.foo, p ] .parent() CHAPTER 2
Page 51 and 52: .andSelf() CHAPTER 2 ■ COMMON JQU
Page 53 and 54: Figure 2-1. The button to activate
Page 59 and 60: Figure 2-5. The expanded element, i
Page 61 and 62: This produces an identical result w
Page 65 and 66: Figure 2-11. After unwrapping the s
Page 71 and 72: .css() CHAPTER 2 ■ COMMON JQUERY
Page 73 and 74: $("#bar").text("This is new text.")
Page 75 and 76: $("p.foo").data({ "nickname":"Wubby
Page 77 and 78: .height() and .width() CHAPTER 2
Page 79 and 80: .map() and .each() CHAPTER 2 ■ CO
Page 81 and 82: Figure 2-20. Using .each(), the exp
Page 85 and 86: Using the second format, the code w
Page 87 and 88: { }, "duration":6000, "step":functi
Page 91 and 92:
}); "mouseover":function(){ console
Page 93 and 94:
CHAPTER 2 ■ COMMON JQUERY ACTIONS
Page 95 and 96:
Page 97 and 98:
Page 99 and 100:
To send a request with data using P
Page 101:
P A R T 2 ■ ■ ■ Getting Into
Page 104 and 105:
88 CHAPTER 3 ■ OBJECT-ORIENTED PR
Page 106 and 107:
Page 108 and 109:
Page 110 and 111:
Page 112 and 113:
Page 114 and 115:
Page 116 and 117:
100 CHAPTER 3 ■ OBJECT-ORIENTED P
Page 118 and 119:
Page 120 and 121:
Page 122 and 123:
Page 124 and 125:
Page 126 and 127:
Page 128 and 129:
Page 130 and 131:
Page 132 and 133:
Page 134 and 135:
Page 136 and 137:
120 CHAPTER 4 ■ BUILD AN EVENTS C
Page 138 and 139:
Page 140 and 141:
Page 142 and 143:
Page 144 and 145:
Page 146 and 147:
Page 148 and 149:
Page 150 and 151:
Page 152:
Page 155 and 156:
} ?> ■ Note For the sake of brevi
Page 157 and 158:
* The event ID * * @var int */ publ
Page 159 and 160:
} * Create a new array, then organi
Page 161 and 162:
} ?> } /* * Return the markup for o
Page 163 and 164:
9. After the loop, run another loop
Page 165 and 166:
CHAPTER 4 ■ BUILD AN EVENTS CALEN
Page 167 and 168:
Figure 4-5. The markup as generated
Page 169 and 170:
} } if ( isset($events[$c]) ) { for
Page 171 and 172:
Page 173 and 174:
} background-color: #BCD; .weekdays
Page 175 and 176:
Page 177 and 178:
Page 179 and 180:
private $_daysInMonth; private $_st
Page 181 and 182:
* * Include necessary files */ incl
Page 183 and 184:
C H A P T E R 5 ■ ■ ■ Add Con
Page 185 and 186:
} /* * Build the markup */ return
Page 187 and 188:
} ?> CHAPTER 5 ■ ADD CONTROLS TO
Page 189 and 190:
} legend { font-size: 24px; font-we
Page 191 and 192:
CHAPTER 5 ■ ADD CONTROLS TO CREAT
Page 193 and 194:
private $_m; private $_y; private $
Page 195 and 196:
Page 197 and 198:
Page 199 and 200:
Page 201 and 202:
Figure 5-4. The Admin button appear
Page 203 and 204:
} ?> CHAPTER 5 ■ ADD CONTROLS TO
Page 205 and 206:
$css_files = array("style.css", "ad
Page 207 and 208:
Generating a Delete Button CHAPTER
Page 209 and 210:
public function __construct($dbo=NU
Page 211 and 212:
value="Nope! Just Kidding!" />
Page 213 and 214:
include_once 'assets/common/header.
Page 215 and 216:
C H A P T E R 6 ■ ■ ■ Passwor
Page 217 and 218:
Please Log In Username Password
Page 219 and 220:
} ?> } /* * If an int was passed, s
Page 221 and 222:
} try { WHERE `user_name` = :uname
Page 223 and 224:
} else { return "Your username or p
Page 225 and 226:
Creating this function is relativel
Page 227 and 228:
$obj = new Admin($dbo); // Load a h
Page 229 and 230:
( 'testuser', 'a1645e41f29c45c46539
Page 231 and 232:
} } else { // Redirect to the main
Page 233 and 234:
CHAPTER 6 ■ PASSWORD PROTECTION S
Page 235 and 236:
*/ return
Page 237 and 238:
Modifying the App to Handle the Use
Page 239 and 240:
Figure 6-8. Clicking the Log Out bu
Page 241 and 242:
ADMIN_OPTIONS; } else { return
Page 243 and 244:
private $_daysInMonth; private $_st
Page 245 and 246:
if ( !isset($_SESSION['user']) ) {
Page 247:
include_once 'assets/common/footer.
Page 251 and 252:
C H A P T E R 7 ■ ■ ■ Enhanci
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?