Using jQuery in Theming
          Rob Knight
        BADCamp 2007




             1
                          1
Prerequisites

‣   Firefox
‣   Firebug Plugin (http://getfirebug.com)
‣   JQuerify Bookmarklet (http://tinyurl.com/2z74ol)...
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




  ...
jQuery & Drupal


‣   jQuery (v1.0) is baked-in as of Drupal 5
‣   Upgrade to v1.2 with jquery_update
‣   drupal_add_js() ...
Setting Up for
             Development


‣   jQuerify - change “src” for script
     – Your Drupal jquery url (/misc/jque...
Setting Up for
             Development

‣   Firebug
    – Console
    – Options > Larger Command Line
    – http://docs.j...
Let’s Play

             8
1st Victim: nytimes.com
 1.    2.   Firebug Console




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




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




                       Paragraphs return
                                ...
Firebug Console
Shows:
 - output of your commands
 - affected DOM elements
 - syntax errors




                          ...
Add to Drupal
‣   Enclose the commands in “ready” function
          $(document).ready(
          function() {
           ...
Add to Drupal
‣   Save in a file in /yourtheme/scripts/file.js
‣   In template.php:
    drupal_add_js(path_to_theme().‘fil...
Resources

‣   http://docs.jquery.com
    drupal_add_js API Reference
‣

‣   http://learningjquery.com
‣   Hacking Digg.co...
Upcoming SlideShare
Loading in...5
×

Beginning Jquery In Drupal Theming

51,013

Published on

Getting setup to use JQuery in your Drupal theme followed by a brief example.

Published in: Technology, Design
3 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total Views
51,013
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
662
Comments
3
Likes
24
Embeds 0
No embeds

No notes for slide

Beginning Jquery In Drupal Theming

  1. 1. Using jQuery in Theming Rob Knight BADCamp 2007 1 1
  2. 2. 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
  3. 3. jQuery Philosophy ‣ Progressive Enhancement ‣ Unobtrusive ‣ Lightweight 3
  4. 4. Additionally ‣ Tame the IE 6 demons ‣ Tame the IE 7 demons (fewer) ‣ Use CSS3 in browsers that lack support 4
  5. 5. 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
  6. 6. Setting Up for Development ‣ jQuerify - change “src” for script – Your Drupal jquery url (/misc/jquery.js) – http://yoursite.com/jquery.js 6
  7. 7. Setting Up for Development ‣ Firebug – Console – Options > Larger Command Line – http://docs.jquery.com in a new tab for reference 7
  8. 8. Let’s Play 8
  9. 9. 1st Victim: nytimes.com 1. 2. Firebug Console 9
  10. 10. 1st Victim: nytimes.com $(‘p’).hide(‘slow’); Paragraphs vanish 10
  11. 11. 1st Victim: nytimes.com $(‘p’).show(‘slow’); Paragraphs return 11
  12. 12. Firebug Console Shows: - output of your commands - affected DOM elements - syntax errors 12
  13. 13. Add to Drupal ‣ Enclose the commands in “ready” function $(document).ready( function() { $(‘p’).hide(‘slow’); }); 13
  14. 14. 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
  15. 15. Resources ‣ http://docs.jquery.com drupal_add_js API Reference ‣ ‣ http://learningjquery.com ‣ Hacking Digg.com with Firebug 15
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×