This document provides an overview of jQuery and how it can be used with Drupal. It describes what jQuery is, how Drupal incorporates it into core, how to add jQuery to a theme, behaviors, sending settings to jQuery, overriding jQuery functions, progressive enhancement, common use cases, popular modules, and jQuery UI. Resources mentioned include the jQuery API documentation and using Firebug for debugging. The document demonstrates how to use jQuery.

1. jQuery for Drupal

2. What is jQuery?

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.

19. Syntax
http://docs.jquery.com/Types#jQuery

20. Syntax
http://docs.jquery.com/Types#jQuery
• $(‘#page’).hide( );

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

38. Progressive
Enhancement

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

49. Popular Modules
• Colorbox

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!

62. Resources & Tools

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.