Intro to jQuery for Drupal
- 3. What is jQuery? • http://jquery.com
- 4. What is jQuery? • http://jquery.com • “write less, do more”
- 5. Why is it so fun?
- 6. Why is it so fun? • Removes cross-browser pain
- 7. Why is it so fun? • Removes cross-browser pain • Leverages your existing CSS knowledge
- 8. Why is it so fun? • Removes cross-browser pain • Leverages your existing CSS knowledge • Animates elements on the page
- 9. Why is it so fun? • Removes cross-browser pain • Leverages your existing CSS knowledge • Animates elements on the page • Compact code
- 10. What’s it best at?
- 11. What’s it best at? • Adding/Removing elements to/from the page
- 12. What’s it best at? • Adding/Removing elements to/from the page • Hiding/Showing elements
- 13. What’s it best at? • Adding/Removing elements to/from the page • Hiding/Showing elements • Animating CSS transitions
- 14. What’s it best at? • Adding/Removing elements to/from the page • Hiding/Showing elements • Animating CSS transitions • Responding to clicks, hovers, focus events
- 15. What’s it best at? • 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.
- 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. Drupal behaviors
- 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. Overriding JS
- 36. Overriding JS • Override JS functions by redeclaring afterwards
- 37. Overriding JS • Override JS functions by redeclaring afterwards • ‘theme’ JS loads after ‘core’ and ‘module’ JS
- 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. AJAX
- 43. Form API #states
- 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. Popular Modules
- 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. jQuery UI
- 59. jQuery UI
- 60. jQuery UI • Used to be jquery_ui module
- 61. jQuery UI • Used to be jquery_ui module • In Drupal 7 core!
- 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. Demo
- 67. Demo • Let’s do this.
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