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	506
http://treehouseagency.com	261
http://drupalmexico.com	199
http://www.slideshare.net	83
http://www.webizrada.com	6
http://webizrada.com	2
http://www.feedage.com	2
http://translate.googleusercontent.com	2
http://paper.li	2
http://74.125.43.132	1
http://localhost	1

Intro To jQuery In Drupal

by Matt Farina on Jun 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 1,065

Statistics

Intro To jQuery In Drupal — Presentation Transcript