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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro to jQuery for Drupal

  • 2,341 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,341
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
17
Comments
1
Likes
1

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.