SlideShare a Scribd company logo

Intro to jQuery for Drupal

•Download as KEY, PDF•
•
J
jhamiltoorion

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.

1 of 67
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 fieldsets, autocomplete, persistent table headers etc.
Syntax http://docs.jquery.com/Types#jQuery
Syntax http://docs.jquery.com/Types#jQuery • $(‘#page’).hide( );
Syntax http://docs.jquery.com/Types#jQuery • $(‘#page’).hide( ); • $(‘a’).addClass(‘test’);
Syntax http://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 specific theme function
Drupal behaviors
Sending settings to jQuery
Sending settings to jQuery • Add setting from PHP
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
Progressive Enhancement
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
AJAX
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
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
Demo • Let’s do this.

More Related Content

Intro to jQuery for Drupal

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. 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
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n