This document discusses jQuery and how it can be used with Drupal. It provides an overview of jQuery, what it is best at doing, how to add jQuery to a Drupal theme, common AJAX use cases, and popular jQuery modules for Drupal. It also briefly discusses jQuery UI and resources for working with jQuery.

1. jQuery for Drupal
Drupaldelphia, May 14, 2010

2. Jody Hamilton
• Owner, Lead Developer at Zivtech
• Drupal architect, developer, themer, site-
builder, project manager, teacher and
student
• Jody Lynn on drupal.org

3. What is jQuery?
• http://jquery.com/
• “write less, do more”

4. Why is it so fun?
• Removes cross-browser pain
• Leverages your existing CSS knowledge
• Animates elements on the page
• Compact code

5. 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

6. 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.

7. Syntax
http://docs.jquery.com/Types#jQuery
• $(“#page”).hide( );
• $(“a”).addClass(‘test’);
• $(“#page p”).click(function( {
$(this).hide(‘slow’);
});

8. Adding jQuery to a
theme
• drupal_add_js(drupal_get_path(‘theme’,
‘MYTHEME’) . ‘/js/myfile.js’, ‘theme’);
• Add this to the top of template.php or in a
specific theme function

9. Drupal behaviors

10. Sending settings to
jQuery
• $setting = array(‘mySetting’ => $foo);
• drupal_add_js($settings, ‘setting’);
• access Drupal.settings.mySetting in jQuery

11. jQuery Release Cycle
• Drupal 6 has jQuery 1.2.6
• HEAD is on 1.4.2

12. Overriding js
• Override js functions by redeclaring
afterwards
• ‘theme’ js loads after ‘core’ and ‘module’ js

13. Progressive
Enhancement
• Build the page without relying on jQuery
• Fancify for additional coolness

14. AJAX

15. AJAX

16. 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

17. Popular Modules
• Lightbox2
• Hierarchical Select
• Vertical Tabs
• Views UI
• Quick Tabs
• jQ
• Views Carousel
• Views Accordion
• Beauty Tips
• Feedback
• Modal Frame API

18. jQuery UI
• http://jqueryui.com/themeroller/
• In core Drupal 7

19. Resources & Tools
• jquery.com
• Firebug for Firefox
• http://drupal.org/node/751748 handbook

20. Demo
• Let’s do this.