• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery for Drupal
 

jQuery for Drupal

on

  • 3,307 views

 

Statistics

Views

Total Views
3,307
Views on SlideShare
3,175
Embed Views
132

Actions

Likes
2
Downloads
21
Comments
0

8 Embeds 132

http://news.karpe.net.in 47
http://www.drupaldelphia.com 46
http://www.zivtech.com 17
http://www.slideshare.net 13
http://zivtech_redesign.dev.zivtech.com 5
http://zivtech.local 2
http://translate.googleusercontent.com 1
http://zivtech_redesign.local 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

jQuery for Drupal jQuery for Drupal Presentation Transcript

  • jQuery for Drupal Drupaldelphia, May 14, 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 fieldsets, 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/myfile.js’, ‘theme’); • Add this to the top of template.php or in a specific 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
  • AJAX
  • AJAX
  • 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.