Tabs / MemTabs

A tabs component which allows grouping objects in tab pages.

You have to pass the title and content panes as parameters to the tabs component. There is currently a limitation of fifty panels. Only panels which have both a title and content parameter block are displayed, however the indexes do not need to be sequential (hence the need for a limit).
You can specify a "titleIcon" parameter block which allows display a icon (or something else) on each tab.
Parameter "exclude" allows to skip rendering of specified tab indicated by it's index. Negative "exclude" value will remove last N tabs;
The currently selected pane is remembered between requests.

  • For the Tabs component this is done via a cookie that is identified by the component's id. This implies that tabs components with the same id on different pages will share this cookie. If this is not wanted than each tabs should get a unique id, even if they are on different page, or use MemTabs.
  • For the MemTabs component the state is persisted in the session and updated using an ajax request when you change tab.

Using "contentAll" it is possible to have a banner displayed at the top of each tab page.

The component has some built in features to function well in combination with the FormTraversal component. Specifically, moving between the fields on the form (using tab or enter) will also traverse to the next ir previous tb page when needed. You probably want to use CSS to hide the links which accomplish this.


<span t:type="equanda/Tabs" t:id="tabs" t:exclude="-1">
<t:parameter name="title1">First title</t:parameter>
<t:parameter name="content1">
<p>This is the content for the first tab</p>
<p>With some more text</p>
</t:parameter>
<t:parameter name="title2">Another title pane</t:parameter>
<t:parameter name="content2">
<p>With even more content</p>
</t:parameter>
<t:parameter name="title3">Latin text</t:parameter>
<t:parameter name="content3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero ipsum, volutpat nec, posuere vitae, pulvinar ut, quam. Morbi fringilla pulvinar nisi. Cras luctus leo sed orci. In id mi eget nunc blandit nonummy. Morbi at lacus. Ut sed elit. Donec libero. Sed feugiat tempor erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Nam lorem mi, accumsan id, commodo sit amet, interdum sit amet, augue.</p>
<p>Cras massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum accumsan neque vitae odio. Phasellus luctus arcu quis nibh. Maecenas leo. Ut aliquam hendrerit odio. Vestibulum luctus diam nec enim. Nam mi. Etiam eros turpis, ultrices et, ullamcorper nec, posuere sed, nisi. Integer placerat risus sit amet purus. Nulla elit purus, consequat sed, blandit in, feugiat bibendum, quam. In hac habitasse platea dictumst. Ut vel lorem. Ut pharetra leo. Sed sit amet felis. Nunc sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elit metus, euismod sed, laoreet a, aliquam a, enim.</p>
</t:parameter>
<t:parameter name="title4">Excluded Title</t:parameter>
<t:parameter name="content4">
Excluded content
</t:parameter>
<t:parameter name="contentAll">
<p>This banner should be repeated on all pages.</p>
</t:parameter>
</span>

How the tabs are displayed is handled using CSS. Below is an example of styling for the CSS.


.eqTabs {
padding:0 3em;
width:80%;
}
.eqTabsT {
float:left;
width:100%;
margin: 0 0 0 0;
list-style:none;
}
.eqTabsT li {
float:left;
padding:0 .5em 0 0;
}
.eqTabsT a:link,
.eqTabsT a:visited,
.eqTabsT a:active,
.eqTabsT a:hover {
width: 8em;
padding: .2em 1em;
display: block;
background: lightgray;
color: black;
font-weight: bold;
text-decoration: none;
}
.eqTabsT a:hover {
background: gray;
color: white;
}
.eqTabsP {
border: solid 1px;
clear: both;
width: auto;
}
.eqTabsAll {
border-bottom: solid 1px;
background: beige;
padding: 1em;
}
.eqTabsPC {
background: white;
padding: 1em;
}
a.eqTabsA:link,
a.eqTabsA:visited,
a.eqTabsA:active,
a.eqTabsA:hover {
background:black;
color:white;
}
.eqTravFw,
.eqTravBw {
display: none;
}
  • 1. Tabs / MemTabs