This document discusses jQuery and how it can be used with Drupal. It explains that jQuery was incorporated into Drupal core starting with Drupal 5 to simplify cross-browser compatibility and enable animation effects. It provides examples of jQuery syntax and discusses how to add jQuery to Drupal themes. Additionally, it outlines several common uses of jQuery with Drupal, such as expanding content and AJAX functionality, and lists some popular jQuery modules.

1. jQuery for Drupal
Design for Drupal, June 19, 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.