Slides from Design for Drupal 2010, "jQuery for Drupal" by Jody Hamilton

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.