Post on 14-Jan-2016
Introduction to jQuery(for Drupal)
Amit Asaravalahttp://returncontrol.com/badcamp
amit@returncontrol.com“aasarava” on drupal.org
What is jQuery?
What is jQuery?
•Magic
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
How Do I Get jQuery?
How Do I Get jQuery?
• 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
How Do I Use It?
How Do I Use It: Non-Drupal
<head> <script type=“javascript” src=“jquery.js”></script> <script type=“javascript”> //your jquery code goes here. go crazy! </script></head>
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/171213
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');}
Yeah, But How Do I Use It?
Writing jQuery
1. Series of statements2. Each statement is usually a 3-step process:
1. Select an element2. 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.”
3-Step Process
1. Select element:jQuery( ‘h2’ )
2. Attach an event:jQuery( ‘h2’ ).click( )
3. Specify what happens:jQuery( ‘h2’ ).click( monkeysFly );
Your Final Statement
jQuery(‘h2’).click( monkeysFly );
$horthand
$(‘h2’).click( monkeysFly );
see example
More Selectors
$(‘input’).click( monkeysFly );$(‘.title’).click( monkeysFly );
$(‘#form1 input’).click( monkeysFly );$(‘#edit-title’).click( monkeysFly );
$(‘h2, h3, .title’).click( monkeysFly );
Monkey Code
Inside script.js:
$('h2').click( monkeysFly );
function monkeysFly() { $('img.monkey').fadeIn('slow');}
Anonymous Functions
$('h2').click( function() { $('img.monkey').fadeIn('slow'); });
Anonymous Functions, 2
$('h2').click(function() { $('img.monkey').fadeIn('slow'); });
Wait ‘Til Browser is Ready
$(document).ready(function() {
$('h2').click(function() { $('img.monkey').fadeIn('slow'); });
});
D6: Wait ‘Til Browser is Ready
Drupal.behaviors.demo = function(context) {
$('h2‘, context).click(function() { $('img.monkey').fadeIn('slow'); });
};
D7: Wait ‘Til Browser is Ready
Drupal.behaviors.demo = { attach: function(context, settings) { $('h2‘, context).click(function() { $('img.monkey').fadeIn('slow'); }); }};
Finding the Right jQuery Function
• Official: http://api.jquery.com/• Handy: http://jqapi.com/
Example: Dynamic Form Components
• Show character count as user is typing?No problem!
Example: Dynamic Form Components
Let’s do this in a modulecountchars.module:
function countchars_init() {$path = drupal_get_path(‘module’, ‘countchars’);drupal_add_js( $path . ‘/countchars.js’);
}
Example: Dynamic Form Components
countchars.js
$(document).ready(function() {
});
countchars.js
$(document).ready(function() { $('#mytext').keyup( function() {
});});
countchars.js
$(document).ready(function() { $('#mytext').after( '<div id="chars">characters: 0</div>' );
$('#mytext').keyup( function() { });});
Chaining
$(document).ready(function() { $('#mytext') .after( '<div id="chars">characters: 0</div>' ) .keyup( function() {
});});
countchars.js
$(document).ready(function() { $('#mytext') .after( '<div id="chars">characters: 0</div>' ) .keyup(function() {
var count = $('#mytext').val().length; $('#chars').html( 'characters: ' + count );
});});
$(this)
$(document).ready(function() { $('#mytext') .after( '<div id="chars">characters: 0</div>' ) .keyup(function() {
var count = $(this).val().length; $('#chars').html( 'characters: ' + count );
});});
Resources• jquery.com -- main site• jqueryui.com -- UI components
Contactamit@returncontrol.com
http://returncontrol.com/badcamp