template
Navigations-Tabs haben Ähnlichkeit mit einer Menüzeile.
Jeder Tab-Reiter bewirkt das Laden einer Seite. Damit dieses Zieldokument weiss, welcher der Tabs aktiv ist, wird der Tab-Index als URL-Parameter tbs übergeben.
Der verwendete Javascript-Code im Header benötigt zum Aufbau eine Arraystruktur, in der Icons, Titel, Tooltiptexts und Verweisziele definiert sind (im Sourcecode blau gekennzeichnet).
Ein Tab-Reiter hat folgende Struktur:
[ Icon, Tabtitel, Tooltiptext, Verweisziel ]
Das Layout (transparent, für getönte Hintergründe) benutzt diese Grafiken:
 |
 |
 |
 |
 |
 |
| tbs00.gif |
tbs0.gif |
tbs01.gif |
tbs10.gif |
tbs1.gif |
tbs11.gif |
Durch das Anklicken eines Tabs wird die Funktion tbsCli() aufgerufen. In ihrem Parameter i wird dabei der Index [0...N-1] des Tabs übermittelt. Hier könnte man per switch-Block detaillierte Aktionen durchführen. Im vorliegenden Beispiel wird jedoch nur eine (gemäß Struktur vorgegebene) Zieladresse geladen.
CSS im Header
TD.tbs0 { PADDING:7 0 1 0; BACKGROUND:url(img/tbs0.gif); }
TD.tbs00 { PADDING:7 3 1 0; BACKGROUND:url(img/tbs0.gif); }
TD.tbs01 { PADDING:7 0 1 3; BACKGROUND:url(img/tbs0.gif); }
TD.tbs1 { PADDING:3 0 5 0; BACKGROUND:url(img/tbs1.gif); }
TD.tbs { FONT:14px arial,verdana,helvetica,sans-serif; }
TD.tbsx { FONT:bold 14px arial,verdana,helvetica,sans-serif; }
Javascript im Header
var tbsData=[
['img/tbsInbox.gif','Eingang','Empfangene Nachrichten lesen','tabs.html?tbs=0'],
['img/tbsEdit.gif','Schreiben','Neue Nachricht verfassen','tabs.html?tbs=1'],
['img/tbsSent.gif','Gesendet','Versendete Nachrichten lesen','tabs.html?tbs=2'],
['img/tbsTrash.gif','Gelöscht','Papierkorb prüfen','tabs.html?tbs=3'],
['img/tbsInfo.gif','Info','Hilfe/Infos','tabs.html?tbs=4'],
['img/tbsLove.gif','Liebe','Liebe machen','tabs.html?tbs=5'],
['','Anhang','Anhang prüfen','tabs.html?tbs=6']
],tbsN=tbsData.length;
function tbsHi(o) { o.style.backgroundColor='#E0E0E0'; }
function tbsNo(o) { o.style.backgroundColor=''; }
function tbsWrite() {
var i,b,tbsi=0,a=URL_Params(window.location.href); if (a.length) tbsi=parseInt(a[0].value);
$P("<table cellspacing='0' cellpadding='0'><tr><td><img src='img/i1Spc.gif' width='2' height='1'></td>");
for (i=0;i<tbsN;i++) { b=(i==tbsi);
switch (i-tbsi) {
case -1: a=['00','00','']; break; case 0: a=['10','1','11']; break;
case 1: a=['','01','01']; break; default: a=['00','0','01']; }
if (a[0].length) $P("<td background='img/tbs"+a[0]+".gif'><img src='img/i1Spc.gif' width='4' height='1'></td>");
$P("<td class='tbs"+a[1]+"'><table"+(b?"":" style='CURSOR:pointer'")+" cellspacing='0' cellpadding='0'><tr");
if (!b) $P(" onMouseover='tbsHi(this)' onMouseout='tbsNo(this)' onClick='tbsCli("+i+")'");
if (tbsData[i][2].length) $P(" title=' "+tbsData[i][2]+(b?"":"...")+" '>");
if (tbsData[i][0].length) $P("<td style='PADDING-RIGHT:3'><img src='"+tbsData[i][0]+"'></td>");
$P("<td class='tbs"+(b?"x":"")+"'>"+tbsData[i][1]+"</td></tr></table></td>");
if (a[2].length) $P("<td background='img/tbs"+a[2]+".gif'><img src='img/i1Spc.gif' width='4' height='1'></td>");
}
$P("<td width='100%'><img src='img/i1Spc.gif' width='2' height='1'></td></tr><tr><td");
if (i=tbsi*3) $P(" colspan='"+i+"'");
$P(" bgcolor='#FFFFFF'></td><td colspan='3'><img src='img/i1Spc.gif' width='1' height='1'></td><td");
if (i=(tbsN-tbsi-1)*3) $P(" colspan='"+i+"'"); $P(" bgcolor='#FFFFFF'></td></tr></table>"); }
function tbsCli(i) { self.location.href=tbsData[i][3]; }
function $P(s) { document.write(s); }
function URL_Params(url) {
var ap,a=[],i=url.indexOf('?'); if (i<0) return a;
var j=url.indexOf('#'); if (j<0) j=url.length; else if (j<i) return a;
var s=url.substring(i+1,j); if (s.length<2) return a; ap=s.split('&');
for (i=j=0;i<ap.length;i++) { s=ap[i].split('='); if (s.length!=2) continue; if (!s[0].length) continue;
a[j++]={name:unescape(s[0].replace(/\+/g,' ')),value:unescape(s[1].replace(/\+/g,' '))}; } return a; }
Im HTML-Code werden die Tabs dann mittels tbsWrite() eingefügt:
Javascript-Block im BODY:
<SCRIPT type='text/javascript'>tbsWrite();</SCRIPT>
... hier steht der eigentliche HTML-Seiteninhalt ..
CSS und Javascript sollten in externe Module ausgelagert werden, damit die Tabs zentral pflegbar sind und von jedem Unterdokument eingebunden werden können.
| template |
 |
Demo)