presentation by: Tom Friedhof

IntroducingDrupal.behaviors

Review jQuery Basics

Review jQuery Basics

$( [find something] ).doSomething();

Review jQuery Basics

$( [find something] ).doSomething();

$(“#tabs”).tabs();

CSS Selector jQuery UI Method

The DOM has to be ready

$(document).ready(function() {

// Code Goes Here

});

The DOM has to be ready

$(document).ready(function() {

$(“#tabs”).tabs();

});

The Drupal Way

Drupal.behaviors.loadTabs = function(context) {

// Code Goes Here

};

The Drupal Way

Drupal.behaviors.loadTabs = function(context) {

$(“#tabs”).tabs();

};

Why use Drupal.behaviors?

• Ability to override JS

• Behaviors are re-attachable

• Attach Behaviors to a specific context

• HTML loaded via AHAH

Why use Drupal.behaviors?

• Ability to override JS

• Behaviors are re-attachable

• Attach Behaviors to a specific context

• HTML loaded via AHAH

Drupal.attachBehaviors(elem);

DemoDrupal.behaviors

Resources

http://api.drupal.org/api/file/developer/topics/javascript_startup_guide.html/6

http://raincitystudios.com/blogs-and-pods/katherine-bailey/the-lowdown-jquery-drupal-part-two

http://www.chapterthree.com/blog/josh_koenig/handling_aysnchronous_data_drupal_session_materials

Questions?