beginning jquery in drupal theming
DESCRIPTION
Getting setup to use JQuery in your Drupal theme followed by a brief example.TRANSCRIPT
![Page 1: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/1.jpg)
Using jQuery in ThemingRob Knight
BADCamp 2007
1
1
![Page 2: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/2.jpg)
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
![Page 3: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/3.jpg)
jQuery Philosophy
‣ Progressive Enhancement
‣ Unobtrusive
‣ Lightweight
3
![Page 4: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/4.jpg)
Additionally
‣ Tame the IE 6 demons
‣ Tame the IE 7 demons (fewer)
‣ Use CSS3 in browsers that lack support
4
![Page 5: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/5.jpg)
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
![Page 6: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/6.jpg)
Setting Up for Development
‣ jQuerify - change “src” for script – Your Drupal jquery url (/misc/jquery.js)
– http://yoursite.com/jquery.js
6
![Page 7: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/7.jpg)
Setting Up for Development
‣ Firebug – Console
– Options > Larger Command Line
– http://docs.jquery.com in a new tab for reference
7
![Page 8: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/8.jpg)
Let’s Play
8
![Page 9: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/9.jpg)
1st Victim: nytimes.com1. 2. Firebug Console
9
![Page 10: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/10.jpg)
1st Victim: nytimes.com
$(‘p’).hide(‘slow’);
Paragraphs vanish10
![Page 11: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/11.jpg)
1st Victim: nytimes.com
$(‘p’).show(‘slow’);
Paragraphs return11
![Page 12: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/12.jpg)
Firebug Console
Shows:- output of your commands
- syntax errors- affected DOM elements
12
![Page 13: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/13.jpg)
Add to Drupal
‣ Enclose the commands in “ready” function
$(document).ready(
function() {
$(‘p’).hide(‘slow’);
});
13
![Page 14: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/14.jpg)
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
![Page 15: Beginning Jquery In Drupal Theming](https://reader034.vdocuments.us/reader034/viewer/2022051411/54712f41b4af9fb40a8b4aeb/html5/thumbnails/15.jpg)
Resources
‣ http://docs.jquery.com
‣ drupal_add_js API Reference
‣ http://learningjquery.com
‣ Hacking Digg.com with Firebug
15