jQuery for Drupal

jQuery for Drupal Design for Drupal, June 19, 2010

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

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

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

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

Core Drupal jQuery • Drupal adopted jQuery into core starting with Drupal 5 • In /misc: drag-and-drop ordering, expandable textareas, collapsible ﬁeldsets, autocomplete, persistent table headers etc.

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

Adding jQuery to a theme • drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myﬁle.js’, ‘theme’); • Add this to the top of template.php or in a speciﬁc theme function

Drupal behaviors

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

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

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

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

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

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

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

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

Demo • Let’s do this.

http://minkstudios.org	48
http://infowonders.posterous.com	4
http://www.google.com	2

jQuery for Drupal

by jhamiltoorion

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 54

Statistics

jQuery for Drupal Presentation Transcript