Your SlideShare is downloading. ×
0
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
Intro to jQuery for Drupal
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,511

Published on

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,511
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
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.

    ×