I'm one of those people who completely reverted to server-side programming when confronted with the cross-browser compatability minefield in the late nineties. As part of the delusion, I convinced myself that browsers would eventually become fully object-oriented and that somehow justified my inertia. But over the past two years I have been stockpiling the JavaScript textbooks and had even started in on the basics... but let's face it, the JavaScript syntax, although flexible, is not the sexiest of creatures.

I recently introduced a JQuery menu into a website I am working on. Getting it working along with Visual Studio intellisense was a snap. It was only when I looked at the markup and the way that JQuery was interacting with the document elements that I experienced that well known "light goes on" moment.

JQuery used CSS3 (for the most part) selectors to reference the various document elements and totally abstracts away the browser incompatabilities of old. Wow! Now I blogged about JQuery before but my excitement then was mainly based on the VS intellisense available. I did not quite "get it". This library was the brainchild of John Resig and I'm now convinced that lowering the barrier to entry to this extent will bring a lot of creative server-side developers into the the RIA arena just when they are needed the most.

To get started, look at some of the basic tutorials and work through them. If you are using VS 2008 (or the Web Express version), then follow Scott Guthrie's steps for getting intellisense working in VS 2008; I installed the KB hotfix he mentions and dropped the vsdocs file into my js folder along with the JQuery library files and had no problems - very easy to do :-)

I came across a really slick menu on the Queness website and have adapted it to work with a regular ASP.NET master page. A download link to a working Web Application Project for this is provided below. The only thing I don't like is that the tab graphic has both the hover and non-hover images stacked one over the other in the same image. I would opt to change this by separating them out into separate files and update the CSS accordingly - examples of these menus are everywhere so you shouldn't have a problem with that. You can have it so that each menu tab will accomodate a text link with a different hover version. The key with this sample is making sure that the selectors in the markup match those referenced in the CSS and in the script.

Notes: JQuery Menu Sample with Master Page

  * 2.0 Web Application Project Template

  * Based on Queness menu but with 1.3.2 version of library and vsdocs added

  * CSS and markup have been tweaked to work with master page

  * Rounded corners have been commented out in markup as they looked pixelated - fixable

  * Change the hover background color for vertical links by altering script default of #888 

Resources

   * Check the original menu along with demo here.

   * Be sure to check out the JQuery UI Website!

   * What every developer should know about JQuery 

   * JQueryMenu.zip (115.39 kb)

Scott Guthrie has just announced that Microsoft is going to include the JQuery JavaScript library as part of Visual Studio 2008 SP1 and the free Visual Web Developer 2008 Express SP1. JQuery is has quickly become the most popular JavaScript library out there, despite the competition and weighs in at only 15KB.

On the face of it, this is an unprecedented move by Microsoft. Nobody would have even dreamed of seeing an open source project being adopted by the Big M... exciting times! They are going to make it an integral part of their own framework and build upon it in the shape of controls for the ASP.NET AJAX Control Toolkit and new Ajax server-side helper methods for ASP.NET MVC.

My achilles heel as a developer has always been my limited knowledge of JavaScript but I recently took steps to immerse myself in it. Having JQuery to build upon is like getting Christmas early and should provide some great fun and excitement over the coming few years as we start to construct richer and more creative Web experiences.

Some JQuery Resources:

    * 10 Smart JavaScript Techniques
    * 10 Useful JQuery Plugins
    * Comparing Popular JavaScript/AJAX Frameworks
    * JQuery Documentation
    * JQuery Selectors Reference Card (PDF)