Your SlideShare is downloading. ×
0
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Intro To jQuery In Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro To jQuery In Drupal

22,427

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 …

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,427
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
313
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

×