Intro To jQuery In Drupal
Download as KEY, PDF10 likes6,391 views
The document provides an introduction to using jQuery in Drupal, outlining its history and integration into different versions of Drupal. It explains how to add JavaScript and CSS within themes, manage script and style dependencies, and utilize Drupal's built-in functions for handling settings, translations, and theming. Additionally, it addresses using jQuery UI modules and updating to newer jQuery versions while demonstrating practical code examples.
![Defining Scripts in .info
In you mytheme.info file:
scripts[] = ascript.js
scripts[] = jquery.plugin.js
scripts[] = bscript.js](https://image.slidesharecdn.com/introtojqueryindrupal-090622103320-phpapp02/85/Intro-To-jQuery-In-Drupal-7-320.jpg)
![Translating Stuff
var args {};
args[‘@count’] = 2;
Drupal.t(‘My Translatable @count’, args);](https://image.slidesharecdn.com/introtojqueryindrupal-090622103320-phpapp02/85/Intro-To-jQuery-In-Drupal-20-320.jpg)
![Translating Stuff
var args {};
args[‘@count’] =
Drupal.formatPlural(Drupal.settings.mym
odule.count, ‘1 thing’, ‘@count things’);
Drupal.t(‘My Translatable @count’, args);](https://image.slidesharecdn.com/introtojqueryindrupal-090622103320-phpapp02/85/Intro-To-jQuery-In-Drupal-22-320.jpg)
![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');
}
}
};](https://image.slidesharecdn.com/introtojqueryindrupal-090622103320-phpapp02/85/Intro-To-jQuery-In-Drupal-30-320.jpg)
Intro To jQuery In Drupal
- 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
- 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);
- 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.....
- 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