jQuery and_drupal

jQuery and Drupal Jim Campbell Black Cat Web, Inc. [email_address] 21 September 2010

Presentation Overview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What is jQuery? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Response to jQuery: great enthusiasm ,[object Object],[object Object],[object Object],[object Object],[object Object]

Using jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery: Already in Drupal ,[object Object],[object Object],[object Object],[object Object],[object Object]

Background: what is Javascript? ,[object Object],[object Object],[object Object],[object Object]

Example #1: Simple DOM interaction with Javascript (HTML) Consider the following HTML: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example #1: Simple DOM interaction with Javascript (Script) The following Javascript interacts with HTML using DOM (Document Object Model) conventions: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Try it here: http://blackcatwebinc.com/jqdrupal/js1.htm

Example #1: Simple DOM interaction with Javascript (Script) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Background: more on Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example #2: Simple DOM interaction with Javascript (Script) The following Javascript uses method chaining, an event handler, and a closure function. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Try it here: http://blackcatwebinc.com/jqdrupal/js2.htm

So back to jQuery… why use it? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example #3: Simple DOM interaction with jQuery (Script) The following code uses the jQuery ready() event handler and jQuery syntax to interact with the DOM. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Try it here: http://blackcatwebinc.com/jqdrupal/js3.htm

So what else is jQuery good for? ,[object Object],[object Object],[object Object]

Something fun: Before-After ,[object Object],[object Object],[object Object],[object Object],[object Object]

Techie question #1: what is "$"? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Techie question #2: Is jQuery compatible with other Javascript code? ,[object Object],[object Object],[object Object],[object Object]

jQuery in Drupal ,[object Object],[object Object],[object Object],[object Object],[object Object]

Guidelines for jQuery and Javascript ,[object Object],[object Object],[object Object],[object Object],[object Object]

Guideline 1: "Functional without scripts" ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Guideline 2: "No hard-coding" ,[object Object],[object Object]

JS file in modules: drupal_add_js() ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JS in modules: Drupal.behaviors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JS setting in modules: drupal_add_js() ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JS in themes: drupal_add_js() ,[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Plugins in Drupal ,[object Object],[object Object]

?? Comments?? ?? Questions?? ,[object Object],[object Object]

jQuery and_drupal

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (17)

Similaire à jQuery and_drupal

Similaire à jQuery and_drupal (20)

Dernier

Dernier (20)

jQuery and_drupal

Notes de l'éditeur