I believe tabbed tables in notes client are important elements for creating user-friendly applications, I usually prefer to categorize form fields and put them in tabs and have the user click those tabs instead of scrolling a long page. However, standard way that Notes implements these tables on web is not very helpful:
- They definitely don’t look pretty
- When you click on each tab, it hits the server to get the html that needs to be displayed on the tab
- Tab switching takes time
- Causes potential data loss on the data that user already entered
With a little CSS, Javascript and HTML, jointly called DHTML, you can overcome these drawbacks and create nice looking tabs that are switched locally in the browser client without any server hit.
There are abundant ways that you can do this on the web due to the number of options you have. This database demonstrates one way that you can achieve this. Open the “Web Tabbed Tables” form and preview it in browser to see what it looks like. These three components in the database make up the this design:
The HTML, tables and fields in the “Web Tabbed Tables” form
The “Form-Tabs.css” in the Style Sheets resources
The functions in the JS Header of the form
Web Tabbed Tables form:
All the contents of this form are Pass-thru HTML to make sure Notes treats the text contents as plain HTML and does not include formatting attributes. The formatting is being taken care of by CSS.
The first thing you see in the form is the following div named “menu” contains the header of the table. Each ‘li’ and ‘a’ tag makes one tab label. As you can see each of the ‘a’ tags trigger a javascript function which I will discuss later.
<div id=”menu”>
<ul>
<li><a id=”Ltab1″ href=”javascript:switchTab(” mce_href=”javascript:switchTab(”>General</a></li>
<li><a id=”Ltab2″ href=”javascript:switchTab(” mce_href=”javascript:switchTab(”>Contact Details</a></li>
<li><a id=”Ltab3″ href=”javascript:switchTab(” mce_href=”javascript:switchTab(”>Preferences</a></li>
</ul>
</div>
Beneath the above code, there is another div tag with the Id of “content”, in this div three separate tables exist. Each table contains the content to be displayed on each tab. These tables are made accessible by CSS and javascript through their HTML ID attributes. The first table is named “tab1″, second table is named “tab2″ and third table is named “tab3″.
“Form-Tabs” CSS resource:
The CSS resource contains the following code. All of the code are for formatting purposes except the last selector definition which plays the important role. It hides all the tabs, except the first one. So when user opens the page he/she only sees the first tab.
* {
font-size:11px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
/* MENU – the tabs */
#menu {
width: 700px;
height: 31px;
margin: 0px auto;
background:#0066CC;
text-align:justify;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
display: inline; /* to make the li tags displayed inline to look like tabs */
}
#menu a {
display: block; /* make links look like tab */
float: left; /* align them on left */
padding: 10px;
text-transform: uppercase;
text-decoration: none;
font-size: smaller;
font-weight: bold;
color: #FFFFFF;
}
/* CONTENT – the contents of the tabs*/
#content {
width: 700px;
margin: 0px auto;
background:#99FFFF;
padding: 10px 0px 10px 0px;
text-align:justify;
}
#tab1 td, #tab2 td, #tab3 td, {
padding: 10px 0px 5px 20px;
margin-top: 20px;
}
/*hide the unnecessary tabs first (only display the first tab) */
#tab2, #tab3{
display:none;
}
Javscript:
I wrote the following two functions in the “JS Header” of the form. The second function (switchTab) is the one triggered by the Tab label links. It displays the given tab and hides the other tabs by changing their CSS style (display).
The hideTab function is only used by the switchTab function. The comments in the code explain some of the statements.
function hideTab(tabH) {
//hides given tables
document.getElementById(tabH).style.display=”none”
//remove the bg color of the tab labels
document.getElementById(”L”+tabH).style.backgroundColor=”transparent”
document.getElementById(”L”+tabH).style.color = “#ffffff”
}
function switchTab(tab) {
//displays given table and hides other tables – simulating tabs
if (navigator.appName==”Microsoft Internet Explorer”) {
document.getElementById(tab).style.display=”block”
} else {
document.getElementById(tab).style.display=”table”
}
//change background of the tab label, so it looks the same as the contents
var menu = document.getElementById(”L”+tab)
menu.style.backgroundColor = “#99FFFF”
menu.style.color = “#000066″
//hide the other tables:
if (tab==”tab1″) {
hideTab(’tab2′)
hideTab(’tab3′)
}
if (tab==”tab2″) {
hideTab(’tab1′)
hideTab(’tab3′)
}
if (tab==”tab3″) {
hideTab(’tab1′)
hideTab(’tab2′)
}
}
Using this method you have far too many flexibilities to change the look and feel of your tabs and page by changing the CSS resource.
Download the demo database