Drupal 6 JavaScript and jQuery - Ebook-Cours.com

function accordion_init() {
$path = drupal_get_path('module', 'accordion');
drupal_add_css($path . '/accordion.css');
drupal_add_js($path . '/accordion.js');
drupal_add_js($path . '/ui/ui.core.js');
drupal_add_js($path . '/ui/ui.accordion.js');
}
The accordion_init() function adds four files.
First, the accordion.css file (which we will create in a moment) contains styling
information. It is a CSS file, not a JavaScript file. Therefore, we add it with the
drupal_add_css() function.
Next, we have three JavaScript files that need to be added:
[ 303 ]
Chapter 9
1. accordion.js: This holds our custom JavaScript code. We will take a close
look at the contents of this file shortly.
2. ui/ui.core.js: This is the base library for jQuery UI. It contains functions
used by the rest of the jQuery UI components. Any time you use jQuery UI
you will need to include this library.
3. ui/ui.accordion.js: This contains the jQuery UI accordion widget code.
That is all there is to our module. Next, we will look at the JavaScript.
The accordion JavaScript
Our module code was short, but our JavaScript code is going to be even shorter. In
accordion.js, we need to write the necessary glue code to find the right part of our
document and turn it into an accordion. With jQuery at our disposal, and jQuery UI
tightly integrated, this process is as easy as writing a simple jQuery chain.
To make things even simpler, we will wrap this in a Drupal behavior and allow
Drupal to control the initialization of our widget:
// $Id$
/**
* JavaScript for initializing and adding accordion effect.
* @file
*/
Drupal.behaviors.accordion = function () {
$('#sidebar-left:not(.ui-accordion)').accordion({
header: 'h2'
});
};
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801