Tuesday, May 18, 2010

jQuery Demonstration

After a slight *cough* gap since my last post, I figured I should at least come up with something potentially useful to people this time.

Having just started a new role working on a bespoke ASP.NET application, I thought I'd push the case for introducing jQuery into the codebase to help with any client-side requirements. I was asked to give a presentation it to the dev team to get their views, so I spent today coming up with a self-contained demo, using jQuery itself.

I'm by no means a jQuery expert - I've essentially read half a book on the subject and slideToggle()d a couple of <div>s before - but I came up with the rest of it in less than a day, which probably says at least a little about how easy it is to get to grips with.

Anyway, without further ado... I present my short and sweet jQuery Demonstration. A couple of points to note:
  • You step through the demo by clicking the "jQuery" title at the top of the page;
  • You can click on the first grey markup block at any point to update it to show the current structure of the DOM;
  • When you get to the Gallery part, once the click handler has been attached to load the gallery HTML in the background, do actually click the Gallery header to load it before clicking the main jQuery title to get to the next (and final) step!