Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to jQuery (for Drupal) Amit Asaravala “aasarava” on drupal.org.

Similar presentations


Presentation on theme: "Introduction to jQuery (for Drupal) Amit Asaravala “aasarava” on drupal.org."— Presentation transcript:

1 Introduction to jQuery (for Drupal) Amit Asaravala “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 comes bundled – D7  jQuery comes bundled – Loaded automatically – Can use jquery_update module for newer vers. For Non-Drupal Sites: – – 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:

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: Handy:

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


Download ppt "Introduction to jQuery (for Drupal) Amit Asaravala “aasarava” on drupal.org."

Similar presentations


Ads by Google