Your SlideShare is downloading. ×
Intro to jQuery for Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to jQuery for Drupal

2,457

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

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

    ×