jQuery for Drupal
- 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
- 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.