Download as KEY, PPTX
Intro to jQuery for Drupal
- 1.
- 2.
- 3. What is jQuery? • http://jquery.com
- 4. What is jQuery? • http://jquery.com • “write less, do more”
- 5. Why is itso fun?
- 6. Why is itso fun? • Removes cross-browser pain
- 7. Why is itso fun? • Removes cross-browser pain • Leverages your existing CSS knowledge
- 8. Why is itso fun? • Removes cross-browser pain • Leverages your existing CSS knowledge • Animates elements on the page
- 9. Why is itso fun? • Removes cross-browser pain • Leverages your existing CSS knowledge • Animates elements on the page • Compact code
- 10.
- 11. What’s it bestat? • Adding/Removing elements to/from the page
- 12. What’s it bestat? • Adding/Removing elements to/from the page • Hiding/Showing elements
- 13. What’s it bestat? • Adding/Removing elements to/from the page • Hiding/Showing elements • Animating CSS transitions
- 14. What’s it bestat? • Adding/Removing elements to/from the page • Hiding/Showing elements • Animating CSS transitions • Responding to clicks, hovers, focus events
- 15. What’s it bestat? • Adding/Removing elements to/from the page • Hiding/Showing elements • Animating CSS transitions • Responding to clicks, hovers, focus events • Selecting from and traversing the DOM
- 16. Core Drupal jQuery
- 17. Core Drupal jQuery • Drupal adopted jQuery into core starting with Drupal 5
- 18. Core Drupal jQuery • Drupal adopted jQuery into core starting with Drupal 5 • In /misc: drag-and-drop ordering, expandable textareas, collapsible fieldsets, autocomplete, persistent table headers etc.
- 19.
- 20.
- 21. Syntax http://docs.jquery.com/Types#jQuery • $(‘#page’).hide( ); •$(‘a’).addClass(‘test’);
- 22. Syntax http://docs.jquery.com/Types#jQuery • $(‘#page’).hide( ); •$(‘a’).addClass(‘test’); • $(‘#page p’).click(function() { $(this).hide(‘slow’); });
- 23. Adding jQuery to a theme
- 24. Adding jQuery to a theme • drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’);
- 25. Adding jQuery to a theme • drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’); • Add this to the top of template.php or in a specific theme function
- 26.
- 27. Sending settings to jQuery
- 28. Sending settings to jQuery • Add setting from PHP
- 29. Sending settings to jQuery • Add setting from PHP
- 30. Sending settings to jQuery • Add setting from PHP • Access Drupal.settings.myModule from within jQuery
- 31. jQuery Release Cycle
- 32. jQuery Release Cycle • Drupal 7 has jQuery 1.4.4
- 33. jQuery Release Cycle • Drupal 7 has jQuery 1.4.4 • Latest jQuery is 1.6.2
- 34. jQuery Release Cycle • Drupal 7 has jQuery 1.4.4 • Latest jQuery is 1.6.2 • jQuery Update
- 35.
- 36. Overriding JS • OverrideJS functions by redeclaring afterwards
- 37. Overriding JS • OverrideJS functions by redeclaring afterwards • ‘theme’ JS loads after ‘core’ and ‘module’ JS
- 38.
- 39. Progressive Enhancement • Build the page without relying on jQuery
- 40. Progressive Enhancement • Build the page without relying on jQuery • Fancify for additional coolness
- 41. Progressive Enhancement • Build the page without relying on jQuery • Fancify for additional coolness • Never use js to make changes that should be done in markup, styles, or PHP
- 42.
- 43.
- 44. Common Use Cases
- 45. Common Use Cases • Show more content on a page with hide/show, tabs, accordions, rotators, modals
- 46. Common Use Cases • Show more content on a page with hide/show, tabs, accordions, rotators, modals • Search bar with disappearing default value
- 47. Common Use Cases • Show more content on a page with hide/show, tabs, accordions, rotators, modals • Search bar with disappearing default value • Slicker functionality with AJAX and AHAH
- 48.
- 49.
- 50. Popular Modules • Colorbox •Quick Tabs
- 51. Popular Modules • Colorbox •Quick Tabs • Views Slideshow
- 52. Popular Modules • Colorbox •Quick Tabs • Views Slideshow • Beauty Tips
- 53. Popular Modules • Colorbox •Quick Tabs • Views Slideshow • Beauty Tips • Hierarchical Select
- 54. Popular Modules • Colorbox • Views UI • Quick Tabs • Views Slideshow • Beauty Tips • Hierarchical Select
- 55. Popular Modules • Colorbox • Views UI • Quick Tabs • FullCalendar • Views Slideshow • Beauty Tips • Hierarchical Select
- 56. Popular Modules • Colorbox • Views UI • Quick Tabs • FullCalendar • Views Slideshow • Views Accordion • Beauty Tips • Hierarchical Select
- 57. Popular Modules • Colorbox • Views UI • Quick Tabs • FullCalendar • Views Slideshow • Views Accordion • Beauty Tips • Hierarchical • Feedback Select
- 58.
- 59.
- 60. jQuery UI • Usedto be jquery_ui module
- 61. jQuery UI • Usedto be jquery_ui module • In Drupal 7 core!
- 62.
- 63. Resources & Tools •http://api.jquery.com
- 64. Resources & Tools •http://api.jquery.com • Firebug for Firefox
- 65. Resources & Tools •http://api.jquery.com • Firebug for Firefox • http://drupal.org/node/171213
- 66.
- 67. Demo • Let’s dothis.
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 As a simple example lets look at how you'd go about finding all the https links on a page and adding some additional text marking them as secure, turning <a href="https://example.com">Example</a> into <a href="https://example.com">Example (Secure!)</a>. This should make the importance of only running the code once apparent, if our code ran twice the link would end up reading "Example (Secure!) (Secure!)".\n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n