JQuery: Novice to Ninja- P29

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:11

0
72
lượt xem
7
download

JQuery: Novice to Ninja- P29

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

JQuery: Novice to Ninja- P29:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways.

Chủ đề:
Lưu

Nội dung Text: JQuery: Novice to Ninja- P29

  1. 397 data grids, 319–329 dot (.) notation, 130 DataTables plugin, 328 downloading editing rows, 324–328 jQuery, 8–11 pagination, 319–324 jQuery UI library, 69 data interchange, JSON and XML, 223 drag and drop, 264–271, 293 data parameter (bind method), 360 draggable interaction helper, 266 data sources, templating, 188 drop-down menus, 144–148 DataTables plugin, 328 droppable elements, 267 dataType Ajax setting, 375 duplicate tags, finding, 292 date picker, 257–260 dates, validation, 259 E debugging (see troubleshooting) Licensed to JamesCarlson@aol.com e parameter, 133 decorating, 25–31 e.stopPropagation(), 138 classes, 29 each function, 314 CSS properties, 25–28 easing, animation, 54–58 decrement (--)operator, 115 editing rows, 324–328 defaults, event actions, 140 effects, 31–45 delay action, 63 adding elements, 37–40 delegation, event delegation, 309–311 animation, 42 deleting (see removing) callback functions, 44 dequeuing animations, 363 hiding and revealing elements, 32–36 development verses minified jQuery highlighting when hovering, 45 downloads, 11 modifying content, 41 dialogs, 277–284 progressing enhancement, 36 die events, 198 removing elements, 40 disableSelection action, 273 spoiler revealer, 47 disabling mousedown and mouseup element types, in selectors, 22 events on iPhones, 358 elements display function, 225 adding, 37–40 DIY event objects, 380 DOM, 13 documents, scrolling, 75 droppable elements, 267 dollar sign ($) inserting, 40 JavaScript variable name, 12 properties, 26 uniqueness of, 362 removing, 40 DOM (Document Object Model) resizable, 82–89 about, 13, 39 selecting, 24 Firebug, 29 swapping in select box lists, 301
  2. 398 toggling, 34 special events, 358–361 empty command, 246 submit events, 235 enableSelection action, 273 unbinding and namespacing, 354–357 endless scrolling, Ajax image gallery, 215 expandable trees, 306–309 :eq filter, 125 expandable/collapsible menus, 136–141 :eq selector attribute, 106 expanding menus on hover, 143 equality (==) operator, 382 exponential backoff, 222 equality operators, JavaScript, 382 extending jQuery, 343–349 error handling, Ajax, 219 $. prefixed functions, 345 error local event, 206 methods, 343 :even filter, 24 overwriting existing functionality, 347 event handlers selectors, 348 Licensed to JamesCarlson@aol.com hiding and revealing elements, 32 extensibility, plugins, 5 parameters, 133 events, 349–361, 379–380 F Ajax, 206 fading, animation beforeClose events, 283 (see also cross-fading slideshows) beforeSend local events, 207, 212 falsiness, JavaScript, 383–385 binding iPhones, 357 fetching data with $.getJSON, 200 custom, 351–354 filter action, 304 default actions, 140 filter command, 151 delegation, 309–311 filters die events, 198 :checked and :selected filters, 233 DIY event objects, 380 :eq filter, 125 droppable elements, 268 selecting, 23 keypress events, 133, 240 Firebug, 29 load events, 95 fixed table headers, 312–316 methods, 380 flags, $.ajax method, 373 mousedown events, 358 floating navigation, 73 mouseover events, 147 fold, defined, 348 mouseup events, 358 forms, 232–257 onChange events, 103 autocomplete, 248 onSelect events, 103 checkboxes, 242 propagation, 139 hints, 240 properties, 349, 379 inline editing, 244–248 resize events, 79 maximum length indicator, 239 scroll events, 72 sending data, 227–229
  3. 399 slide-down login forms, 162 G star rating control, 250–257 galleries, themes validation, 232–239 (see also slideshows) functions GET requests, 205 (see also actions; callback functions; global Ajax option, 374 commands; methods; utilities) global events, Ajax, 206 $(document).ready(), 18 global progress indicators, Ajax image $.ajax method, 376 gallery, 214 $.browser function, 191 Google CDN, 9 $.browser.version function, 191 Growl-style notifications, 284–287 $.each function, 202, 210 $.extend function, 338 Licensed to JamesCarlson@aol.com H $.getJSON function, 200, 226 handlers $.getScript function, 204 complete callback handler, 340 about, 3 event handlers, 32 addClass function, 30 setup handler, 340 animate function, 52 hash symbol (#) id name, 21 anonymous functions, 44 headers contents() function, 248 fixed table headers, 312–316 display function, 225 repeating table headers, 316 each function, 314 hidden menus, 162 hover function, 256 hide action, 32 insertAfter function, 38 hiding elements, 32–36 jQuery alias, 11 highlighting, when hovering, 45 live function, 198 Hijax, 194 load function, 202 hints, forms, 240 nested, 324 hover function, 256 removeClass function, 31 Hover Intent plugin, 147 replaceWith() function, 248 :hover pseudo selector, 144 selector-based functions, 314 hovering setTimeout function, 212, 221 expanding menus on, 143 sort function, 300 highlighting when, 45 supports function, 3 hrefNormalized property ($.support template function, 190 method), 377 trigger function, 247 HTML val function, 233 (see also DOM)
  4. 400 loading, 18, 194 Internet Explorer 6 (see IE6) picking with selectors, 196 inverting selections in select box lists, html action, 41 303 htmlSerialize property ($.support meth­ iPhones, binding, 357 od), 378 iPhoto-like slideshow widget, 126–134 hyperlinks, Hijax, 194 is action, 35 I J icons, IE6, 369 JavaScript, 381–385 IE6 (Internet Explorer 6) call method, 341 CSS, 179 coding practices, 182–192 Licensed to JamesCarlson@aol.com select boxes issue, 283 equality operators, 382 ThemeRoller, PNGs and icons, 369 indexOf method, 305 if statement, 35 JavaScript objects as jQuery objects, ifModified Ajax option, 374 366 images and jQuery, 8 (see also slideshows) scrollHeight property, 217 Ajax image gallery, 207–223 timer methods, 107 cropping with Jcrop, 101–104 truthiness and falsiness, 383–385 image tagging, 223–229 type coercion, 381 importance of to web browsing, 91 variables, 89 preloading, 270 JavaScript Object Notation (JSON), data including jQuery, 8–10 interchange, 200, 223 increment (++) operator, 115 JavaScript objects, quotes ('), 28 index method, 298 JavaScript timers, 106–115 indexOf method (JavaScript), 305 about, 106 indicators, open/closed indicators, 141 cross-fading, 111–115 inline editing, forms, 244–248 fading slideshows, 109–111 inline scripting, need for, 5 setting up, 107 InnerFade plugin, 116 stopping, 109 insertAfter function, 38 Jcrop plugin, 101–104 insertBefore method, 39 jQuery function inserting elements, 40 and jQuery alias, 11, 19 interactivity, Ajax image gallery, 207– passing strings to, 21 223 jQuery stack, plugins, 388 jQuery UI (jQuery User Interface), 3
  5. 401 jQuery UI library load events, 95 accordion menus, 154 load function, 202 animating, 69 loading plugins, 56 content via Ajax, 159 tabs, 158–162 errors in operation, 221 jQuery.fn.extend() method, 343 external scripts, 204 jScrollPane plugin, 78 HTML, 18 JSMin, 390 jQuery, 8–10 JSON (JavaScript Object Notation), data remote HTML, 194 interchange, 200, 223 using Ajax, 198 jsonp Ajax setting, 375 local events Ajax, 206 Licensed to JamesCarlson@aol.com K beforeSend local events, 212 keypress events, 133, 240 logical operators, 177 keywords, quotes ('), 28 login forms, slide-down login forms, 162 L M latency, sever latency, 214 map objects, 183 layout switcher, CSS, 80 mashups, fetching data, 200 leadingWhitespace property ($.support Math.random method (ScrollTo plugin), method), 378 125 length property, 22 maximum length indicator, forms, 239 libraries, $ (dollar sign) function name menus, 136–156 (see also jQuery UI library) accordion menus, 148–156 lightboxes, 92–100 drop-down menus, 144–148 ColorBox plugin, 98 expandable/collapsible menus, 136– custom, 92–96 141 modal dialogs, 277 expanding on hover, 143 troubleshooting with console.log, 96 hidden menus, 162 linear easing, 54 open/closed indicators, 141 lists, 292–305 methods select box lists, 301–305 $.ajax method, 202, 373–376 selectables, 292–298 $.datepicker.setDefaults method, 260 sorting, 298 $.fn.extend() method, 343 live action, 280 $.post method, 228 live function, 198 $.support method, 376 $.trim method, 347
  6. 402 add method, 151 mousedown events, 358 ajaxStart method, 215 mouseover events, 147 bind, 247 mouseover method, 355 bind method, 360 mouseup events, 358 call method (JavaScript), 341 click method, 355 N clone method, 190 namespacing create method, 254 about, 12 events, 380 coding practices, 184 extending jQuery, 343 events, 354–357 index method, 298 naming event parameters, 133 indexOf method (JavaScript), 305 Licensed to JamesCarlson@aol.com navigation insertBefore method, 39 animated navigation, 64–69 jQuery.fn.extend() method, 343 controls in plugins, 321 Math.random method (ScrollTo plu­ floating navigation, 73 gin), 125 submenu system, 136 mouseover method, 355 nested functions, 324 nextAll method, 255 nextAll method, 255 nextUntil method, 255 nextUntil method, 255 prevUntil method, 255 Nightlies, 10 serialize method, 227 noCloneEvent property ($.support setTimeout method (JavaScript), 108 method), 378 stopImmediatePropagation method, :not selector, 151 380 notifications, 284–290 stopPropagation method, 140, 380 1-up notifications, 287–290 tab control, 161 Growl-style notifications, 284–287 tellSelect method (Jcrop plugin), 104 nth-child selector, 317 timer methods (JavaScript), 107 toggleClass method, 309 O minification, plugins, 389 object literals, 27 minified verses development jQuery objects downloads, 11 DIY event objects, 380 minSize property (Jcrop plugin), 103 JavaScript objects and quotes ('), 28 modal dialogs, 277–280 JavaScript objects as jQuery objects, modulus 366 conditional assignment, 254 map objects, 183 cross-fading, 114
  7. 403 onChange event, 103 pausing a jQuery chain, 63 one action, 336 pausing animation, 63 onSelect events, 103 percent symbol (%) modulus, 114 opacity property ($.support method), 378 performance open/closed indicators, 141 checkboxes, 244 operators click event handler, 310 and (&&) operator, 177 jQuery, 7 arithmetic (+) operator, 158 period (.), namespaces, 356 equality operators in JavaScript, 382 plugins, 387–391 increment (++) and decrement (--) op­ about, 5 erators, 115, 222 Autocomplete plugin, 249 logical operators, 177 bgiframe plugin, 283 Licensed to JamesCarlson@aol.com ternary operator, 111 Color Animations plugin, 53 options, adding to plugins, 337 ColorBox plugin, 98 creating, 333–342 P Cycle plugin, 117 Packer, 390 DataTables plugin, 328 pagination, data grids, 319–324 easing plugin, 56 pane splitter, 85–89 fading with, 115–119 panels, 162–168 Hover Intent plugin, 147 slide-down login forms, 162 InnerFade plugin, 116 sliding overlays, 164–168 Jcrop plugin, 101–104 panes, 162–168 jQuery stack, 388 animating content panes, 58 jQuery UI library, 56 slide-down login forms, 162 jScrollPane plugin, 78 sliding overlays, 164–168 minification, 389 parameters namespacing, 357 about, 12 navigation controls, 321 data parameter (bind method), 360 Resizable plugin, 82 e parameter, 133 ScrollTo plugin, 76, 123–125 params parameter, 342 selectors and context, 387 params parameter, 342 ThickBox plugin, 98 parent actions, 121 Validation plugin, 236–239 parent container selectors, 22 warning about, 115 parent elements, defined, 13 PNGs, IE6, 369 passing callbacks, 290 POST requests, 205 password Ajax setting, 375 preloading images, 270
  8. 404 prevUntil method, 255 replaceWith() function, 248 processData Ajax option, 374 requests progress bar, 274 Ajax, 215 progress indicators, 215 GET and POST requests, 205 propagation, events, 139 resizing, 79–89 properties elements, 82–89 $.active property (Ajax), 215 resize events, 79 CSS properties, 25–28 revealing elements, 32–36 elements, 26 revert option (draggable interaction events, 349, 379 helper), 267 Jcrop plugin, 103 rows length property, 22 editing, 324–328 Licensed to JamesCarlson@aol.com scrollHeight property (JavaScript), 217 header rows, 312, 316 selector and context properties, 387 selecting, 20, 46, 329–331 z-index property (CSS), 112 rules option (Validation Plugin), 237 prototypes, plugins, 334 puff effect, 268–271 S pushStack action, 388 scope, coding practices, 186 scriptCharset Ajax setting, 375 Q scriptEval property ($.support method), queuing animations, 61, 363 378 quick element construction, 95 scripts quotes ('), 28, 282 about, 11 loading external scripts, 204 R separating from page presentation, 5 random numbers, Math.random method scrollHeight property (JavaScript), 217 (ScrollTo plugin), 125 scrolling, 72–79 randomizing images, 211 Ajax image gallery, 215 reading CSS properties, 25 custom scroll bars, 77 remote HTML, loading, 194 documents, 75 remove action, 40 floating navigation, 73 remove command, 246 scroll events, 72 removeClass function, 31 slideshows, 119–126 removing ScrollTo plugin, 76, 123–125 classes, 30 searching elements, 40 client-side Twitter searcher, 201 select box lists, 304
  9. 405 select box lists, 301–305 setSelect property (Jcrop plugin), 103 inverting selections, 303 setTimeout function, 212, 221 searching, 304 setTimeout method (JavaScript), 107, 108 swapping list elements, 301 setup handler, 340 selectables, 292–298 sever latency, simulating, 214 $.map and $.inArray, 296 shift-selecting checkboxes, 330 about, 292–298 siblings elements, defined, 14 accessing data, 297 simulating sever latency, 214 selecting, 19–25 size of jQuery, 7 about, 19–22 slide-down login forms, 162 checkboxes, 330 sliders, 260–264 columns of checkboxes, 329 slideshows, 91–134 Licensed to JamesCarlson@aol.com elements, 24 cropping images, 101–104 filters, 23 cross-fading, 104–119 narrowing down, 22 iPhoto-like widget, 126–134 rows, 20, 46, 329–331 lightboxes, 92–100 testing, 22 scrolling, 119–126 selections, inverting in select box lists, sliding overlays: panels and panes, 164– 303 168 selectors sortable behavior, 271 :hover pseudo selector, 144 sorting lists, 298 :not selector, 151 special events, 358–361 about, 12 speed (see performance) attribute selectors, 75 spinners, Ajax image gallery, 213 child selectors, 138 splitters, 85 CSS3, 3 spoiler revealer, effects, 47 extending jQuery, 348 stack, jQuery stack and plugins, 388 nth-child selector, 317 star rating control, forms, 250–257 picking HTML with, 196 statements plugins and context, 387 (see also actions; callback functions; semi-transparent controls, accessibility, commands; functions; methods; 167 utilities) sending form data, 227–229 if statement, 35 serialize method, 227 stopImmediatePropagation method, 380 server-side form validation versus client- stopping JavaScript timers, 109 side form validation, 232 stopPropagation method, 140, 380 setInterval method (JavaScript), 107 strict inequality (!==) operator, 383
  10. 406 strict quality (===) operator, 383 testing selections, 22 strings, passing to jQuery function, 21 text action, 41, 305 style property ($.support method), 378 textarea, resizable, 83 style, calculated style, 26 ThemeRoller submenu system, vertical site navigation, about, 367–372 136 creating custom themes, 368 submit events, 235 making components themeable, 369 submitBubbles property ($.support ThickBox plugin, 98 method), 378 this, hiding and revealing elements, 33 Subversion, obtaining jQuery, 10 thumbnails, scroller, 120–123 success callback, 209 timeout Ajax setting, 375 success local events, 207 timeout setting (Cycle plugin), 119 Licensed to JamesCarlson@aol.com Suckerfish Drop-down technique, 144 timeouts, handling, 220 Suckerfish menus, 145 timers (see JavaScript timers) supports function, 3 title attribute (links), 169 swapping elements in select box lists, toggleClass method, 309 301 toggling swing easing, 54 about, 35 animation, 43 T elements, 34 table paging widget example, 320 tooltips, 168–179 tables, 312–331 translucent sliding overlays, 164 data grids, 319–329 trash, dragging stuff to their doom, 264 fixed table headers, 312–316 traversing, defined, 25 highlighting, 45 trees, 305–311 repeating headers, 316 event delegation, 309–311 selecting rows, 20, 46, 329–331 expandable trees, 306–309 tabs, 156–162 trigger function, 247 about, 156–158 troubleshooting lightboxes with con- jQuery UI, 158–162 sole.log, 96 tags truthiness, JavaScript, 383–385 finding duplicates, 292 Twitter, client-side Twitter searcher, 201 image tagging, 223–229 type Ajax setting, 375 tbody property ($.support method), 379 type coercion, JavaScript, 381 tellSelect method (Jcrop plugin), 104 templating, client-side, 188–191 ternary operator, 111
  11. 407 U UI (user interface) (see jQuery UI) unbinding events, 354–357 uncompressed versus compressed jQuery downloads, 11 url Ajax setting, 375 username Ajax setting, 375 utilities, 260, 341 V val function, 233 Licensed to JamesCarlson@aol.com validation dates, 259 forms, 232–239 variables, JavaScript, 89 W Web 2.0, Ajax, 181 X XML data interchange, 223 image tagging, 223–226 Z z-index property (CSS), 112
Đồng bộ tài khoản