This document provides an overview of jQuery and how it can be used with Drupal. It describes what jQuery is, how Drupal incorporates it into core, how to add jQuery to a theme, behaviors, sending settings to jQuery, overriding jQuery functions, progressive enhancement, common use cases, popular modules, and jQuery UI. Resources mentioned include the jQuery API documentation and using Firebug for debugging. The document demonstrates how to use jQuery.
11. What’s it best at?
• Adding/Removing elements to/from
the page
12. What’s it best at?
• Adding/Removing elements to/from
the page
• Hiding/Showing elements
13. What’s it best at?
• Adding/Removing elements to/from
the page
• Hiding/Showing elements
• Animating CSS transitions
14. What’s it best at?
• Adding/Removing elements to/from
the page
• Hiding/Showing elements
• Animating CSS transitions
• Responding to clicks, hovers, focus
events
15. 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
24. Adding jQuery to
a theme
• drupal_add_js(drupal_get_path(‘theme’,
‘MYTHEME’) . ‘/js/myfile.js’);
25. 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 specific theme function
39. Progressive
Enhancement
• Build the page without relying on
jQuery
40. Progressive
Enhancement
• Build the page without relying on
jQuery
• Fancify for additional coolness
41. 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
45. Common Use
Cases
• Show more content on a page with
hide/show, tabs, accordions,
rotators, modals
46. Common Use
Cases
• Show more content on a page with
hide/show, tabs, accordions,
rotators, modals
• Search bar with disappearing
default value
47. 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
As a simple example lets look at how you'd go about finding all the https links on a page and adding some additional text marking them as secure, turning <a href="https://example.com">Example</a> into <a href="https://example.com">Example (Secure!)</a>. This should make the importance of only running the code once apparent, if our code ran twice the link would end up reading "Example (Secure!) (Secure!)".\n
