Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples

function TabMenu(_objId) {
var _tabs = [];
var _obj = document.getElementById(_objId);

this.addItem = function(tab) {
_tabs[_tabs.length] = tab;
}

this.getHTML = function() {

if (_obj) {
} else {

var div = document.createElement('div');
div.className = 'tabmenu';
var ul = document.createElement('ul');
div.appendChild(ul);
var content = document.createElement('div');
content.className = 'tabmenucontent'

var idx, tab;
for (idx in _tabs) {
tab = _tabs[idx];
tab.appendTo(ul, content);
}

div.appendChild(content);

return div;

}

}

this.appendTo = function(objId) {
var obj = document.getElementById(objId);
obj.appendChild(this.getHTML());
}

}

function TabItem(opts) {
var opts = opts;

function tabClick(obj) {
var items = obj.parentNode.getElementsByTagName('li');
var item = null;
for (var idx in items) {
item = items[idx];
if (item == obj) {
item.className = 'tabitemactive';
} else {
item.className = '';
}
}
var divs = obj.parentNode.parentNode.getElementsByTagName('div');
var div;
for (var idx in divs) {
div = divs[idx];
if (div.tab) {
if (div.tab == obj) {
div.className = 'contentvisible';
} else if (div.parentNode.parentNode == obj.parentNode.parentNode) {
div.className = 'contenthidden';
}
}
}
return false;
}

this.appendTo = function(tabs, content) {
var li = document.createElement('li');
var active = opts.active && opts.active == true;

li.onclick = function() { return tabClick(this); };
if (active) {
li.className = 'tabitemactive';
}
var a = document.createElement('a');

if (opts.action) {
a.href = opts.action;
} else {
a.href = '#';
}

if (opts.name) {
a.name = opts.name;
}

if (opts.click) {
a.click = function() {
opts.click(this);
};
}

a.appendChild(document.createTextNode(opts.label));

li.appendChild(a);
tabs.appendChild(li);

var div = document.createElement('div');
div.tab = li;

if (active) {
div.className = 'contentvisible';
} else {
div.className = 'contenthidden';
}

if (opts.content) {
if (typeof opts.content == 'object') {
div.appendChild(opts.content);
} else {
div.innerHTML = opts.content;
}
}
content.appendChild(div);
}

}