Intro To jQuery In Drupal

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 Developer I Used To Build Military Tanks

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).

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/script.js by default script.js will be included

Defining Scripts in .info In you mytheme.info file: scripts[] = ascript.js scripts[] = jquery.plugin.js scripts[] = bscript.js

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’ , ‘mymodule’) . ‘/file.css);

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($myvars, ‘setting’); The JavaScript: alert(Drupal.settings.mymodule.myvar);

drupal_add_js() drupal_add_js($data = NULL, $type = 'module', $scope = 'header', $defer = FALSE, $cache = TRUE, $preprocess = TRUE) Data Type Scope Defer Cache Preprocess

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 text and theme as a placeholder for user-submitted

Translating Stuff var args {}; args[‘@count’] = Drupal.formatPlural(Drupal.settings.mym odule.count, ‘1 thing’, ‘@count things’); Drupal.t(‘My Translatable @count’, args);

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>’; } Overriding it: Drupal.theme.mythemefunction = function(text) { return text; }

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"); 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'); } } };

http://www.drupalmexico.com	513
http://treehouseagency.com	262
http://drupalmexico.com	220
http://www.slideshare.net	83
http://p2web.p2devcloud.fayze2.com	36
http://localhost	26
http://phase2.local	7
http://www.webizrada.com	6
http://p2web.p2devcloud.com	6
http://translate.googleusercontent.com	2
http://www.feedage.com	2
http://webizrada.com	2
http://paper.li	2
http://74.125.43.132	1

Intro To jQuery In Drupal

by Matt Farina

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 1,168

Statistics

Intro To jQuery In Drupal Presentation Transcript