Sharep10nt

All About SharePoint 2010/2013

  Home  |   Contact  |   Syndication    |   Login
  23 Posts | 0 Stories | 0 Trackbacks

News

Exploring SharePoint 2013 Online

Developing Nintex Workflows

Exploring SharePoint 2013

Acquired MCPD : SharePoint 2010 Developer

Share on Facebook

Archives

Easy Tabs is a 3rd party javascript library that allows site designers to place webparts in a tabbed format on a page. It is Pure Javascript. Doesn't require JQuery/ JQueryUI libraries to work. Because of layout/element changes in SharePoint 2013, the current version will not work as it is.

I debugged the code and fixed it. Now it works well in SharePoint 2013!

Easy Tabs on SharePoint 2013

Well, implementation is simple.
  1. Copy the code below and save it as .txt file. (Or download the htm code file directly from URLs given in bottom of this article.)
  2. Upload the txt file to SharePoint site -> Site Assets library.
  3. Open the page where you want to have tabbed webparts.
  4. Edit the page and add Content Editor Webpart on bottom in Same Webpart Zone. (Note: The code will create tabs with WebParts only on same webpart zone.)
  5. In Content Editor Webpart properties, the set/enter URL for .txt file (which uploaded on Site Assets Library.) on "Content Link" property.
  6. Expand "Layout" section on the Content Editor webpart and enable/check "Hidden" option. If "Hidden" option is disabled then set "Chrome Type" property (under​ Appearance section) to "None".
  7. Click "OK" to save changes of webpart properties.
  8. Save the page and publish(If enabled).
  9. Refresh the page to see EasyTabs in Action​.
You can change the color codes in below CSS style section to match with your site theme.

Disclaimer: Easy Tabs code developed/licensed by Christophe Humbert. I just fixed it to work in SharePoint 2013.
http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx

-------------------------------oOOo.............................. /.\_/.\..............................oOOo..............................


