1. Introduction to jQuery (for Drupal) Amit Asaravala http://returncontrol.com/badcamp amit@returncontrol.com “aasarava” on drupal.org

2. What is jQuery?

3. Magic

4. What is jQuery? A JavaScript library: Makes writing JavaScript a lot easier Makes writing cross-browser compatible JavaScript a lot easier Makes creating client-side interactivity a lot easier Makes AJAX a lot easier

5. How Do I Get jQuery?

6. For Drupal Sites: – D6  jQuery 1.2.6 comes bundled – D7  jQuery 1.4.4 comes bundled – Loaded automatically – Can use jquery_update module for newer vers. For Non-Drupal Sites: – http://jquery.com/download – Get the “minified” version for production use

7. How Do I Use It?

8. How Do I Use It: Non-Drupal //your jquery code goes here. go crazy!

9. How Do I Use It: Drupal Theme Drupal 6: – Create a script.js file in your theme folder. – Your jQuery code goes in there. Drupal 7: – Edit your theme’s.info file – Add: scripts[] = script.js Reference: http://drupal.org/node/171213http://drupal.org/node/171213

10. How Do I Use It: Drupal Module 1.Create a mymodule.js file. 2.Use drupal_add_js() function in your module. mymodule_init() { $path = drupal_get_path(‘module’, ‘mymodule’); drupal_add_js($path. '/mymodule.js'); }

11. Yeah, But How Do I Use It?

12. Writing jQuery 1.Series of statements 2.Each statement is usually a 3-step process: 1.Select an element 2.Attach an event (optional) 3.Specify what happens “For this heading, when the user clicks on it, I want monkeys to fly across the page.”

13. 3-Step Process 1.Select element: jQuery( ‘h2’ ) 2.Attach an event: jQuery( ‘h2’ ).click( ) 3.Specify what happens: jQuery( ‘h2’ ).click( monkeysFly );

14. Your Final Statement jQuery(‘h2’).click( monkeysFly );

15. $horthand $(‘h2’).click( monkeysFly ); see example

16. More Selectors $(‘input’).click( monkeysFly ); $(‘.title’).click( monkeysFly ); $(‘#form1 input’).click( monkeysFly ); $(‘#edit-title’).click( monkeysFly ); $(‘h2, h3,.title’).click( monkeysFly );

17. Monkey Code Inside script.js: $('h2').click( monkeysFly ); function monkeysFly() { $('img.monkey').fadeIn('slow'); }

18. Anonymous Functions $('h2').click( function() { $('img.monkey').fadeIn('slow'); } );

19. Anonymous Functions, 2 $('h2').click(function() { $('img.monkey').fadeIn('slow'); });

20. Wait ‘Til Browser is Ready $(document).ready(function() { $('h2').click(function() { $('img.monkey').fadeIn('slow'); });

21. D6: Wait ‘Til Browser is Ready Drupal.behaviors.demo = function(context) { $('h2‘, context).click(function() { $('img.monkey').fadeIn('slow'); }); };

22. D7: Wait ‘Til Browser is Ready Drupal.behaviors.demo = { attach: function(context, settings) { $('h2‘, context).click(function() { $('img.monkey').fadeIn('slow'); }); } };

23. Finding the Right jQuery Function Official: http://api.jquery.com/ http://api.jquery.com/ Handy: http://jqapi.com/http://jqapi.com/

24. Example: Dynamic Form Components Show character count as user is typing? No problem!

25. Example: Dynamic Form Components Let’s do this in a module countchars.module: function countchars_init() { $path = drupal_get_path(‘module’, ‘countchars’); drupal_add_js( $path. ‘/countchars.js’); }

26. Example: Dynamic Form Components countchars.js $(document).ready(function() { });

27. countchars.js $(document).ready(function() { $('#mytext').keyup( function() { });

28. countchars.js $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ); $('#mytext').keyup( function() { });

29. Chaining $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ).keyup( function() { });

30. countchars.js $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ).keyup(function() { var count = $('#mytext').val().length; $('#chars').html( 'characters: ' + count ); });

31. $(this) $(document).ready(function() { $('#mytext').after( ' characters: 0 ' ).keyup(function() { var count = $(this).val().length; $('#chars').html( 'characters: ' + count ); });

32. Resources jquery.com -- main site jqueryui.com -- UI components Contact amit@returncontrol.com http://returncontrol.comhttp://returncontrol.com/badcamp