Tabs Source Code

For an overview of tab functionality in portals, please see Portal Tabs.

In the portal view, tabs are added to the Source as list items (<li></li>) in an unordered list (<ul></ul>). The <ul> element has a class attribute with a value of subtabs. element has a class attribute with a value of subtabs.

<ul class="subtabs">
<li>
<a data-tab="home" href="#">Home</a>
</li>
<li>
<a data-tab="volunteers" href="#">Volunteers</a>
</li>
<li>
<a data-tab="events" href="#">Events</a>
</li>
</ul>

Each individual list item itself contains an anchor () element, which displays the name of the tab. Each element also has data-tab attribute values that correspond to that particular tab method's action. 

JavaScript allows the contents of a tab (via its associated method) to render on the page: 

<script type="text/javascript">/*<![CDATA[*/ var loadTab=function(tab, isBack){
if (!isBack) history.pushState(tab, null, "?tab=" + tab);
$("a[data-tab]").removeClass("active");
$("a[data-tab='" + tab + "']").addClass("active");
FW.Lazy.Fetch("?cmd=" + tab, $("#content_body"));
};
window.addEventListener("popstate", function(e){
  if (e.state) loadTab(e.state, true);
       else history.back();
 });
$("a[data-tab]").on("click", function(){
loadTab($(this).data("tab"));
return false;
});
var qs = FW.decodeFormValues(location.search.substring(1));
if (qs["tab"]) loadTab(qs["tab"]);
else loadTab("home");
/*]]>*/</script>

The following image shows the resulting HTML for the page:

The tabs (i.e.<ul> element) are nested within a parent div element with a class of part, as well as an ID that consists of part plus a hexadecimal string.

The active class is added to the current tab being viewed, i.e. the Home tab by default upon first entering the portal, or the tab that is clicked on. 

On a rendered portal page, the HTML, as well as any existing CSS, can be viewed in-browser, typically by right-clicking the element and selecting "Inspect Element" or opening the browser's Developer Tools.