This is the Intro to jQuery session I presented at the 2012 Western Mass Drupal Camp. There’s a video of my presentation above, and below you’ll find the content of my slideshow. Enjoy! Included with every Drupal distribution since Drupal 5 is jQuery, a lightweight javascript library used by millions of websites for a wide range of purposes. This session will cover the basics of how and when to use jQuery in Drupal, along with some useful resources to enable attendees to take full advantage of jQuery’s capabilities. The target audience for this session is the Drupal beginner who has maybe heard of jQuery before, is comfortable with creating and/or modifying custom themes and copying and pasting snippets from others, and wishes to become more independently skilled.
Overview
- What is jQuery?
- Selectors
- What you can do
- jQuery + Drupal
- Adding plugins
- Demo Time
jQuery is neither j nor query. Discuss.
What is jQuery
JavaScript Library - pre-written JavaScript that allows for easier development.
In JavaScript:
var box = document.getElementbyID(‘page-title’);
box.onclick = function () {
fadeOut(this);
}
In jQuery:
$(“#page-title”).click(function() {
$(this).fadeOut();
});
Who Uses It
- Dell
- Bank of America
- Major League Baseball
- Digg
- NBC
- CBS
- Netflix
- Technorati
- Mozilla
- Wordpress
- Drupal
Selectors
- $() = jQuery()
- $(“h1”).find();
- $(“h1:not(:first)”);
- $(“#page-title .content”);
What You Can Do
- .hover()
- .click()
- .load()
- .fadeOut()
- .animate()
- .css()
- .height()
more at more at http://api.jquery.com
jQuery + Drupal
- Included with Drupal since Drupal 5
- Drupal 7 - jQuery 1.4.4
- Drupal 6.3 uses jQuery 1.2.6
- Drupal 7 also includes jQuery UI 1.8.7
- adds additional functionality
- not included with Drupal 6
Drupal.behaviors - The Drupal way
(function($) {
Drupal.behaviors.nameOfBehavior = {
attach: function(context, settings) {
$(“selector”, context).bind(function() {
do stuff
});
}
}
})(jQuery)
Resources
- Tools:
- Drupal code - /misc/drupal.js
- Query API - http://api.jquery.com
- Drupal Documentation - https://www.drupal.org/node/756722
- jQuery Plugins site https://www.drupal.org/node/756722>
- Introduction to jQuery - DVD from Lullabot
- History:
- Official history page - http://jquery.org/history
- Original blog post - http://ejohn.org/blog/selectors-in-javascript
- jQuery inspiration - http://bennolan.com/behaviour
Plugins
- Adds additional functionality
- Some really cool plugins/ plugin-driven modules
- nivoSlider
- Beauty Tips
- Naked Password
- SuperFish
