Using jQuery in ThemingRob Knight

BADCamp 2007

1

1

Prerequisites

‣ Firefox

‣ Firebug Plugin (http://getfirebug.com)

‣ JQuerify Bookmarklet (http://tinyurl.com/2z74ol)

‣ Drupal 5 install to play with

‣ JQuery Update module (http://tinyurl.com/2bxw87)

2

jQuery Philosophy

‣ Progressive Enhancement

‣ Unobtrusive

‣ Lightweight

3

Additionally

‣ Tame the IE 6 demons

‣ Tame the IE 7 demons (fewer)

‣ Use CSS3 in browsers that lack support

4

jQuery & Drupal

‣ jQuery (v1.0) is baked-in as of Drupal 5

‣ Upgrade to v1.2 with jquery_update

‣ drupal_add_js() to add it to your node(s)

5

Setting Up for Development

‣ jQuerify - change “src” for script – Your Drupal jquery url (/misc/jquery.js)

– http://yoursite.com/jquery.js

6

Setting Up for Development

‣ Firebug – Console

– Options > Larger Command Line

– http://docs.jquery.com in a new tab for reference

7

Let’s Play

8

1st Victim: nytimes.com1. 2. Firebug Console

9

1st Victim: nytimes.com

$(‘p’).hide(‘slow’);

Paragraphs vanish10

1st Victim: nytimes.com

$(‘p’).show(‘slow’);

Paragraphs return11

Firebug Console

Shows:- output of your commands

- syntax errors- affected DOM elements

12

Add to Drupal

‣ Enclose the commands in “ready” function

$(document).ready(

function() {

$(‘p’).hide(‘slow’);

});

13

Add to Drupal

‣ Save in a file in /yourtheme/scripts/file.js

‣ In template.php:drupal_add_js(path_to_theme().‘file.js’, ‘theme’, ‘header’);

‣ (Optional) Use logic to specify when to call otherwise it will be called on all pages.

‣ jQuery loaded automatically when you use drupal_add_js().

14

Resources

‣ http://docs.jquery.com

‣ drupal_add_js API Reference

‣ http://learningjquery.com

‣ Hacking Digg.com with Firebug

15