From jQuery JavaScript Library

All tutorials should be unobtrusive; emphasize unobtrusiveness in everything

(List initially compiled by John, Yehuda, and Remy via Subethaedit on Dec. 30th)

General

• Beg Introduction to jQuery Best Practices
  • jQuery onload/ready/$(function)... why you should wait.
  • How the jQuery object works
  • The "Find Something"/"Do Something" philosophy
• Beg Using Chaining to write more efficient code
  • Show examples of normal statements turned into simpler code
  • Show how $('<...>') can be used effectively
• Beg Object-oriented coding w/ jQuery
  • Show how to build your own objects and clone objects w/ $.extend()
• Int Using closures with jQuery
  • Using it for a basic animation interaction
  • Using it for an Ajax interaction
• Beg Using jQuery with other JS frameworks (like Prototype)
  • Really simple; just talk about the jQuery namespace
  • Also talk about $$ and jQuery (speed concerns)

Selectors

• Beg "There's more than one way to do it."
  • Show how different things can be selected in different ways
  • Show a large variety of selectors, grouped by function
  • Optimizing jQuery expressions.
• Beg Some advanced selectors you may not know about
  • jQuery specific selectors
  • Non-standard selector plugins
• Int Building Your Own Filtering Expressions
  • Start with using .filter(fn)
  • Move into building your own :foo selectors
    • Good tutorial here: http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/
  • Show some plugins that do this
• Adv Build your own selectors
  • Show how to build your own parse expressions
  • How to make a custom token

Standardizing CSS

• position: fixed
• min-*, max-*
•  :hover
• png transparency
• multiple backgrounds
• borders w/ images

Tables

• Building an Interactive (Add/Remove) Table (and List)
• Zebra Table Striping with jQuery
• Tablesorter
• Manipulating Tables (removing columns, adding rows)

Forms

• Ajaxifying your Forms (unobtrusively)
• Using the forms plugin
• In-place form editing
• Replacing form widgets (checkboxes/select boxes)

Images

• Rollover Images

/*

hide rollover image in hidden div
swap src attributes

• /

1. Hide rollover target in hidden div: <style> #imgpreload{display:none;} </style>

  <img src="rl.gif" id="rl" width="160" height="21" />

2. Insert normal inline image tag:

<img src="up.gif" id="up" width="160" height="21" />

3. Method for swapping img src:

var doRollOver = function(id1,id2){

var upSrc = $("#"+id1).attr("src"); var rlSrc = $("#"+id2).attr("src");

var rl = function(){

 ($("#"+id1)).attr("src",rlSrc);

}

var up = function(){

 ($("#"+id1)).attr("src",upSrc);

}

$("#"+id1).mouseover( function(){

 rl();

});

$("#"+id1).mouseout( function(){

 up();

});

};

4. Onload event: $(document).ready(function(){

 doRollOver('up','rl');

});

Events

• Binding an event
• Unbinding an event
• Binding an event for a single use (e.unbind())

Ajax

• Loading data from a server (HTML, JSON, XML)
  • Navigating/manipulating subsets of the DOM (i.e. passing $('img', xml))
• Ajax shopping cart
• Live search
• File uploads
• Using the History plugin (to create fake history and bookmarks)
• Using Modal Dialogs for Ajax Interaction (Thickbox/Window plugins?)
• Blocking user input during asynch Ajax (blocker plugin)
• Using Ajax with different server-side frameworks
  • RoR
  • PHP
  • Perl
  • Cold Fusion
  • Django
  • ASP.NET

Cookbook

• Accordion (w/ Accordion Plugin)
• Tabs (w/ Tabs Plugin)
• Drop down menu (with Suckerfish plugin)
• Drag and drop (interface?)
• Tooltips (w/ jTip or others)

Plugins

• Writing Plugins (Intermediate)
• Plugin-specific parameters (Advanced)
  • Chaining (return this.each)
  • Setting/Modifying Options
• How to use:
  • Tablesorter
  • Interface
  • Thickbox
  • Tabs