Training: Creating Smarter Interfaces with jQuery and Drupal

Facilitated by Amit Asaravala, ReturnControl.com

Go from zero to 60 with jQuery in just 60 minutes. In this under-the-hood, technical session, Amit will show site producers and developers how to build intuitive and dynamic user interfaces with this popular JavaScript library. The first third of the session will focus on the foundations of jQuery and then we'll transition to walk-throughs of several examples, each one building on the previous. Learners should have basic familiarity with CSS and JavaScript.

NOTES

jQuery is a JavaScript library that makes it very easy to add all sorts of cross-browser-compatible effects to your Web sites, like expanding and collapsing navigation, sortable columns, drag-and-drop objects, AJAX data transfer, etc.

Get the .js file containing the jQuery library from jQuery.com. Get the "minified" production version of the library, which is named jquery-1.2.6.min.js (the version number may change, but note the "min" part.)

To use jQuery in a Web page, include the jQuery .js file like you would any other .js file, via a "script src" call in the "head" section of your document:

 <head>
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
 </head>

Then in a subsequent "script" section, you can start adding your jQuery statements:

 <head>
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   <script type="text/javascript">
     //jQuery statements goes here...
   </script>
 </head>

You almost always want to wrap your jQuery statements in jQuery's $(document).ready() function to prevent the statements from executing until the Web browser has fully loaded the structure of the Web page (which can cause your statements to fail):

 <head>
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   <script type="text/javascript">
     $(document).ready(function() {
       //jQuery statements goes here...
     });
   </script>
 </head>

Usually, a jQuery statement does three basic things: Selects a component of the Web page to operate on (e.g., an element or div represented by an ID or classname); sets an event to listen for; and defines some code for manipulating the component when the event is fired.

In other words: Selector, event, manipulation.

Selectors use the $() function, which is shorthand for the jQuery() function, and take an element, classname, or ID as the parameter:

 $('p')
 $('#mydiv')
 $('.mydivs')
 $('p.myparagraphs')
 $('#mydiv p a')

Events are functions that take another function as a parameter. The other function gets executed when the event happens (is "fired").

 <head>
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   <script type="text/javascript">
     $(document).ready(function() {
       $('p').click(myFunctionName);
     });

     function myFunctionName() {
       //some code here that gets executed when you click on a paragraph
       alert('hey, you clicked!');
     }
   </script>
 </head>

You can use "anonymous functions" instead of an actual named function for a parameter:

 $('p').click(function() {
   //some code here that gets executed when you click...
   alert('hey, you clicked!');
 });

To find out about all the event functions out there (like, hover, onkeyup, etc.) see http://visualjquery.com

Manipulations can be done in several ways, although one of the easiest is to use the css() function:

 <head>
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   <script type="text/javascript">
     $('p').click(function() {
       $(this).css('color', '#f00');
     });
   </script>
 </head>

Note the use of the $(this) shorthand in the anonymous function above. It refers to the $('p') selector.

Another manipulation can be done with the show() and hide() functions:

 <head>
   <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   <script type="text/javascript">
     $('p').click(function() {
       $('#mydiv').hide('slow');  //make #mydiv disappear slowly
     });
   </script>
 </head>

Again, look at visualjquery.com to learn about all the manipulation functions available.

jQuery has plugins -- in particular the jQuery UI plugin lets you do all sorts of fancy stuff with very little effort. For instance, you can create drag-and-drop objects with very few lines of code. See http://docs.jquery.com/UI

Other tutorials: http://docs.jquery.com/Tutorials

Get jQuery UI: http://docs.jquery.com/UI

Drag and Drop Tutorial: http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx

AJAX saving to and from server made easy: http://www.ibm.com/developerworks/library/x-ajaxjquery.html

Training: Creating Smarter Interfaces with jQuery and Drupal

Navigation menu

Search