Intro to jQuery for Drupal

jQuery for Drupal

What is jQuery?

What is jQuery? • http://jquery.com

What is jQuery? • http://jquery.com • “write less, do more”

Why is it so fun?

Why is it so fun?• Removes cross-browser pain

Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge

Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge• Animates elements on the page

Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge• Animates elements on the page• Compact code

What’s it best at?

What’s it best at?• Adding/Removing elements to/from the page

What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements

What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions

What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions• Responding to clicks, hovers, focus events

What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions• Responding to clicks, hovers, focus events• Selecting from and traversing the DOM

Core Drupal jQuery

Core Drupal jQuery• Drupal adopted jQuery into core starting with Drupal 5

Core Drupal jQuery• Drupal adopted jQuery into core starting with Drupal 5• In /misc: drag-and-drop ordering, expandable textareas, collapsible ﬁeldsets, autocomplete, persistent table headers etc.

Syntaxhttp://docs.jquery.com/Types#jQuery

Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );

Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );• $(‘a’).addClass(‘test’);

Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );• $(‘a’).addClass(‘test’);• $(‘#page p’).click(function() { $(this).hide(‘slow’); });

Adding jQuery to a theme

Adding jQuery to a theme• drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’);

Adding jQuery to a theme• drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’);• Add this to the top of template.php or in a speciﬁc theme function

Drupal behaviors

Sending settings to jQuery

Sending settings to jQuery• Add setting from PHP

Sending settings to jQuery• Add setting from PHP• Access Drupal.settings.myModule from within jQuery

jQuery Release Cycle

jQuery Release Cycle• Drupal 7 has jQuery 1.4.4

jQuery Release Cycle• Drupal 7 has jQuery 1.4.4• Latest jQuery is 1.6.2

jQuery Release Cycle• Drupal 7 has jQuery 1.4.4• Latest jQuery is 1.6.2• jQuery Update

Overriding JS

Overriding JS• Override JS functions by redeclaring afterwards

Overriding JS• Override JS functions by redeclaring afterwards• ‘theme’ JS loads after ‘core’ and ‘module’ JS

ProgressiveEnhancement

Progressive Enhancement• Build the page without relying on jQuery

Progressive Enhancement• Build the page without relying on jQuery• Fancify for additional coolness

Progressive Enhancement• Build the page without relying on jQuery• Fancify for additional coolness• Never use js to make changes that should be done in markup, styles, or PHP

Form API #states

Common Use Cases

Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals

Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals• Search bar with disappearing default value

Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals• Search bar with disappearing default value• Slicker functionality with AJAX and AHAH

Popular Modules

Popular Modules• Colorbox

Popular Modules• Colorbox• Quick Tabs

Popular Modules• Colorbox• Quick Tabs• Views Slideshow

Popular Modules• Colorbox• Quick Tabs• Views Slideshow• Beauty Tips

Popular Modules• Colorbox• Quick Tabs• Views Slideshow• Beauty Tips• Hierarchical Select

Popular Modules• Colorbox • Views UI• Quick Tabs• Views Slideshow• Beauty Tips• Hierarchical Select

Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow• Beauty Tips• Hierarchical Select

Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow • Views Accordion• Beauty Tips• Hierarchical Select

Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow • Views Accordion• Beauty Tips• Hierarchical • Feedback Select

jQuery UI

jQuery UI• Used to be jquery_ui module

jQuery UI• Used to be jquery_ui module• In Drupal 7 core!

Resources & Tools

Resources & Tools• http://api.jquery.com

Resources & Tools• http://api.jquery.com• Firebug for Firefox

Resources & Tools• http://api.jquery.com• Firebug for Firefox• http://drupal.org/node/171213

Demo• Let’s do this.

Intro to jQuery for Drupal

by jhamiltoorion

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 6

Statistics

Intro to jQuery for Drupal Presentation Transcript