by Oscar
19. February 2010 21:29
It has been a while since my last post, my apologies. But hey that is a good thing it only means I have been busy with billable work :)
Anyway, I thought I’d share this cool implementation of jQuery Tabs that allow a user to update tab content for each tab. I am using the jQuery plug-in for accessible, unobtrusive tabs found at http://www.stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/
A recent project called for the ability to use a “tab interface” that would have the following functionality:
- Do not refresh entire page when clicking on tab
- Allow non-technical users to update content on each tab
And of course, I quickly realized jQuery was the right tool - plus combine that with SharePoint WebPart Zones to allow users to add content to said Tabs…all good!
Here is what my solution looks like.
DISCLAIMER: I should tell you, in order to have new pages with the Tabs Feature, you do need the SharePoint Designer 2007 (um, yes not thoroughly accepted by all yet to me, it is the army swiss knife in the SharePoint Realm)
SOLUTION DETAILS
Basically, for each Tab you drop a WebPart Zone in a custom Layout Page. Via the browser, the user simply drops a Content Editor WebPart and that is all!
NOTE: Nothing prevents one to add any type of WebPart….think of the possibilities :)
FIGURE 1 – jQuery Tabs Interface using WebPart Zones to allow non-tech user add content
FIGURE 2 – Tabs Page in edit-mode
Notice the rounded corners??? Um yes that would be also a jQuery plug-in by Mike Alsup
(http://jquery.malsup.com/corner/)
And that does it! Hope this helps you in brainstorming solutions when using jQuery and SharePoint!
-Oscar
Subscribe