Drupal 7 Module Development

Chapter 10
Adding JavaScript and CSS files to .info files
The simplest method to add JavaScript and CSS to a page is by adding them to the
.info files for a module. When JavaScript and CSS files are specified in a .info file they
are added to all pages and configured to use preprocessing (more on that later). An
example that adds a script and CSS file looks like:
scripts[] = foo.js
stylesheets[screen][] = bar.css
Each of these is a file and the path is relative to the root of the module. The scripts
property is an array of script files. The stylesheets property is an array of media
types and each media type is an array of CSS files.
Using drupal_add_js()
The most common method of adding JavaScript to a page is by using the function
drupal_add_js(). This utility function provides the ability to add files (both
external to Drupal and within the file system), add inline JavaScript, and pass
variables between PHP and JavaScript.
Typically Cascading Stylesheets (CSS) are used alongside JavaScript. Drupal provides
a function to add CSS to a page that works in a fashion similar to drupal_add_js().
It's called drupal_add_css(). The APIs between the two functions are almost
identical. The feature set differs in that CSS doesn't have variables to pass in from
PHP and stylesheets have media and Internet Explorer options.
Through the examples in this chapter we will create a Hello World module that
displays Hello World in various ways using JavaScript. The function definition for
drupal_add_js() provides two arguments with varying values depending on what
you are doing with it. The definition is:
function drupal_add_js($data = NULL, $options = NULL)
As we work through the Hello World module we will examine the different
variances and possible values which can be passed into drupal_add_js().
Adding JavaScript files
Adding a file is the default behavior of drupal_add_js() and drupal_add_css().
Adding a JavaScript file and a CSS file to a page would look like the following:
drupal_add_js('path/to/hello_world.js');
drupal_add_css('path/to/hello_world.css');
[ 289 ]