Using jQuery in Theming Rob Knight BADCamp 2007 1 1
Nov 22, 2014
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