Tabbar

Mojn, jeg har lavet mig en lille tabbar i javascript.
Det virker fint, og i kan bare lige tage den hvis det skulle være brugbart
Der er kun et lille problem, det virker ikke i IE..
Hvis der er nogen der kan spotte problemet, må i gerne lige skrive.
Der kan oprettes flere tabs på en side, og inden i hinanden.
De kan disables, og enables, og slettes efter de er oprettet.
Der kan dog ikke oprettes flere tabs i den enkelte tabbar efter den er lavet, kommer nok senere.

Anywho, hvis nogen kan rette den til IE, er der sikkert flere der kan få gavn af den.
Here goes:

tabs.js

var tabBar, tabsTitles, tabsLis, tabsElements, placeHolder, align, classname, beenMade, currentTab, unSaved, saveCooke, valign;

/* 
*	usage:
*	var tabname = new Tabbed(placeholder div element, top/bottom, left/right, tabname, save position in cookie[true/false])
*	tabname.addTab(tab title, tab div element)
*	tabname.drawTabs()
*/
function Tabbed(placeHolder, valign, align, classname, saveCookie) {
	this.tabBar = null;
	this.tabsTitles = new Array();
	this.tabsElements = new Array();
	this.tabsLis = new Array();
	this.classname = classname;
	this.placeHolder = document.getElementById(placeHolder);
	if (align == '') align = 'top';
	this.align = align;
	this.valign = valign;
	this.beenMade = false;
	this.currentTab = null;
	this.unSaved = new Array();
	this.saveCookie = saveCookie
	
	this.addTab = function(title, element) {
		if (title && element) {
			this.tabsTitles.push(title);
			this.tabsElements.push(document.getElementById(element));
			if (this.beenMade == true) {
				this.drawTabs();
			}
			return true;
		} else {
			return false;
		}
	}

	this.delTab = function(tab) {
		if (tab) {
			var temp_li = this.tabsLis[tab];
			temp_li.parentNode.removeChild(temp_li);
			this.tabsTitles.splice(tab,1);
			
			var temp_div = this.tabsElements[tab];
			temp_div.parentNode.removeChild(temp_div);
			this.tabsElements.splice(tab,1);
			
			return true;
		} else {
			return false;
		}
	}
	
	this.disableTab = function(tab) {
		if (tab) {
			var temp_li = this.tabsLis[tab];
			temp_li.className = 'tabDisabled';
			var a = temp_li.firstChild;
			a.setAttribute('onclick','return false;');
		} else {
			return false;
		}
	}
	
	this.enableTab = function (tab) {
		if (tab) {
			var temp_li = this.tabsLis[tab];
			temp_li.className = 'tabTab';
			var a = temp_li.firstChild;
			a.setAttribute('onclick',this.classname+'.switchTab('+tab+');return false;');
		} else {
			return false;
		}
	}
	
	this.switchTab = function(tab) {
		if (this.saveCookie) {
			this.eraseCookie(this.classname+'tabbarLastUsed');
			this.createCookie(this.classname+'tabbarLastUsed',tab,1);
		}
		this.currentTab = tab;
		this.hideTabs();
		var temp_div = this.tabsElements[tab];
		temp_div.className = 'tabShownTab';
		var temp_li = this.tabsLis[tab];
		temp_li.className = 'tabTabSel';
	}
	
	this.hideTabs = function() {
		for (var i = 0; i < this.tabsElements.length; i++) {
			var temp_div = this.tabsElements[i];
			if (temp_div) {
				temp_div.className = 'tabHiddenTab';
			}
		}
		for (var i = 0; i < this.tabsLis.length; i++) {
			var temp_li = this.tabsLis[i];
			if (temp_li) {
				if (temp_li.className != 'tabDisabled') {
					temp_li.className = 'tabTab';
				}
			}
		}
	}
	
	this.drawTabs = function() {
		if (this.tabBar == null) this.makeTabBar();
		if (this.tabsTitles.length > 0 && this.tabsElements.length > 0) {
			if (this.tabsTitles.length == this.tabsElements.length) {
				for (var i = 0; i < this.tabsTitles.length; i++) {
					if (!this.tabsLis[i]) {
						var temp_li = document.createElement('li');
						temp_li.id = 'tabbedBarTab'+i;
						temp_li.setAttribute('class','tabTab');
						if (this.align == 'right') {
							temp_li.setAttribute('style','float:right;');
						}
						var a = document.createElement('a');
						a.innerHTML = this.tabsTitles[i];
						a.href = '#'+this.tabBar.id+'_tab'+(i+1);
						a.setAttribute('onclick',this.classname+'.switchTab('+i+');return false;');
						temp_li.appendChild(a);
						this.tabBar.appendChild(temp_li);
						this.tabsLis[i] = temp_li;
						
						var temp_div = this.tabsElements[i];
						if (temp_div && temp_div != this.placeHolder) {
							if (temp_div.parentNode != this.placeHolder) {
								var new_temp_div = temp_div.cloneNode(temp_div);
								temp_div.parentNode.removeChild(temp_div);
								this.placeHolder.appendChild(new_temp_div);
								var temp_div = new_temp_div;
								
							}
							temp_div.className = 'tabHiddenTab';
							this.tabsElements[i] = temp_div;
						}
					}
				}
				
				if (this.saveCookie) {
					var selectedTab = this.readCookie(this.classname+'tabbarLastUsed');
					if (selectedTab == null) selectedTab = 0;
					if (selectedTab == 'undefined') selectedTab = 0;
				} else {
					selectedTab = 0;
				}
				this.switchTab(selectedTab);
				this.beenMade = true;
				return true;
			} else {
				this.beenMade = false;
				return false;
			}
		} else {
			this.beenMade = false;							
			return false;
		}
	}
		
	this.makeTabBar = function() {
		if (this.tabBar == null) {
			var rNumber = this.randomNumberGenerator(123,98765);
			var temp_id = 'tabbedBar'+rNumber;
			if (this.placeHolder == null) {
				var temp_place_holder = document.createElement('div');
				temp_place_holder.id = 'tabPlaceHolder'+rNumber;
				document.insertBefore(temp_place_holder,document.firstChild);
				this.placeHolder = temp_place_holder;
			}
			var ul = document.createElement('ul');
			ul.id = temp_id;
			ul.className = 'tabs';
			if (this.valign == 'bottom') {
				this.placeHolder.appendChild(ul);
			} else if (this.valign == 'top') {
				this.placeHolder.insertBefore(ul,this.placeHolder.firstChild);
			}
			this.placeHolder.className = 'tabBar';
			this.tabBar = ul;
			return true;
		} else {
			return false;
		}
	}
	
	this.randomNumberGenerator = function(lbound, ubound) {
		return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
	}
	
	this.createCookie = function(name,value,days) {
		if (days) {	
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		} else { 
			var expires = "";
		}
		document.cookie = name+"="+value+expires+"; path=/";
	}
	
	this.readCookie = function(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for (var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
	
	this.eraseCookie = function(name) {
		this.createCookie(name,"",-1);
	}
}

Der er ikke rigtig nogen comments, det kan jeg ikke overskue at lave.

tabs.html:

<div id="placeHolder">
	<div id="tab1">
		tab 1
	</div>
	<div id="tab2">
		tab 2
	</div>
	<div id="tab3">
		tab 3
	</div>
</div>

<script src="../includes/tabs.js" type="text/javascript"></script>
<script type="text/javascript">
var tab = new Tabbed('placeHolder','top','left','tab',false);

tab.addTab('Tab 1','tab1');
tab.addTab('Tab 2','tab2');
tab.addTab('Tab 3','tab3');

tab.drawTabs();
</script>

og
tabs.css:

.tabBar {
	width:100%;
	font-family:verdana,sans-serif;
	font-size:11px;
}

.tabBar ul.tabs {
    margin:0px;
    overflow:auto;
    padding:0px;
    padding-left:0px;
    clear:both;
}

.tabBar ul.tabs li {
    margin:0px;
    list-style-type:none;
    border:2px outset white;
    float:left;
    text-align:center;
    margin-left:2px;
    margin-right:2px;
    border-bottom:0px;
	background:rgb(230,230,230);
}

.tabBar ul.tabs li a {
    text-decoration:none;
    display:block;
    color:black;
    -moz-outline:0px;
    padding:2px;
    padding-left:10px;
    padding-right:10px;
    z-index:1;
    position:relative;
}


.tabBar ul.tabs li.tabDisabled a {
    color:gray;
    cursor:default;
}

.tabBar ul.tabs li.tabTabSel {
    border-bottom:2px solid rgb(230,230,230);
}

.tabBar ul.tabs li.tabTabSel a {
    text-decoration:none;
    display:block;
    color:black;
    font-weight:bold;
}

.tabShownTab {
    display:block;
    border:2px outset white;
    padding:10px;
    margin-left:2px;
    margin-top:-2px;
    max-height:550px;
	background:rgb(230,230,230);
}

.tabHiddenTab {
	display:none;
}

Håber det kan bruges