DrupalCon Chicago 2011 - jQuery Training w/ Lullabot

Schedule:
9:00 - 9:30 - Introductions
9:30 - 10:00 - Sandbox setup
10:00 - 11:00 - What is jQuery
11:00 - 11:30 - Selectors
11:30 - 12:00 - Blocks    
12:00 - 1:00 - LUNCH (Room #350)
1:00 - 2:30 - Login Popup, Disable buttons
2:30 - 2:45 - Cookie Break
2:45 - 4:00 - AJAX
4:00 - 5:00 - Stump the Bots

Preparation:
Make sure you have a Drupal 7 installation locally
Download Firefox (http://www.getfirefox.com)
Download Firebug (http://www.getfirebug.com)

Presentation:
http://lb.cm/ZDT

Example files/code:
Download and un-zip, we will talk about where/how to use them
Javascript files: http://lb.cm/ZDS
Disable buttons: http://lb.cm/ZDN
Quickview: http://lb.cm/ZDc

jQuery API Reference
http://api.jquery.com

Bringing the "$" function into scope:
(function ($) { ..... })(jQuery);

The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript:
http://code.google.com/closure/compiler/

Selectors:
Selecting the node H2 tags:
jQuery('div.node h2');

jQuery('div.node h2').hide();
jQuery('div.node h2').show();

Selecting all the links on the page:
jQuery('a');
jQuery('a').hide();

Toggling links:
jQuery('#main-menu-links').slideToggle();

Event handlers on the menu links:
jQuery('#main-menu-links').click(function() { return false; });

Putting JavaScript into your theme
scripts[] = blocks.js

(function ($) {
  // Code goes here.
})(jQuery);

(function ($) {
  Drupal.behaviors.chicagoBlocks = {};
  Drupal.bebaviors.chicagoBlocks.attach = function() {
    $('#main-menu-links').slideToggle();
  }
})(jQuery);

(function ($) {
  Drupal.behaviors.chicagoBlocks = {};
  Drupal.behaviors.chicagoBlocks.attach = function(context) {
    $('#sidebar-first .block .content', context).hide();
    $('#sidebar-first .block h2', context).click(function() {
      $('#sidebar-first .block .content').slideUp();
      $(this).parent().children('.content').slideDown();
    });
  }; // End attach method.
})(jQuery);

Code after demonstrations:
(function($) {
  
  Drupal.behaviors.chicagoBlocks = {};

  Drupal.behaviors.chicagoBlocks.attach = function(context) {
    $('#sidebar-first .block .content', context).not(':first').hide();

    $('#sidebar-first .block h2', context).click(collapseBlock);

    function collapseBlock() {
      var $block = $(this).parents('.block').find('.content');
      $('#sidebar-first .block .content').not($block).slideUp().addClass('closed');
      $block.slideDown('slower').removeClass('closed');
    }
  }

})(jQuery);

Disable Blocks Module

.info file:

name = Disable Buttons
description = Disables buttons, duh.
package = Example
core = 7.x


.module file: (don't forget the opening <?php)

/**
 * Implements hook_init().
 */
function disablebuttons_init() {
  drupal_add_js(drupal_get_path('module', 'disablebuttons') . '/disablebuttons.js');
}

.js file:


// Cast $ to jQuery object.
(function($) {
  
  Drupal.behaviors.disableButtons = {};
  Drupal.behaviors.disableButtons.attach = function(context) {
    $('.node-form input.form-submit').click(disableButton);

    function disableButton() {
      var $copy = $(this).clone();
      $copy.attr('disabled', true).val(Drupal.t("Please wait..."));
      $(this).hide().after($copy);
    }
  }

})(jQuery);

AJAX Read more

Add scripts[] = readmore.js into the chicago.info file

In the readmore.js file, add the following:

(function ($) {
  Drupal.behaviors.chicagoReadmore = {};
  Drupal.behaviors.chicagoReadmore.attach = function (context) {
    $('li.node-readmore a').click(function() {
      var link = this;
      var href = $(link).attr('href');
      $.ajax({
        url: href,
        success: readmore_success
      });

      function readmore_success(data) {
        var content = $('#content .node .content', data);
        var currentContent = $(link).parents('.node:first').find('.content:first');
        $(currentContent).replaceWith(content);
        $(link).hide('slow');
      }

      return false;
    });
  }
})(jQuery);





Related DrupalCon Sessions:

Crafting App Interfaces w/ jQuery
http://chicago2011.drupal.org/sessions/crafting-app-interfaces-jquery

Drupal on the go w/ jQuery Mobile
http://chicago2011.drupal.org/sessions/drupal-go-jquery-mobile

Drupal 7 Javascript for Developers
http://chicago2011.drupal.org/sessions/drupal-7-javascript-developers

Faster Front End Performance
http://chicago2011.drupal.org/sessions/faster-front-end-performance

Building awesome user interfaces with Drupal 7's Form, AJAX, and Theme systems
http://chicago2011.drupal.org/sessions/building-awesome-user-interfaces-drupal-7-s-form-ajax-and-theme-systems


Post Training Survey: http://www.surveymonkey.com/s/dcctraining