Sunday, April 18, 2010

SharePoint Tab Web Part JQuery, Java, and CSS

I have been searching for a simple tab web part for SharePoint but mostly came up empty handed… I was looking for something that a user can easily drag and drop a web part onto a specific tab within the page. There are quite a few free tab web parts out there but most of them were not just quite what I wanted. I checked out the following Tab web part solutions.

  1. Easy Tabs: From Path To SharePoint
    • Pro: The tabs automatically take the name of the web part.
    • Con: There is no option to add more than one web part per tab, and the User Interface is not that intuitive.
  2. Zone Tabs: From MSDN
    • Pro: You have a lot of options for tab customization
    • Con: It’s a web part that you have to install on the server. From what I remember it’s not that easy to re-arrange the web parts on the page.

I finally found this article from Bits Of SharePoint Site:
http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx

His code was exactly what I needed. All I had to do was make a few adjustments of the HTML and create my own tab styles. The process to get this to work is you simply edit the page layout in the source link below (Code is already included in header control) and change the name of the tabs to what ever you want. You can have as many tabs as you want but if you go over 8 you will need to add more web part zones.

<li><a href="#tab-1" class="selected"><span>Tab1</span></a></li>
<li><a href="#tab-2" ><span>Tab2</span></a></li>
<li><a href="#tab-3" ><span>Tab3</span></a></li>

Once you have your tabs specified, simply choose what design you want. I created a few example designs that will get you started. To change the designs simply remove the commented out referenced style sheet and comment out the one you don’t want. You can place the support files anywhere you want but the links in the page layout point to the 12 hive: /_layouts/1033/styles/tabstyles/

For inspiration, I looked around the web and found a few unique styles that I wanted to replicate, and I also came up with a few of my own. Please download the Source Files HERE and give it a try!

Design 1: MSN
msntab

Design 2: Yahoo
yahootab

Design 3: WebMD
webmdtab

Design 3a: WebMD Alt
webmdalttab

Design 4: Rounded Tabs 1
roundtab

Design 5: Rounded Tabs 2
round2tab

Drop me a comment if you found this useful!

Sunday, April 11, 2010

Finally Passed the 70-631 Microsoft Certification!

It’s been a rough road getting this certification but I have officially passed both the MCTS 70-630 and 70-631 Microsoft Certification!

MCTS(rgb)_530_529

Friday, April 2, 2010

Thank you Visio 2010!

I have been working with Visio 2010 for a while now and I have to say that I am really happy the new features.

I do all of my wireframes in Visio. These can be from 10-40+ pages. I used to struggle with duplicating pages in the past but now there is this great feature similar to how PowerPoint works. If you copy an object and past it on another page it places it in the same horizontal and vertical location from where you copied if from. In the past I had to create a temporary box and place it in the upper left corner of the page > copy both objects > paste those objects on another page and then line the temp. box back up in the upper left corner…

I feel like I am in one of those Windows 7 Commercials. “I had this vision one day of Copying and Pasting an object and having it paste into the same location on another page. The next thing I know Microsoft released Visio 2010. I’m a PC and Visio 2010 was my Idea…”

This not only works going from page to page but from one Visio document to another.

Here is a quick illustration to demonstrate this simple but time saving feature.

Page 1: Original Image Location
image

Page 2: Same Pasted Location
image