jQuery for Drupal

3,015 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,015
On SlideShare
0
From Embeds
0
Number of Embeds
134
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide




















  • jQuery for Drupal

    1. 1. jQuery for Drupal Drupaldelphia, May 14, 2010
    2. 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. 3. What is jQuery? • http://jquery.com/ • “write less, do more”
    4. 4. Why is it so fun? • Removes cross-browser pain • Leverages your existing CSS knowledge • Animates elements on the page • Compact code
    5. 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. 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. 7. Syntax http://docs.jquery.com/Types#jQuery • $(“#page”).hide( ); • $(“a”).addClass(‘test’); • $(“#page p”).click(function( { $(this).hide(‘slow’); });
    8. 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. 9. Drupal behaviors
    10. 10. Sending settings to jQuery • $setting = array(‘mySetting’ => $foo); • drupal_add_js($settings, ‘setting’); • access Drupal.settings.mySetting in jQuery
    11. 11. jQuery Release Cycle • Drupal 6 has jQuery 1.2.6 • HEAD is on 1.4.2
    12. 12. Overriding js • Override js functions by redeclaring afterwards • ‘theme’ js loads after ‘core’ and ‘module’ js
    13. 13. Progressive Enhancement • Build the page without relying on jQuery • Fancify for additional coolness
    14. 14. AJAX
    15. 15. AJAX
    16. 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. 17. Popular Modules • Lightbox2 • Hierarchical Select • Vertical Tabs • Views UI • Quick Tabs • jQ • Views Carousel • Views Accordion • Beauty Tips • Feedback • Modal Frame API
    18. 18. jQuery UI • http://jqueryui.com/themeroller/ • In core Drupal 7
    19. 19. Resources & Tools • jquery.com • Firebug for Firefox • http://drupal.org/node/751748 handbook
    20. 20. Demo • Let’s do this.

    ×