Никола Солев блог

Кога сакате да заштедите простор на приказот, најдобродојдени се табовите. На ова кога ќе додадете и AJAX добивате и побрзо прикажување на податоците. Во овој пример само ќе го прикажам креирањето на табовите, останатиот AJAX дел во друга прилика.

Javascript:

var tabovi = {
	doInit: function() {
		tabovi.attachEventOnTabs();
		tabovi.selectCurrentTab(document.getElementById("tab0"));
	},
	attachEventOnTabs: function() {
		var Tabs = document.getElementById('tabs').getElementsByTagName('li');

		for(var i=0;i<Tabs.length;i++) {
			Tabs[i].id = "tab"+i;

			if(Tabs[i].addEventListener)
				Tabs[i].addEventListener('click', this.doSomething, false);
			else
				Tabs[i].attachEvent('onclick',this.doSomething)

			Tabs[i].className = "passive";
		}

	},	setContent: function (el) {
			document.getElementById('content').innerHTML = el.id;
	},
	doSomething: function(obj) {
		var clickedTab = obj.currentTarget?obj.currentTarget:window.event.srcElement;

		tabovi.selectCurrentTab(clickedTab);
		tabovi.setContent(clickedTab);
	},
	selectCurrentTab: function (obj) {
		//selektiraj gi tabovite
		var Tabs = document.getElementById('tabs').getElementsByTagName('li');

		for(var i=0;i<Tabs.length;i++) {
			Tabs[i].className = "passive";

		}
		obj.className = "current";
	}
}

CSS:

ul
{
	padding: 0;
	margin: 0;
	width: 320px;
}

ul li
{
	display:inline;
	padding: 0 5px;
	margin: 0 5px 0 0;
	cursor: default;
}

.current
{
	border: 1px solid black;
	border-bottom: 2px solid white;
}

.passive {
	border:1px solid black;
	border-bottom: 1px solid silver;
	background-color: silver;
}

#content
{
	border: 1px solid black;
	padding: 5px;
	width: 320px;
}

HMTL:

Meni
Meni
Meni
Meni
Meni
Meni


		Pocetna sodrzina
	

<script>window.onload = tabovi.doInit();</script>

–> Демо <–