Using JQuery to create tabs to filter lists and libraries

This is one of the Demo's I've been showing in my presentation during the various SharePoint Saturday's I presented at a couple of years ago. It's one of my favourites for a number of reason, but mostly because of the endless possibilities.

The demo can be seen here

The Scenario I’m using is filtering a document library based on the Project. To set this up I’ve created a Projects list (from custom list) and a Document Library with a field called Project, which is a look up to my Project List. Obviously this is a very common thing to do in SharePoint.

I’m using JQuery and SP Services (available from Codeplex) to call the Lists web Service and returning all of the Item in the Projects Lists and displaying them as tabs on the page.

These tabs are clickable and when clicked recall the Lists Web Serices, but this time, they are sending though the title of the tab to build a caml query that the Web Service uses to only return the items in the Document Library that matches the Query.

Very Cool Stuff!