Intro To jQuery In Drupal

  • 22,089 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Super presentation! Thanks for sharing.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
22,089
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
310
Comments
1
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduction to jQuery in Drupal
  • 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. 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. Add JavaScript In Your Theme
  • 5. Printing Scripts In Your Theme In your page.tpl.php file(s) include: <?php print $scripts; ?>
  • 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. Defining Scripts in .info In you mytheme.info file: scripts[] = ascript.js scripts[] = jquery.plugin.js scripts[] = bscript.js
  • 8. Order of Files Core (jQuery.js and drupal.js) Module JS Files Theme JS Files
  • 9. Add Scripts Programatically drupal_add_js()
  • 10. drupal_add_js() Add JS Files Add Inline JS Add JS Settings/Variables
  • 11. Add A File drupal_add_js(‘/path/to/file.js’);
  • 12. Add A File drupal_add_js(drupal_get_path(‘module’, ‘mymodule’) . ‘/file.js’);
  • 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. Add Inline JavaScript drupal_add_js(“alert(‘Drupal Owns You’)”, ‘inline’);
  • 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. 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. Preprocess Administration >> Settings >> Performance
  • 18. Drupal Libraries
  • 19. Translating Stuff PHP Translating: t(‘my translatable text’); JavaScript: Drupal.t(‘My Translatable Text’);
  • 20. Translating Stuff var args {}; args[‘@count’] = 2; Drupal.t(‘My Translatable @count’, args);
  • 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. Translating Stuff var args {}; args[‘@count’] = Drupal.formatPlural(Drupal.settings.mym odule.count, ‘1 thing’, ‘@count things’); Drupal.t(‘My Translatable @count’, args);
  • 23. Theming $(‘#myselector’).html(‘<h2>my title</h2>’);
  • 24. Theming $(‘#myselector’). html(Drupal.theme(‘mythemefunction’, ‘mytitle’));
  • 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. Other Libraries Drag and Drop Lists AJAX Resizable Text Areas Autocomplete A lot more.....
  • 27. jQuery UI Module http://drupal.org/project/jquery_ui
  • 28. But, I Want A Newer Version Of jQuery!!!!!
  • 29. jQuery Update Module http://drupal.org/project/jquery_update
  • 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. Q&A