Subversion-Projekte lars-tiefland.php_share

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
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
}