WP Tabify: Transform a SharePoint Web Part Zone into Tabs
I do quite a bit of design and implementation on the SharePoint platform. Today, I created a very handy little script that I think might be something worth sharing. I don’t often post anything so specific on my blog, but I found this to be extremely useful, and I hope you do too.
What is it?
This all started with a great idea from the mind of Matthew Koon. If you’re not familiar with SharePoint, one thing you can do in the platform is place web parts on a page, which are akin to sidebar widgets in WordPress or other CMS platforms. Web parts have a lot of nifty drag-and-drop functionality, but the appearance of them is pretty much limited to what you can do with a bit of CSS and maybe some background images. The script that I created transforms a particular “web part zone,” which contains individual web parts, into a jQuery UI tab control. For each web part in the zone, you see an interactive “tab” instead of a boring static box. The contents of each tab is the contents of the web part, itself.
What does it do?
When you’re editing a page, you’ll see this:
When you publish the page, you’ll see this:
1. Attach Required Scripts
You’ll need both jQuery 1.4.2 and jQuery UI 1.8.5 (or later).
2. Attach the Script
3. Wrap Your Web Part Zone
In your custom page layout, place a
<div/> tag around a web part zone, and give it a class name or ID of your choosing.
4. Run the Script
Now that you’ve attached the script, run it using a jQuery selector that matches the
5. Add Some Style (Optional)
You may choose to add a bit of style to your newly tabified web parts (this is not specific to this plug-in, these are just some generic jQuery tabs styles):
This has been tested in SharePoint 2007 and SharePoint 2010. Make sure to set your web part chrome to anything other than None, as my script relies on the web part title to display the tab title. Please let me know if you have any issues, as I will continue to update the script as needed. Good luck, and happy tabbing!