<!-- Code Start Here -->
<!-- 
File Name : EasyTabsv5_SharePoint2013.txt
Description : Code to Create Tabs of WebParts in SharePoint 2013.
Date : 4:02 PM 5/20/2015
Author : Venkatesh R
-->
<style type="text/css">
.et-tab{font-size:8pt;font-weight:bold;padding:3px 10px;background:url("/_layouts/images/selbg.png") repeat-x;display:inline-block;cursor:pointer;}
.et-activetab{background-color:#ffa83f;border:solid 1px #ffa83f;color:#351f01;}
.et-inactivetab{background-color:#bcc7f2;border:solid 1px #bcc7f2;color:#585384;}
.et-separator{height:5px;background-color:#ffa83f;}
.et-tabrow{white-space:nowrap;}
.et-offscreen{position:absolute;max-height:1px;max-width:1px;top:-9999px;}
</style>
<script type="text/javascript">
/* Easy Tabs v 5.0 * Copyright (c) 2009-2010 Christophe Humbert * http://www.pathtosharepoint.com */
/* Updated for SharePoint 2013 by Venkatesh R. */

function isEditMode()
{
var boolPageInEditMode = false;
// Check page is in Edit/Design Mode or not.
if(document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode != null)
{
var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1")
{
boolPageInEditMode = true;
}
}
if(document.forms[MSOWebPartPageFormName]._wikiPageMode != null)
{
var wikiInEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (wikiInEditMode == "Edit")
{
boolPageInEditMode = true;
}
}

return boolPageInEditMode;
}

(function () {
    var AP = "",
        sec = 0,
        Header = "none",
        Split = "No",
        Expand = " Expand All ",
        Print = "";
    if (isEditMode() == true) {
        return;
    }
    var el = document.getElementsByTagName("SCRIPT"),
        p = el[el.length - 1],
        sT, a, sep, tabRow;
    do {
        p = p.parentNode;
        sT = p.innerHTML.split("MSOZoneCell_WebPart");
    } while (sT.length < 4 && p.parentNode.id != "DeltaPlaceHolderMain")
    if (p.getAttribute("contenteditable") == "true") {
        return;
    }
    if (p.nodeName == "DIV") {
        sep = document.createElement("div");
        p.insertBefore(sep, p.firstChild);
        tabRow = document.createElement("div");
        p.insertBefore(tabRow, p.firstChild);
    } else {
        sep = document.createElement("td");
        var sepTR = document.createElement("tr");
        sepTR.appendChild(sep);
        tabRow = document.createElement("td");
        var tabTR = document.createElement("tr");
        tabTR.appendChild(tabRow);
        if (p.nodeName == "TBODY") {
            p.insertBefore(sepTR, p.firstChild);
            p.insertBefore(tabTR, p.firstChild);
        } else if (p.nodeName == "TR") {
            p.parentNode.insertBefore(tabTR, p);
            p.parentNode.insertBefore(sepTR, p);
        } else {
            return;
        }
    }
    sep.className = "et-separator";
    tabRow.className = "et-tabrow";
    var children = p.childNodes;
    p = p.parentNode;
    var etRoot = [],
        etHeader = [],
        etTab = [],
        tabsID = [];
    for (var j = 0; j < children.length; j++) {
        try {
            var d = children[j].getElementsByTagName("div");
            for (i = 0; i < d.length; i++) {
                if (d[i].id.indexOf("_ChromeTitle") > 1) {
                    var WPid = d[i].id.replace(/_ChromeTitle/, "");
                    WPid = WPid.replace(/WebPart/, "");
                    if (d[i].innerHTML.indexOf("(Hidden)") == -1) {
                        var up = d[i];
                        while (up != children[j]) {
                            if (up.parentNode.innerHTML.indexOf('id=WebPart' + WPid + ' ') >= 0 || up.parentNode.innerHTML.indexOf('id="WebPart' + WPid + '" ') >= 0) {
                                WPid = "et" + WPid;
                                etHeader[WPid] = up;
                                etRoot[WPid] = children[j];
                                
                                var spanWebPartTitle = document.createElement("span");
                                spanWebPartTitle.innerHTML = '<span style="text-align:justify;" class="ms-webpart-titleText">' + getText(d[i].getElementsByTagName("span")[0]) + '</span>';                                
                                etTab[WPid] = spanWebPartTitle;
                                etTab[WPid].id = WPid;
                                etTab[WPid].className = "et-tab et-inactivetab";
                                etTab[WPid].onclick = function () {
                                    activateTab(this);
                                };
                                tabRow.appendChild(etTab[WPid]);
                                tabsID.push(WPid);
                                break;
                            }
                            up = up.parentNode;
                        }
                    }
                }
            }
        } catch (e) {}
    }
    var Tabs = tabRow.getElementsByTagName("span"),
        TabCount = Tabs.length;
    if (Split == "Yes") {
        var sd = document.createElement("div"),
            index = Math.floor(TabCount * 0.5);
        tabRow.insertBefore(sd, Tabs[index]);
    }
    if (AP.length && sec > 0) {
        sec = sec * 1000;
        interval = "";
        a = document.createElement("span");
        a.innerHTML = "|>";
        a.className = "et-tab et-inactivetab";
        a.onclick = function () {
            if (interval == "") {
                this.innerHTML = "||";
                interval = window.setInterval(function () {
                    Autoplay();
                }, sec)
            } else {
                this.innerHTML = "|>";
                window.clearInterval(interval);
                interval = ""
            }
        };
        tabRow.appendChild(a);
        var Autoplay = function () {
            for (i = 0; i < TabCount; i++) if (Tabs[i].className == "et-tab et-activetab") {
                var j = (i + 1) % TabCount;
                activateTab(Tabs[j]);
                break
            }
        };
        if (AP == "Play") {
            a.innerHTML = "||";
            interval = window.setInterval(function () {
                Autoplay();
            }, sec)
        };
    }
    if (Expand.length) {
        a = document.createElement("span");
        a.innerHTML = '<span style="text-align:justify;" class="ms-webpart-titleText">' + Expand + '</span>';
        a.className = "et-tab et-inactivetab";
        a.onclick = function () {
            for (i = 0; i < tabsID.length; i++) {
                etTab[tabsID[i]].className = "et-tab et-inactivetab";
                etRoot[tabsID[i]].className = etRoot[tabsID[i]].className.replace(/et-offscreen/g, "");
                etRoot[tabsID[i]].style.pageBreakAfter = "always";
                etHeader[tabsID[i]].style.display = "";
            }
        };
        tabRow.appendChild(a);
    }
    if (Print.length) {
        a = document.createElement("span");
        a.innerHTML = Print;
        a.className = "et-tab et-inactivetab";
        a.onclick = function () {
            this.style.display = "none";
            var f = document.getElementById("s4-workspace") || document.getElementsByTagName("body")[0],
                ed = p.parentNode.insertBefore(document.createElement(p.nodeName), p);
            f.appendChild(p);
            for (j = 0; j < f.childNodes.length - 1; j++) {
                try {
                    f.childNodes[j].className += " et-offscreen";
                } catch (e) {}
            }
            a = document.createElement("span");
            a.innerHTML = "Back to Page";
            a.className = "et-tab et-inactivetab";
            a.onclick = function () {
                this.previousSibling.style.display = "inline-block";
                this.parentNode.removeChild(this);
                ed.parentNode.insertBefore(p, ed);
                ed.parentNode.removeChild(ed);
                for (j = 0; j < f.childNodes.length; j++) {
                    try {
                        f.childNodes[j].className = f.childNodes[j].className.replace(/\s*et-offscreen/g, "");
                    } catch (e) {}
                }
            };
            tabRow.appendChild(a);
        };
        tabRow.appendChild(a);
    }

    function activateTab(t) {
    if(t != null)
    {
       document.cookie = tabsID.join("_") + "=" + t.id + ";path=/";
       for (i = 0; i < tabsID.length; i++) {
           etHeader[tabsID[i]].style.display = Header;
           if (t.id == tabsID[i]) {
               etTab[tabsID[i]].className = "et-tab et-activetab";
               etRoot[tabsID[i]].className = etRoot[tabsID[i]].className.replace(/\s*et-offscreen/g, "");
           } else {
               etTab[tabsID[i]].className = "et-tab et-inactivetab";
               etRoot[tabsID[i]].className += " et-offscreen";
           }
       }
        }
    }
    var m = GetCookie(tabsID.join("_")) ? GetCookie(tabsID.join("_")) : tabsID[0];
    activateTab(etTab[m]);
})();


//Get InnerText or TextContent
function getText(objElement)
{
var strText = "";
if(objElement != null)
{
if(document.all)
{
    strText = objElement.innerText;
else
{
   strText = objElement.textContent;
}
}
return strText;
}

</script>
<!-- Code Ends Here -->

<!-- 
Copyright (c) 2009-2012 Christophe Humbert

 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
 files (the "Software"), to deal in the Software without
 restriction, including without limitation the rights to use,
 copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the
 Software is furnished to do so, subject to the following
 conditions:

 The above copyright notice and this permission notice shall be
 included in all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.
-->

-------------------------------oOOo.............................. /.\_/.\..............................oOOo..............................


If above code doesn't work, Download from here :
http://justpaste.it/easytabsv5
http://jsfiddle.net/venkatx5/q3pjLvp7/

Happy Coding!
posted on Thursday, May 21, 2015 10:50 AM

Feedback

comments powered by Disqus