Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie jQuery for Drupal: An Introduction to Using jQuery in Drupal Themes and Modules
Ähnlich wie jQuery for Drupal: An Introduction to Using jQuery in Drupal Themes and Modules (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
jQuery for Drupal: An Introduction to Using jQuery in Drupal Themes and Modules
- 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.
- 21. Syntax http://docs.jquery.com/Types#jQuery • $(‘#page’).hide( ); • $(‘a’).addClass(‘test’);
- 22. Syntax http://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
- 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
- 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!
- 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.
Hinweis der Redaktion
- \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