https://www.baani.net/js/ajax_tabs.js

1var ddajaxtabssettings={}
2ddajaxtabssettings.bustcachevar = 1  //bust potential caching of external pages after initial request? (1=yes, 0=no)
3ddajaxtabssettings.loadstatustext = "<br><br><br><br><br><center><img src='"+base_url+"images/icons/ajax_loading.gif'></center><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>" 
4
5
6function ddajaxtabs(tabinterfaceid, contentdivid)
7{
8	this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
9	this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
10	this.enabletabpersistence=true
11	this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
12	this.contentdivid=contentdivid
13	this.defaultHTML=""
14	this.defaultIframe='<iframe src="about:blank" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'
15	this.defaultIframe=this.defaultIframe.replace(/<iframe/i, '<iframe name="'+"_ddajaxtabsiframe-"+contentdivid+'" ')
16	this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
17	this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
18}
19
20ddajaxtabs.connect = function(pageurl, tabinstance)
21{
22	var page_request = false
23	var bustcacheparameter=""
24	if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
25		page_request = new XMLHttpRequest()
26	else if (window.ActiveXObject)
27	{ // if IE6 or below
28		try 
29		{
30			page_request = new ActiveXObject("Msxml2.XMLHTTP")
31		} 
32		catch (e)
33		{
34			try
35			{
36				page_request = new ActiveXObject("Microsoft.XMLHTTP")
37			}
38			catch (e){}
39		}
40	}
41	else
42		return false
43		
44	var ajaxfriendlyurl = pageurl.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") 
45	page_request.onreadystatechange = function(){ddajaxtabs.loadpage(page_request, pageurl, tabinstance)}
46	
47	if (ddajaxtabssettings.bustcachevar) //if bust caching of external page
48		bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
49	
50	page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
51	page_request.send(null)
52}
53
54ddajaxtabs.loadpage=function(page_request, pageurl, tabinstance)
55{
56	var divId=tabinstance.contentdivid
57	document.getElementById(divId).innerHTML = ddajaxtabssettings.loadstatustext //Display "fetching page message"
58	
59	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
60	{
61		document.getElementById(divId).innerHTML=page_request.responseText
62		ddajaxtabs.ajaxpageloadaction(pageurl, tabinstance)
63	}
64}
65
66ddajaxtabs.ajaxpageloadaction=function(pageurl, tabinstance)
67{
68	tabinstance.onajaxpageload(pageurl) //call user customized onajaxpageload() function when an ajax page is fetched/ loaded
69}
70
71ddajaxtabs.getCookie=function(Name)
72{ 
73	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
74	if (document.cookie.match(re)) //if cookie found
75		return document.cookie.match(re)[0].split("=")[1] //return its value
76	return ""
77}
78
79ddajaxtabs.setCookie=function(name, value)
80{
81	document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
82}
83
84ddajaxtabs.prototype={
85	expandit:function(tabid_or_position)
86	{ //PUBLIC function to select a tab either by its ID or position(int) within its peers
87		this.cancelautorun() //stop auto cycling of tabs (if running)
88		var tabref=""
89		try
90		{

91			if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
92				tabref=document.getElementById(tabid_or_position)
93			else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
94				tabref=this.tabs[tabid_or_position]
95		}
96		catch(err){alert("Invalid Tab ID or position entered!")}
97		if (tabref!="") //if a valid tab is found based on function parameter
98			this.expandtab(tabref) //expand this tab
99	},
100
101	setpersist:function(bool)
102	{ //PUBLIC function to toggle persistence feature
103		this.enabletabpersistence=bool
104	},
105
106	loadajaxpage:function(pageurl)
107	{ //PUBLIC function to fetch a page via Ajax and display it within the Tab Content instance's container
108		ddajaxtabs.connect(pageurl, this)
109	},
110
111	loadiframepage:function(pageurl)
112	{ //PUBLIC function to fetch a page and load it into the IFRAME of the Tab Content instance's container
113		this.iframedisplay(pageurl, this.contentdivid)
114	},
115
116	setselectedClassTarget:function(objstr)
117	{ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
118		this.selectedClassTarget=objstr || "link"
119	},
120
121	getselectedClassTarget:function(tabref)
122	{ //Returns target element to assign "selected" CSS class to
123		return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
124	},
125
126	onajaxpageload:function(pageurl)
127	{ //PUBLIC Event handler that can invoke custom code whenever an Ajax page has been fetched and displayed
128		//do nothing by default
129	},
130
131	expandtab:function(tabref)
132	{
133		var relattrvalue=tabref.getAttribute("rel")
134		//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easy searching through
135		var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
136		if (relattrvalue=="#default")
137			document.getElementById(this.contentdivid).innerHTML=this.defaultHTML
138		else if (relattrvalue=="#iframe")
139			this.iframedisplay(tabref.getAttribute("href"), this.contentdivid)
140		else
141			ddajaxtabs.connect(tabref.getAttribute("href"), this)
142		this.expandrevcontent(associatedrevids)
143		
144		for (var i=0; i<this.tabs.length; i++)
145		{ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
146			this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("href")==tabref.getAttribute("href"))? "selected" : ""
147		}
148		
149		if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
150			ddajaxtabs.setCookie(this.tabinterfaceid, tabref.tabposition)
151	},
152
153	iframedisplay:function(pageurl, contentdivid)
154	{
155		if (typeof window.frames["_ddajaxtabsiframe-"+contentdivid]!="undefined")
156		{
157			try{delete window.frames["_ddajaxtabsiframe-"+contentdivid]} //delete iframe within Tab content container if it exists (due to bug in Firefox)
158			catch(err){}
159		}
160		document.getElementById(contentdivid).innerHTML=this.defaultIframe
161		window.frames["_ddajaxtabsiframe-"+contentdivid].location.replace(pageurl) //load desired page into iframe
162	},
163
164
165	expandrevcontent:function(associatedrevids)
166	{
167		var allrevids=this.revcontentids
168		for (var i=0; i<allrevids.length; i++)
169		{ //Loop through rev attributes for all tabs in this tab interface
170			//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
171			document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
172		}
173	},
174
175	autorun:function()
176	{ //function to auto cycle through and select tabs based on a set interval
177		var currentTabIndex=this.automode_currentTabIndex //index within this.hottabspositions to begin
178		var hottabspositions=this.hottabspositions //Array containing position numbers of "hot" tabs (those with a "rel" attr)
179		this.expandtab(this.tabs[hottabspositions[currentTabIndex]])
180		this.automode_currentTabIndex=(currentTabIndex<hottabspositions.length-1)? currentTabIndex+1 : 0 //increment currentTabIndex
181	},
182
183	cancelautorun:function()
184	{
185		if (typeof this.autoruntimer!="undefined")
186			clearInterval(this.autoruntimer)
187	},
188
189	init:function(automodeperiod)
190	{
191		var persistedtab = ddajaxtabs.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
192		var persisterror = true //Bool variable to check whether persisted tab position is valid (can become invalid if user has modified tab structure)
193		this.automodeperiod = automodeperiod || 0
194		this.defaultHTML=document.getElementById(this.contentdivid).innerHTML
195		for (var i=0; i<this.tabs.length; i++)
196		{
197			this.tabs[i].tabposition=i //remember position of tab relative to its peers
198			if (this.tabs[i].getAttribute("rel"))
199			{
200				var tabinstance=this
201				this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
202				this.tabs[i].onclick=function()
203				{
204					tabinstance.expandtab(this)
205					tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
206					return false
207				}
208				if (this.tabs[i].getAttribute("rev"))
209				{ //if "rev" attr defined, store each value within "rev" as an array element

210					this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
211				}
212				if (this.enabletabpersistence && parseInt(persistedtab)==i || !this.enabletabpersistence && this.getselectedClassTarget(this.tabs[i]).className=="selected")
213				{
214					this.expandtab(this.tabs[i]) //expand current tab if it's the persisted tab, or if persist=off, carries the "selected" CSS class
215					persisterror=false //Persisted tab (if applicable) was found, so set "persisterror" to false
216					//If currently selected tab's index(i) is greater than 0, this means its not the 1st tab, so set the tab to begin in automode to 1st tab:
217					this.automode_currentTabIndex=(i>0)? 0 : 1
218				}
219			}
220		} //END for loop
221		if (persisterror) //if an error has occured while trying to retrieve persisted tab (based on its position within its peers)
222			this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
223		if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1)
224		{
225			this.automode_currentTabIndex=this.automode_currentTabIndex || 0
226			this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
227		}
228	} //END int() function
229
230} //END Prototype assignment