diogok / restserver
- Source
- Commits
- Network (1)
- Issues (0)
- Downloads (0)
- Wiki (1)
- Graphs
-
Tree:
51ab48d
6345b06a
»
diogok
2009-12-01 |
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 | }, | |
227 | ||
228 | hide: function () { | |
229 | var el = this.tab; | |
230 | var s = el.className; | |
231 | s = s.replace(/ selected/g, ""); | |
232 | el.className = s; | |
233 | ||
234 | this.element.style.display = "none"; | |
235 | }, | |
236 | ||
237 | select: function () { | |
238 | this.tabPane.setSelectedIndex( this.index ); | |
239 | } | |
240 | }; | |
241 | ||
242 | WebFXTabPage.tabOver = function ( tabpage ) { | |
243 | var el = tabpage.tab; | |
244 | var s = el.className + " hover"; | |
245 | s = s.replace(/ +/g, " "); | |
246 | el.className = s; | |
247 | }; | |
248 | ||
249 | WebFXTabPage.tabOut = function ( tabpage ) { | |
250 | var el = tabpage.tab; | |
251 | var s = el.className; | |
252 | s = s.replace(/ hover/g, ""); | |
253 | el.className = s; | |
254 | }; | |
255 | ||
256 | ||
257 | // This function initializes all uninitialized tab panes and tab pages | |
258 | function setupAllTabs() { | |
259 | if ( !hasSupport() ) return; | |
260 | ||
261 | var all = document.getElementsByTagName( "*" ); | |
262 | var l = all.length; | |
263 | var tabPaneRe = /tab\-pane/; | |
264 | var tabPageRe = /tab\-page/; | |
265 | var cn, el; | |
266 | var parentTabPane; | |
267 | ||
268 | for ( var i = 0; i < l; i++ ) { | |
269 | el = all[i] | |
270 | cn = el.className; | |
271 | ||
272 | // no className | |
273 | if ( cn == "" ) continue; | |
274 | ||
275 | // uninitiated tab pane | |
276 | if ( tabPaneRe.test( cn ) && !el.tabPane ) | |
277 | new WebFXTabPane( el ); | |
278 | ||
279 | // unitiated tab page wit a valid tab pane parent | |
280 | else if ( tabPageRe.test( cn ) && !el.tabPage && | |
281 | tabPaneRe.test( el.parentNode.className ) ) { | |
282 | el.parentNode.tabPane.addTabPage( el ); | |
283 | } | |
284 | } | |
285 | } | |
286 | ||
287 | ||
288 | // initialization hook up | |
289 | ||
290 | // DOM2 | |
291 | if ( typeof window.addEventListener != "undefined" ) | |
292 | window.addEventListener( "load", setupAllTabs, false ); | |
293 | ||
294 | // IE | |
295 | else if ( typeof window.attachEvent != "undefined" ) | |
296 | window.attachEvent( "onload", setupAllTabs ); | |
297 | ||
298 | else { | |
299 | if ( window.onload != null ) { | |
300 | var oldOnload = window.onload; | |
301 | window.onload = function ( e ) { | |
302 | oldOnload( e ); | |
303 | setupAllTabs(); | |
304 | }; | |
305 | } | |
306 | else | |
307 | window.onload = setupAllTabs; | |
308 | } |