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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to jQuery and_drupal

Similar to jQuery and_drupal (20)

Recently uploaded

Recently uploaded (20)

jQuery and_drupal

Editor's Notes