Intro to jQuery for Drupal

2,802 views
2,712 views

Published on

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,802
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
  • 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.

    ×