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
* 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)
library as part of Visual Studio 2008 SP1 and the free Visual Web Developer 2008 Express
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.
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 Useful JQuery Plugins
* JQuery Documentation
* JQuery Selectors Reference Card (PDF)