Intro To jQuery In Drupal

23,356 views
23,068 views

Published on

This presentation is a top level overview of how to work with JavaScript in drupal. This includes drupal specific techniques, integration between the front end and back end, and JS aggregation and special features.

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
  • Super presentation! Thanks for sharing.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
23,356
On SlideShare
0
From Embeds
0
Number of Embeds
1,196
Actions
Shares
0
Downloads
313
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Intro To jQuery In Drupal

  1. 1. Introduction to jQuery in Drupal
  2. 2. Matt Farina Developing for web since 1996 Coded In Over 10 Languages Developer at Tree House Agency Drupal and jQuery Developer I Used To Build Military Tanks
  3. 3. A Little History jQuery chosen for drupal core before release of jQuery 1.0 jQuery 1.0.4 shipped with drupal 5 Drupal 5 used jQuery to spruce up interface jQuery 1.2.3 shipped with Drupal 6 Drupal 6 translations, themes, libraries Currently jQuery 1.2.6 in Drupal 6 Drupal 7 to ship with latest version of jQuery (current Dev is 1.3).
  4. 4. Add JavaScript In Your Theme
  5. 5. Printing Scripts In Your Theme In your page.tpl.php file(s) include: <?php print $scripts; ?>
  6. 6. The Default script.js file /sites/all/themes/mytheme /sites/all/themes/mytheme/ mytheme.info /sites/all/themes/mytheme/script.js by default script.js will be included
  7. 7. Defining Scripts in .info In you mytheme.info file: scripts[] = ascript.js scripts[] = jquery.plugin.js scripts[] = bscript.js
  8. 8. Order of Files Core (jQuery.js and drupal.js) Module JS Files Theme JS Files
  9. 9. Add Scripts Programatically drupal_add_js()
  10. 10. drupal_add_js() Add JS Files Add Inline JS Add JS Settings/Variables
  11. 11. Add A File drupal_add_js(‘/path/to/file.js’);
  12. 12. Add A File drupal_add_js(drupal_get_path(‘module’, ‘mymodule’) . ‘/file.js’);
  13. 13. Add A File drupal_add_js(drupal_get_path(‘module’, ‘mymodule’) . ‘/file.js’); Drupal_add_css(drupal_get_path(‘module’ , ‘mymodule’) . ‘/file.css);
  14. 14. Add Inline JavaScript drupal_add_js(“alert(‘Drupal Owns You’)”, ‘inline’);
  15. 15. Drupal Settings/Variables The PHP: $myvars = array( ‘mymodule’ => array( ‘myvar’ => ‘myvalue’, ), ); drupal_add_js($myvars, ‘setting’); The JavaScript: alert(Drupal.settings.mymodule.myvar);
  16. 16. drupal_add_js() drupal_add_js($data = NULL, $type = 'module', $scope = 'header', $defer = FALSE, $cache = TRUE, $preprocess = TRUE) Data Type Scope Defer Cache Preprocess
  17. 17. Preprocess Administration >> Settings >> Performance
  18. 18. Drupal Libraries
  19. 19. Translating Stuff PHP Translating: t(‘my translatable text’); JavaScript: Drupal.t(‘My Translatable Text’);
  20. 20. Translating Stuff var args {}; args[‘@count’] = 2; Drupal.t(‘My Translatable @count’, args);
  21. 21. Translating Stuff !variable: inserted as is @variable: escape plain text to HTML (Drupal.checkPlain) %variable: escape text and theme as a placeholder for user-submitted
  22. 22. Translating Stuff var args {}; args[‘@count’] = Drupal.formatPlural(Drupal.settings.mym odule.count, ‘1 thing’, ‘@count things’); Drupal.t(‘My Translatable @count’, args);
  23. 23. Theming $(‘#myselector’).html(‘<h2>my title</h2>’);
  24. 24. Theming $(‘#myselector’). html(Drupal.theme(‘mythemefunction’, ‘mytitle’));
  25. 25. Theming Default Theme Function: Drupal.theme.prototype. mythemefunction = function(text) { return ‘<h2>’ + text + ‘</h2>’; } Overriding it: Drupal.theme.mythemefunction = function(text) { return text; }
  26. 26. Other Libraries Drag and Drop Lists AJAX Resizable Text Areas Autocomplete A lot more.....
  27. 27. jQuery UI Module http://drupal.org/project/jquery_ui
  28. 28. But, I Want A Newer Version Of jQuery!!!!!
  29. 29. jQuery Update Module http://drupal.org/project/jquery_update
  30. 30. Drupal Behavior Drupal.behaviors.comment = function (context) { var parts = new Array("name", "homepage", "mail"); var cookie = ''; for (i=0;i<3;i++) { cookie = Drupal.comment.getCookie('comment_info_' + parts[i]); if (cookie != '') { $("#comment-form input[name=" + parts[i] + "]:not(.comment-processed)", context) .val(cookie) .addClass('comment-processed'); } } };
  31. 31. Q&A

×