Beginning Jquery In Drupal Theming

Using jQuery in Theming Rob 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.com 1. 2. Firebug Console 9

1st Victim: nytimes.com $(‘p’).hide(‘slow’); Paragraphs vanish 10

1st Victim: nytimes.com $(‘p’).show(‘slow’); Paragraphs return 11

Firebug Console Shows: - output of your commands - affected DOM elements - syntax errors 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

http://www.slideshare.net	421
http://acn.akarismatik.lan	376
http://raselkabir.wordpress.com	196
http://hands4t.blogspot.com	39
http://acn.houssem.blibech.interne.akarismatik.lan	27
http://playdrupal.com	11
http://acn.naim.belkaid.interne.akarismatik.lan	11
http://drupalranch.com	9
http://vle.worldbank.org	9
http://webcache.googleusercontent.com	2
http://www.drupalranch.com	2
http://localhost	1
http://tibi	1
http://radiusgreen.com	1
http://www.dvd-photo.slideshow.com	1
http://192.168.10.100	1
http://www.playdrupal.com	1
http://www.koehl-media.de	1
http://localhost:8888	1
http://connect2.prud.us	1
http://www.angrydonuts.com	1
http://bler.webschuur.com	1

Beginning Jquery In Drupal Theming

by Rob Knight

Accessibility

Categories

Upload Details

Usage Rights

22 Embeds 1,114

Statistics

Beginning Jquery In Drupal Theming Presentation Transcript