Intro to jQuery for Drupal

  • 2,296 views
Uploaded on

 

More 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,296
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
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.