« Banner with Quick Access to Search a SP2010 List | Main | The Cheapskate's Guide: Extending SP 2010 Functionality »
Wednesday
Apr032013

Metro-Style Easy Tabs for SharePoint 2010

This is an item I flashed a development iteration of to the group in my Richmond SharePoint Saturday presentation and have since cooked up what is called 'V2' of the effort but is really the first version that I've made available. This approach just simplifies the initial version by making the tile's images all the same, though I did add a dynamic element to the colors. I'm not yet sure if that is a good idea, so I have instructions below to turn that off if you'd like. This is all based on the brilliant client-side Easy Tabs script that I just modified and simplified for the new visual style.

You can deploy these as you would 'normal' Easy Tabs for SP, my instructions for using the original script are here though you'll want the new code as it is not in that package:

Want to kill the random tile colors? Yeah, can't say I blame you...

Edit line #108 in the file from this:

var colorNumber = 1 + Math.floor(Math.random() * 9); // random start 1-9

to this (where the '1' can be any number from 1 to 9) :

var colorNumber = 1;


I may make more versions of this, including one allowing for a single color for the tiles.  Let me know if there is a feature that you might like that I should consider.  I'm not sure yet how to reliably incorporate custom images per tab (that make sense to the tab's context) without the end user editing the script and violating the plug and play goal here.

This version looks like the above screenshot with both a hover effect and a visualization for selected items.  Over-n-out.

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (16)

Kevin, are you sharing the solution that includes the ability to different images for each tab?

June 27, 2013 | Unregistered CommenterTB

Here is a working version but it requires tweaking to specify what image you want to show for which web part. You'll have to edit the first line in the .txt file to point to where ever the CSS file is located (has to be fully qualified, not a relative url). After that you have to add entries to the CSS file for each image that you want to use as a tile and then add to the CASE statement in the .txt script file to select the proper image based on the exact tab name. Not as user-friendly as I'd prefer but not too bad. I'll write this up as a full entry before long. Here is the zip - Metro Tabs V3.

June 27, 2013 | Registered CommenterKevin

Thank you for V3! Your RSUG presentation was very inspirational. Thanks for sharing your work!

June 27, 2013 | Unregistered CommenterTB

Many SharePoint customers invest too enough time on the experience and look of SharePoint over getting the structure right in the first position.

July 8, 2013 | Unregistered CommenterHamish Terry

Hey, is it possible to make the tabs clickable? currently, only the text is clickable

December 8, 2013 | Unregistered CommenterAlec

Hi Alec, I'm seeing something different than you are. I tried IE 7-10 as well as Chrome and the full tab is clickable for me, what browser are you using?

December 16, 2013 | Registered CommenterKevin

Is there an updated code for SharePoint 2013? I am using SharePoint 2013 Online.

February 19, 2014 | Unregistered CommenterScott

Is it possible to change the direction of the arrows after someone click the tile? That way the arrow points down so users have some indication of where to look?

March 13, 2014 | Unregistered CommenterKass

Is there any plans to add a version for SharePoint Online 2013?

March 14, 2014 | Unregistered CommenterScott

Hey Scott, I plan to get this revved for 2013 but don't have a working instance of 2013 here yet to start coding against. The metro tabs code is a modified version of the EZ-Tabs widget that has been on the net for a few years, I'm unsure if it works in 2013 yet... If it does then this should be a pretty easy modification, if not it may be because MSFT changed the way they render the web parts and it may take longer.

Either way, once we get an instance of 2013 up and running this is the first port I get working on and will post something here when I do. =)

March 28, 2014 | Registered CommenterKevin

Hi Kass, that is a great idea. Below is a link to a version that does just that. The only difference (in case you've modified your version already) is that I replaced line 62, the background css for metroTabs_Selected.

Down-Arrow Metro Tabs

//Kevin

March 28, 2014 | Registered CommenterKevin

Kevin, thanks for the update! That worked great!

April 16, 2014 | Unregistered CommenterKass

Hello Kevin,

Great code! i use it and it works like a charm!

One question is it also possible to edit the target frame? Instead of opening the library(s) under the tabs opening it in a new window?

April 30, 2014 | Unregistered CommenterJos

Add this at the end of the code to move the webparts under the boxes.


$(document).ready( function() {

$('.et-tab-me2').each( function() {

var webpartID = $(this).attr("id").match(/[\d]+$/);
var fullWebPart = "#MSOZoneCell_WebPartWPQ" + webpartID ;
var position = $(this).position( );
var leftPosition = position.left + "px" ;
$(fullWebPart).css('padding-left', leftPosition);
}) })

This works will when displaying a list of links below the boxes.

November 11, 2014 | Unregistered CommenterDustin

Hi Kevin, this is a great feature and I use it all the time at my office. Quick question (and please bear in mind I know almost nothing about code) is there an easy way to modify the Current/Rollover/Selected colors on the arrow icon? If I were able to locate the hex code in the HTML, I'd be capable of swapping in a different hex code. Any help? Thanks!

June 9, 2015 | Unregistered CommenterStephan

Hi Kevin,

Hopefully you can see my message. I used your code it is very helpful and it look very nice, but I am struggling with making the tabs on multiple rows, is there a way I can do that?

Thank you very much in advance,

Alina

September 20, 2016 | Unregistered CommenterAlina

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>