Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Beginning Jquery In Drupal Theming

51.890 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie, Design

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

×