Introduction to
jQuery in Drupal
Matt Farina
Developing for web since 1996
Coded In Over 10 Languages
Developer at Tree House Agency
Drupal and jQuery Deve...
A Little History
jQuery chosen for drupal core before
release of jQuery 1.0

jQuery 1.0.4 shipped with drupal 5

Drupal 5 ...
Add JavaScript In
  Your Theme
Printing Scripts In Your Theme


  In your page.tpl.php file(s) include:

  <?php print $scripts; ?>
The Default script.js file
/sites/all/themes/mytheme

/sites/all/themes/mytheme/
mytheme.info

/sites/all/themes/mytheme/s...
Defining Scripts in .info

In you mytheme.info file:

scripts[] = ascript.js

scripts[] = jquery.plugin.js

scripts[] = bs...
Order of Files

Core (jQuery.js and drupal.js)

Module JS Files

Theme JS Files
Add Scripts
Programatically
   drupal_add_js()
drupal_add_js()

Add JS Files

Add Inline JS

Add JS Settings/Variables
Add A File

drupal_add_js(‘/path/to/file.js’);
Add A File

drupal_add_js(drupal_get_path(‘module’,
        ‘mymodule’) . ‘/file.js’);
Add A File

drupal_add_js(drupal_get_path(‘module’,
‘mymodule’) . ‘/file.js’);
Drupal_add_css(drupal_get_path(‘module’
, ‘...
Add Inline JavaScript

drupal_add_js(“alert(‘Drupal Owns You’)”, ‘inline’);
Drupal Settings/Variables
The PHP:
$myvars = array(
 ‘mymodule’ => array(
   ‘myvar’ => ‘myvalue’,
 ),
);

drupal_add_js($...
drupal_add_js()
drupal_add_js($data = NULL, $type = 'module',
 $scope = 'header', $defer = FALSE, $cache =
        TRUE, $...
Preprocess
Administration >> Settings >> Performance
Drupal Libraries
Translating Stuff

PHP Translating:
t(‘my translatable text’);

JavaScript:
Drupal.t(‘My Translatable Text’);
Translating Stuff

var args {};
args[‘@count’] = 2;
Drupal.t(‘My Translatable @count’, args);
Translating Stuff

!variable: inserted as is

@variable: escape plain text to HTML
(Drupal.checkPlain)

%variable: escape ...
Translating Stuff
var args {};
args[‘@count’] =
Drupal.formatPlural(Drupal.settings.mym
odule.count, ‘1 thing’, ‘@count th...
Theming

$(‘#myselector’).html(‘<h2>my title</h2>’);
Theming

$(‘#myselector’).
html(Drupal.theme(‘mythemefunction’,
‘mytitle’));
Theming
Default Theme Function:
Drupal.theme.prototype. mythemefunction
= function(text) {
  return ‘<h2>’ + text + ‘</h2>...
Other Libraries

Drag and Drop Lists

AJAX

Resizable Text Areas

Autocomplete

A lot more.....
jQuery UI Module
http://drupal.org/project/jquery_ui
But, I Want A
Newer Version Of
  jQuery!!!!!
jQuery Update
        Module
http://drupal.org/project/jquery_update
Drupal Behavior
    Drupal.behaviors.comment = function (context) {
   var parts = new Array("name", "homepage", "mail");
...
Q&A
Upcoming SlideShare
Loading in...5
×

Intro To jQuery In Drupal

22,511

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
9 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
22,511
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
313
Comments
1
Likes
9
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×