Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducing
    Drupal.behaviors

presentation by: Tom Friedhof
Review jQuery Basics
Review jQuery Basics
 $( [find something] ).doSomething();
Review jQuery Basics
 $( [find something] ).doSomething();




 $(“#tabs”).tabs();
           CSS Selector   jQuery UI Meth...
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
...
Why use Drupal.behaviors?

• Ability to override JS
• Behaviors are re-attachable
• Attach Behaviors to a specific context
...
Demo
 Drupal.behaviors
Resources


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

 http://raincitystudios.com/b...
Questions?
Upcoming SlideShare
Loading in …5
×

Drupal.Behaviors

20,542 views

Published on

LA Drupal Lightning Talk

Drupal.Behaviors

  1. 1. Introducing Drupal.behaviors presentation by: Tom Friedhof
  2. 2. Review jQuery Basics
  3. 3. Review jQuery Basics $( [find something] ).doSomething();
  4. 4. Review jQuery Basics $( [find something] ).doSomething(); $(“#tabs”).tabs(); CSS Selector jQuery UI Method
  5. 5. The DOM has to be ready $(document).ready(function() { // Code Goes Here });
  6. 6. The DOM has to be ready $(document).ready(function() { $(“#tabs”).tabs(); });
  7. 7. The Drupal Way Drupal.behaviors.loadTabs = function(context) { // Code Goes Here };
  8. 8. The Drupal Way Drupal.behaviors.loadTabs = function(context) { $(“#tabs”).tabs(); };
  9. 9. Why use Drupal.behaviors? • Ability to override JS • Behaviors are re-attachable • Attach Behaviors to a specific context • HTML loaded via AHAH
  10. 10. 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);
  11. 11. Demo Drupal.behaviors
  12. 12. 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
  13. 13. Questions?

×