Escolar Documentos
Profissional Documentos
Cultura Documentos
Introduction
jQuery is a JavaScript Framework In core since Drupal 5 (version 1.0.1) Modular, like Drupal itself and, like Drupal, constantly evolving...
Overview / Timeline
Commands
.hide(), .show(), .slideToggle(), .each(), etc
Utility Functions
$.each(), $.get(), $.browser(), $.noConflict()
Chaining Example
$('div.myClass').not(':first-child').hide().end().filter(':first-child').wrap ('<div class="my-wrapper"></div>');
Important Functions
drupal_add_js
Add a JavaScript file, setting or inline code to the page parameters: data, type, scope, defer, cache Examples:
drupal_add_js(drupal_get_path(module, mymodule) .'/myjs.js'); drupal_add_js(array(myjs=>$mysettings), setting); Drupal_add_js(var myVar = foo;, inline);
Important Functions
drupal_get_js()
called from phptemplate.engine (assigned to scripts variable) makes a call to drupal_add_js() to get the $javascript array
$output .= '<script type="text/javascript"> Drupal.extend({ settings: '. drupal_to_js (call_user_func_array('array_merge_recursive', $data)) ." });</script>\n";
Important Functions
drupal_to_js()
Converts a PHP variable into its JavaScript equivalent e.g. convert a PHP array into a JSON object used in the callback function for an AJAX path
drupal.js in D6:
var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'themes': {}, 'locale': {} };
11
drupal_to_js($var)
to convert your php array into a JSON array
Drupal.parseJSON(data)
Drupal 6: behaviors
In D6, wrap all your modules jQuery behaviours in a function assigned to Drupal.behaviors.mymodule no need to call it within $(document).ready() as Drupal automatically does it for you all behaviors can then be reattached to DOM elements that have come from an AJAX call
Drupal 6: behaviors
Drupal.behaviors.kflick = function(context) { $('div.field-type-image:not(.kflick-processed)', context).addClass (kflick-processed).each(function(){ var imageDetails = function(data) { var result = Drupal.parseJson(data); $('div.field-type-image div.field-item').html(result['image']); } $('a.kflick_button').click(function(){ $('a.kflick_button').removeClass('active'); $(this).addClass('active'); $.get('/drupal/sandbox/photostories/get/photos/'+ parseInt (this.id, 10), null, imageDetails); return false; }); }); }
Drupal 6: behaviors
Drupal.attachBehaviors = function(context) { context = context || document; if (Drupal.jsEnabled) { // Execute all of them. jQuery.each(Drupal.behaviors, function() { this(context); }); } };
What is AHAH?
Asynchronous HTML and HTTP still uses the XMLHttpRequest object still uses JavaScript loads html content retrieved from the server directly into the DOM - no parsing necessary AHAH in Drupal = AHAH Forms AHAH Forms Framework module In core as of D6
AHAH in Drupal 6
$form['qt_wrapper']['tabs_more'] = array( '#type' => 'submit', '#value' => t('More tabs'), '#description' => t("Click here to add more tabs."), '#weight' => 1, '#submit' => array('qt_more_tabs_submit'), // If no javascript action. '#ahah' => array( 'path' => 'quicktabs/ahah', 'wrapper' => 'quicktabs-tabs', 'method' => 'replace', 'effect' => 'fade', ), );
Resources
JavaScript Startup Guide on api.drupal.org drupaldojo.com/lesson/ahah http://jquery.com Firebug console Books
Learning jQuery jQuery in Action