| 1 |
lars |
1 |
/*
|
|
|
2 |
* Tab Pane
|
|
|
3 |
*
|
|
|
4 |
* This script was created by Erik Arvidsson (erik(at)eae.net)
|
|
|
5 |
* for WebFX (http://webfx.eae.net)
|
|
|
6 |
* Copyright 2002
|
|
|
7 |
*
|
|
|
8 |
* For usage see license at http://webfx.eae.net/license.html
|
|
|
9 |
*
|
|
|
10 |
* Version: 1.0
|
|
|
11 |
* Created: 2002-01-?? First working version
|
|
|
12 |
* Updated: 2002-02-17 Cleaned up for 1.0 public version
|
|
|
13 |
*
|
|
|
14 |
* Dependencies: *.css - a css file to define the layout
|
|
|
15 |
*
|
|
|
16 |
*/
|
|
|
17 |
|
|
|
18 |
|
|
|
19 |
// This function is used to define if the browser supports the needed
|
|
|
20 |
// features
|
|
|
21 |
function hasSupport() {
|
|
|
22 |
|
|
|
23 |
if (typeof hasSupport.support != "undefined")
|
|
|
24 |
return hasSupport.support;
|
|
|
25 |
|
|
|
26 |
var ie55 = /msie 5\.[56789]/i.test( navigator.userAgent );
|
|
|
27 |
|
|
|
28 |
hasSupport.support = ( typeof document.implementation != "undefined" &&
|
|
|
29 |
document.implementation.hasFeature( "html", "1.0" ) || ie55 )
|
|
|
30 |
|
|
|
31 |
// IE55 has a serious DOM1 bug... Patch it!
|
|
|
32 |
if ( ie55 ) {
|
|
|
33 |
document._getElementsByTagName = document.getElementsByTagName;
|
|
|
34 |
document.getElementsByTagName = function ( sTagName ) {
|
|
|
35 |
if ( sTagName == "*" )
|
|
|
36 |
return document.all;
|
|
|
37 |
else
|
|
|
38 |
return document._getElementsByTagName( sTagName );
|
|
|
39 |
};
|
|
|
40 |
}
|
|
|
41 |
|
|
|
42 |
return hasSupport.support;
|
|
|
43 |
}
|
|
|
44 |
|
|
|
45 |
///////////////////////////////////////////////////////////////////////////////////
|
|
|
46 |
// The constructor for tab panes
|
|
|
47 |
//
|
|
|
48 |
// el : HTMLElement The html element used to represent the tab pane
|
|
|
49 |
// bUseCookie : Boolean Optional. Default is true. Used to determine whether to us
|
|
|
50 |
// persistance using cookies or not
|
|
|
51 |
//
|
|
|
52 |
function WebFXTabPane( el, bUseCookie ) {
|
|
|
53 |
if ( !hasSupport() || el == null ) return;
|
|
|
54 |
|
|
|
55 |
this.element = el;
|
|
|
56 |
this.element.tabPane = this;
|
|
|
57 |
this.pages = [];
|
|
|
58 |
this.selectedIndex = null;
|
|
|
59 |
this.useCookie = bUseCookie != null ? bUseCookie : false;
|
|
|
60 |
|
|
|
61 |
// add class name tag to class name
|
|
|
62 |
this.element.className = this.classNameTag + " " + this.element.className;
|
|
|
63 |
|
|
|
64 |
// add tab row
|
|
|
65 |
this.tabRow = document.createElement( "div" );
|
|
|
66 |
this.tabRow.className = "tab-row";
|
|
|
67 |
el.insertBefore( this.tabRow, el.firstChild );
|
|
|
68 |
|
|
|
69 |
var tabIndex = 0;
|
|
|
70 |
if ( this.useCookie ) {
|
|
|
71 |
tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
|
|
|
72 |
if ( isNaN( tabIndex ) )
|
|
|
73 |
tabIndex = 0;
|
|
|
74 |
}
|
|
|
75 |
|
|
|
76 |
this.selectedIndex = tabIndex;
|
|
|
77 |
|
|
|
78 |
// loop through child nodes and add them
|
|
|
79 |
var cs = el.childNodes;
|
|
|
80 |
var n;
|
|
|
81 |
for (var i = 0; i < cs.length; i++) {
|
|
|
82 |
if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
|
|
|
83 |
this.addTabPage( cs[i] );
|
|
|
84 |
}
|
|
|
85 |
}
|
|
|
86 |
}
|
|
|
87 |
|
|
|
88 |
WebFXTabPane.prototype = {
|
|
|
89 |
|
|
|
90 |
classNameTag: "dynamic-tab-pane-control",
|
|
|
91 |
|
|
|
92 |
setSelectedIndex: function ( n ) {
|
|
|
93 |
if (this.selectedIndex != n) {
|
|
|
94 |
if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
|
|
|
95 |
this.pages[ this.selectedIndex ].hide();
|
|
|
96 |
this.selectedIndex = n;
|
|
|
97 |
this.pages[ this.selectedIndex ].show();
|
|
|
98 |
|
|
|
99 |
if ( this.useCookie )
|
|
|
100 |
WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n ); // session cookie
|
|
|
101 |
}
|
|
|
102 |
},
|
|
|
103 |
|
|
|
104 |
getSelectedIndex: function () {
|
|
|
105 |
return this.selectedIndex;
|
|
|
106 |
},
|
|
|
107 |
|
|
|
108 |
addTabPage: function ( oElement ) {
|
|
|
109 |
if ( !hasSupport() ) return;
|
|
|
110 |
|
|
|
111 |
if ( oElement.tabPage == this ) // already added
|
|
|
112 |
return oElement.tabPage;
|
|
|
113 |
|
|
|
114 |
var n = this.pages.length;
|
|
|
115 |
var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
|
|
|
116 |
tp.tabPane = this;
|
|
|
117 |
|
|
|
118 |
// move the tab out of the box
|
|
|
119 |
this.tabRow.appendChild( tp.tab );
|
|
|
120 |
|
|
|
121 |
if ( n == this.selectedIndex )
|
|
|
122 |
tp.show();
|
|
|
123 |
else
|
|
|
124 |
tp.hide();
|
|
|
125 |
|
|
|
126 |
return tp;
|
|
|
127 |
}
|
|
|
128 |
};
|
|
|
129 |
|
|
|
130 |
// Cookie handling
|
|
|
131 |
WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
|
|
|
132 |
var expires = "";
|
|
|
133 |
if ( nDays ) {
|
|
|
134 |
var d = new Date();
|
|
|
135 |
d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
|
|
|
136 |
expires = "; expires=" + d.toGMTString();
|
|
|
137 |
}
|
|
|
138 |
|
|
|
139 |
document.cookie = sName + "=" + sValue + expires + "; path=/";
|
|
|
140 |
};
|
|
|
141 |
|
|
|
142 |
WebFXTabPane.getCookie = function (sName) {
|
|
|
143 |
var re = new RegExp( "(\;|^)[^;]*(" + sName + ")\=([^;]*)(;|$)" );
|
|
|
144 |
var res = re.exec( document.cookie );
|
|
|
145 |
return res != null ? res[3] : null;
|
|
|
146 |
};
|
|
|
147 |
|
|
|
148 |
WebFXTabPane.removeCookie = function ( name ) {
|
|
|
149 |
setCookie( name, "", -1 );
|
|
|
150 |
};
|
|
|
151 |
|
|
|
152 |
|
|
|
153 |
|
|
|
154 |
|
|
|
155 |
|
|
|
156 |
|
|
|
157 |
|
|
|
158 |
|
|
|
159 |
///////////////////////////////////////////////////////////////////////////////////
|
|
|
160 |
// The constructor for tab pages. This one should not be used.
|
|
|
161 |
// Use WebFXTabPage.addTabPage instead
|
|
|
162 |
//
|
|
|
163 |
// el : HTMLElement The html element used to represent the tab pane
|
|
|
164 |
// tabPane : WebFXTabPane The parent tab pane
|
|
|
165 |
// nindex : Number The index of the page in the parent pane page array
|
|
|
166 |
//
|
|
|
167 |
function WebFXTabPage( el, tabPane, nIndex ) {
|
|
|
168 |
if ( !hasSupport() || el == null ) return;
|
|
|
169 |
|
|
|
170 |
this.element = el;
|
|
|
171 |
this.element.tabPage = this;
|
|
|
172 |
this.index = nIndex;
|
|
|
173 |
|
|
|
174 |
var cs = el.childNodes;
|
|
|
175 |
for (var i = 0; i < cs.length; i++) {
|
|
|
176 |
if (cs[i].nodeType == 1 && cs[i].className == "tab") {
|
|
|
177 |
this.tab = cs[i];
|
|
|
178 |
break;
|
|
|
179 |
}
|
|
|
180 |
}
|
|
|
181 |
|
|
|
182 |
// insert a tag around content to support keyboard navigation
|
|
|
183 |
var a = document.createElement( "A" );
|
|
|
184 |
a.href = "javascript:void 0;";
|
|
|
185 |
while ( this.tab.hasChildNodes() )
|
|
|
186 |
a.appendChild( this.tab.firstChild );
|
|
|
187 |
this.tab.appendChild( a );
|
|
|
188 |
|
|
|
189 |
|
|
|
190 |
anchor = '';
|
|
|
191 |
if ( document.URL.indexOf( '#' ) != -1 ) {
|
|
|
192 |
anchor = document.URL.substr( document.URL.indexOf( '#' ) + 1);
|
|
|
193 |
}
|
|
|
194 |
j = 0;
|
|
|
195 |
if ( anchor.length > 0 ) {
|
|
|
196 |
finalList = new Array();
|
|
|
197 |
listOfAnchors = el.getElementsByTagName('A');
|
|
|
198 |
for (i=0; i<listOfAnchors.length; i++) {
|
|
|
199 |
if (listOfAnchors[i].name.length) {
|
|
|
200 |
finalList[j++] = listOfAnchors[i].name;
|
|
|
201 |
}
|
|
|
202 |
}
|
|
|
203 |
for(i=0; i<finalList.length; i++) {
|
|
|
204 |
if ( anchor == finalList[i] ) {
|
|
|
205 |
if (tabPane.selectedIndex != nIndex) tabPane.pages[ tabPane.selectedIndex ].hide();
|
|
|
206 |
tabPane.selectedIndex = nIndex ;
|
|
|
207 |
}
|
|
|
208 |
}
|
|
|
209 |
}
|
|
|
210 |
|
|
|
211 |
// hook up events, using DOM0
|
|
|
212 |
var oThis = this;
|
|
|
213 |
this.tab.onclick = function () { oThis.select(); };
|
|
|
214 |
this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
|
|
|
215 |
this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
|
|
|
216 |
}
|
|
|
217 |
|
|
|
218 |
WebFXTabPage.prototype = {
|
|
|
219 |
show: function () {
|
|
|
220 |
var el = this.tab;
|
|
|
221 |
var s = el.className + " selected";
|
|
|
222 |
s = s.replace(/ +/g, " ");
|
|
|
223 |
el.className = s;
|
|
|
224 |
|
|
|
225 |
//this.element.style.display = "block";
|
|
|
226 |
this.element.style.visibility = "visible";
|
|
|
227 |
},
|
|
|
228 |
|
|
|
229 |
hide: function () {
|
|
|
230 |
var el = this.tab;
|
|
|
231 |
var s = el.className;
|
|
|
232 |
s = s.replace(/ selected/g, "");
|
|
|
233 |
el.className = s;
|
|
|
234 |
|
|
|
235 |
this.element.style.visibility = "hidden";
|
|
|
236 |
},
|
|
|
237 |
|
|
|
238 |
select: function () {
|
|
|
239 |
this.tabPane.setSelectedIndex( this.index );
|
|
|
240 |
}
|
|
|
241 |
};
|
|
|
242 |
|
|
|
243 |
WebFXTabPage.tabOver = function ( tabpage ) {
|
|
|
244 |
var el = tabpage.tab;
|
|
|
245 |
var s = el.className + " hover";
|
|
|
246 |
s = s.replace(/ +/g, " ");
|
|
|
247 |
el.className = s;
|
|
|
248 |
};
|
|
|
249 |
|
|
|
250 |
WebFXTabPage.tabOut = function ( tabpage ) {
|
|
|
251 |
var el = tabpage.tab;
|
|
|
252 |
var s = el.className;
|
|
|
253 |
s = s.replace(/ hover/g, "");
|
|
|
254 |
el.className = s;
|
|
|
255 |
};
|
|
|
256 |
|
|
|
257 |
|
|
|
258 |
// This function initializes all uninitialized tab panes and tab pages
|
|
|
259 |
function setupAllTabs() {
|
|
|
260 |
if ( !hasSupport() ) return;
|
|
|
261 |
|
|
|
262 |
var all = document.getElementsByTagName( "*" );
|
|
|
263 |
var l = all.length;
|
|
|
264 |
var tabPaneRe = /tab\-pane/;
|
|
|
265 |
var tabPageRe = /tab\-page/;
|
|
|
266 |
var cn, el;
|
|
|
267 |
var parentTabPane;
|
|
|
268 |
|
|
|
269 |
for ( var i = 0; i < l; i++ ) {
|
|
|
270 |
el = all[i]
|
|
|
271 |
cn = el.className;
|
|
|
272 |
|
|
|
273 |
// no className
|
|
|
274 |
if ( cn == "" ) continue;
|
|
|
275 |
|
|
|
276 |
// uninitiated tab pane
|
|
|
277 |
if ( tabPaneRe.test( cn ) && !el.tabPane )
|
|
|
278 |
new WebFXTabPane( el );
|
|
|
279 |
|
|
|
280 |
// unitiated tab page wit a valid tab pane parent
|
|
|
281 |
else if ( tabPageRe.test( cn ) && !el.tabPage &&
|
|
|
282 |
tabPaneRe.test( el.parentNode.className ) ) {
|
|
|
283 |
el.parentNode.tabPane.addTabPage( el );
|
|
|
284 |
}
|
|
|
285 |
}
|
|
|
286 |
}
|
|
|
287 |
|
|
|
288 |
|
|
|
289 |
// initialization hook up
|
|
|
290 |
|
|
|
291 |
// DOM2
|
|
|
292 |
if ( typeof window.addEventListener != "undefined" )
|
|
|
293 |
window.addEventListener( "load", setupAllTabs, false );
|
|
|
294 |
|
|
|
295 |
// IE
|
|
|
296 |
else if ( typeof window.attachEvent != "undefined" )
|
|
|
297 |
window.attachEvent( "onload", setupAllTabs );
|
|
|
298 |
|
|
|
299 |
else {
|
|
|
300 |
if ( window.onload != null ) {
|
|
|
301 |
var oldOnload = window.onload;
|
|
|
302 |
window.onload = function ( e ) {
|
|
|
303 |
oldOnload( e );
|
|
|
304 |
setupAllTabs();
|
|
|
305 |
};
|
|
|
306 |
}
|
|
|
307 |
else
|
|
|
308 |
window.onload = setupAllTabs;
|
|
|
309 |
}
|