Your SlideShare is downloading. ×
0
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• Comp...
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• Respon...
What’s it best at?• Adding/Removing elements to/from  the page• Hiding/Showing elements• Animating CSS transitions• Respon...
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,  expa...
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() { ...
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 o...
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
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 ma...
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 ...
Common Use       Cases• Show more content on a page with  hide/show, tabs, accordions,  rotators, modals• Search bar with ...
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  S...
Popular Modules• Colorbox        • Views UI• Quick Tabs      • FullCalendar• Views Slideshow • Views                    Ac...
Popular Modules• Colorbox          • Views UI• Quick Tabs        • FullCalendar• Views Slideshow   • Views                ...
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.
Upcoming SlideShare
Loading in...5
×

Intro to jQuery for Drupal

2,535

Published on

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,535
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Intro to jQuery for Drupal"

    1. 1. jQuery for Drupal
    2. 2. What is jQuery?
    3. 3. What is jQuery? • http://jquery.com
    4. 4. What is jQuery? • http://jquery.com • “write less, do more”
    5. 5. Why is it so fun?
    6. 6. Why is it so fun?• Removes cross-browser pain
    7. 7. Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge
    8. 8. Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge• Animates elements on the page
    9. 9. Why is it so fun?• Removes cross-browser pain• Leverages your existing CSS knowledge• Animates elements on the page• Compact code
    10. 10. What’s it best at?
    11. 11. What’s it best at?• Adding/Removing elements to/from the page
    12. 12. What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements
    13. 13. What’s it best at?• Adding/Removing elements to/from the page• Hiding/Showing elements• Animating CSS transitions
    14. 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. 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
    16. 16. Core Drupal jQuery
    17. 17. Core Drupal jQuery• Drupal adopted jQuery into core starting with Drupal 5
    18. 18. 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.
    19. 19. Syntaxhttp://docs.jquery.com/Types#jQuery
    20. 20. Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );
    21. 21. Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );• $(‘a’).addClass(‘test’);
    22. 22. Syntaxhttp://docs.jquery.com/Types#jQuery• $(‘#page’).hide( );• $(‘a’).addClass(‘test’);• $(‘#page p’).click(function() { $(this).hide(‘slow’); });
    23. 23. Adding jQuery to a theme
    24. 24. Adding jQuery to a theme• drupal_add_js(drupal_get_path(‘theme’, ‘MYTHEME’) . ‘/js/myfile.js’);
    25. 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
    26. 26. Drupal behaviors
    27. 27. Sending settings to jQuery
    28. 28. Sending settings to jQuery• Add setting from PHP
    29. 29. Sending settings to jQuery• Add setting from PHP
    30. 30. Sending settings to jQuery• Add setting from PHP• Access Drupal.settings.myModule from within jQuery
    31. 31. jQuery Release Cycle
    32. 32. jQuery Release Cycle• Drupal 7 has jQuery 1.4.4
    33. 33. jQuery Release Cycle• Drupal 7 has jQuery 1.4.4• Latest jQuery is 1.6.2
    34. 34. jQuery Release Cycle• Drupal 7 has jQuery 1.4.4• Latest jQuery is 1.6.2• jQuery Update
    35. 35. Overriding JS
    36. 36. Overriding JS• Override JS functions by redeclaring afterwards
    37. 37. Overriding JS• Override JS functions by redeclaring afterwards• ‘theme’ JS loads after ‘core’ and ‘module’ JS
    38. 38. ProgressiveEnhancement
    39. 39. Progressive Enhancement• Build the page without relying on jQuery
    40. 40. Progressive Enhancement• Build the page without relying on jQuery• Fancify for additional coolness
    41. 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
    42. 42. AJAX
    43. 43. Form API #states
    44. 44. Common Use Cases
    45. 45. Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals
    46. 46. Common Use Cases• Show more content on a page with hide/show, tabs, accordions, rotators, modals• Search bar with disappearing default value
    47. 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
    48. 48. Popular Modules
    49. 49. Popular Modules• Colorbox
    50. 50. Popular Modules• Colorbox• Quick Tabs
    51. 51. Popular Modules• Colorbox• Quick Tabs• Views Slideshow
    52. 52. Popular Modules• Colorbox• Quick Tabs• Views Slideshow• Beauty Tips
    53. 53. Popular Modules• Colorbox• Quick Tabs• Views Slideshow• Beauty Tips• Hierarchical Select
    54. 54. Popular Modules• Colorbox • Views UI• Quick Tabs• Views Slideshow• Beauty Tips• Hierarchical Select
    55. 55. Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow• Beauty Tips• Hierarchical Select
    56. 56. Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow • Views Accordion• Beauty Tips• Hierarchical Select
    57. 57. Popular Modules• Colorbox • Views UI• Quick Tabs • FullCalendar• Views Slideshow • Views Accordion• Beauty Tips• Hierarchical • Feedback Select
    58. 58. jQuery UI
    59. 59. jQuery UI
    60. 60. jQuery UI• Used to be jquery_ui module
    61. 61. jQuery UI• Used to be jquery_ui module• In Drupal 7 core!
    62. 62. Resources & Tools
    63. 63. Resources & Tools• http://api.jquery.com
    64. 64. Resources & Tools• http://api.jquery.com• Firebug for Firefox
    65. 65. Resources & Tools• http://api.jquery.com• Firebug for Firefox• http://drupal.org/node/171213
    66. 66. Demo
    67. 67. Demo• Let’s do this.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×