Back in the Zone with ZoneTabs
I’m back after a long break from posting to announce the availability of a new web part that you may find helpful.
Zone Tabs 2.0 is a new version of a tab web part I previously released on GotDotNet that helps reduce clutter on a web part page by allowing you to attach the other web parts in a zone to tabs. (A web part zone is one of those rectangular areas where you can drop your web parts on a page.) For example, a web part zone might contain 10 web parts, but instead of scrolling to see them all, the user clicks different tabs to show a subset of related web parts at any one time.
As you can see in the screen shot, it’s possible to use more than one set of Zone Tabs on a page so long as they’re each in their own zone. In addition, Zone Tabs can be set up to pivot the web part zone between horizontal and vertical views, a function that is generally performed by developing a new page in Visual Studio or customizing a page in SharePoint Designer 2007. The new version of Zone Tabs requires Microsoft Office SharePoint Server 2007 or Windows SharePoint Server 3.0 to work.
To download the web part as a WSS Solution Package as well as full source code, please visit the new MSDN Code Gallery at http://code.msdn.com/ZoneTabs. The Read Me file explains how to install and set up the web part. This posting will go into a little more information about how I wrote it, and some cool things I learned along the way.
Creating Tabs with CSS
The first thing I wanted to do was to make the tabs look better than they did previously. ZoneTabs 1.0 rendered itself as a table, and used some of the built-in WSS styles; for some reason they didn’t look as good in the new version of SharePoint products, even though the overall SharePoint UI was greatly improved. So I set out to make the tabs look better.
I found a number of blog articles on various ways to create tabs in HTML, and wanted something that was easy and attractive, while also easily adapting themselves to varying lengths of text. I decided on a technique called “sliding doors” which was described on several sites. Basically, the idea is to render the tabs as a bunch of anchor elements within unnumbered list items, such as:
<ul>
<li><a href=”#”>Tab1</a></li>
<li><a href=”#”>Tab2</a></li>
</ul>
When I first saw this I was pretty surprised that list items were being used, but it turns out that it’s possible to override the usual bulleted list using style sheets. The CSS sets the <li> tags to show most of the tab, including the top and one of the sides, and the <a> tag to show the other side. The <li>’s image is as big as a tab could ever be. This is the clever part: since the <a> tag is on top of the <li> tag, the tab edge in the <a> tab overlaps the big image in the <li> tab and thus trims it perfectly to size. For a detailed drill-down, check out David Bowman’s article at http://www.alistapart.com/articles/slidingdoors/; this has one of the clearest explanations.
For ZoneTabs, I re-wrote the CSS to my own needs and generated the tab images myself from scratch. I used a vector graphics program to make these GIANT tabs, including some blended highlights for a 3-D effect, which I converted to bitmaps (.gif files) that were much smaller and anti-aliased. Then I sliced off the edge to make two images, each of which I extended until they were big enough to handle an 800×800 pixel tab. Eventually I had an HTML page with nice extensible tabs on it, in four color sets (light and dark in blue, black, gray and gold). This was pretty tedious, I have to admit.
Vantage Point – Bob German’s WebLog : Back in the Zone with ZoneTabs
Random Posts
Loading…