tabpane.js
上传用户:stephen_wu
上传日期:2008-07-05
资源大小:1757k
文件大小:12k
源码类别:

网络

开发平台:

Unix_Linux

  1. /*----------------------------------------------------------------------------
  2. |                               Tab Pane 1.02                                 |
  3. |-----------------------------------------------------------------------------|
  4. |                         Created by Erik Arvidsson                           |
  5. |                  (http://webfx.eae.net/contact.html#erik)                   |
  6. |                      For WebFX (http://webfx.eae.net/)                      |
  7. |-----------------------------------------------------------------------------|
  8. |                  Copyright (c) 1998 - 2003 Erik Arvidsson                   |
  9. |-----------------------------------------------------------------------------|
  10. | This software is provided "as is", without warranty of any kind, express or |
  11. | implied, including  but not limited  to the warranties of  merchantability, |
  12. | fitness for a particular purpose and noninfringement. In no event shall the |
  13. | authors or  copyright  holders be  liable for any claim,  damages or  other |
  14. | liability, whether  in an  action of  contract, tort  or otherwise, arising |
  15. | from,  out of  or in  connection with  the software or  the  use  or  other |
  16. | dealings in the software.                                                   |
  17. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  18. | This  software is  available under the  three different licenses  mentioned |
  19. | below.  To use this software you must chose, and qualify, for one of those. |
  20. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  21. | The WebFX Non-Commercial License          http://webfx.eae.net/license.html |
  22. | Permits  anyone the right to use the  software in a  non-commercial context |
  23. | free of charge.                                                             |
  24. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  25. | The WebFX Commercial license           http://webfx.eae.net/commercial.html |
  26. | Permits the  license holder the right to use  the software in a  commercial |
  27. | context. Such license must be specifically obtained, however it's valid for |
  28. | any number of  implementations of the licensed software.                    |
  29. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  30. | GPL - The GNU General Public License    http://www.gnu.org/licenses/gpl.txt |
  31. | Permits anyone the right to use and modify the software without limitations |
  32. | as long as proper  credits are given  and the original  and modified source |
  33. | code are included. Requires  that the final product, software derivate from |
  34. | the original  source or any  software  utilizing a GPL  component, such  as |
  35. | this, is also licensed under the GPL license.                               |
  36. |-----------------------------------------------------------------------------|
  37. | 2002-01-?? | First working version                                          |
  38. | 2002-02-17 | Cleaned up for 1.0 public version                              |
  39. | 2003-02-18 | Changed from javascript uri for anchors to return false        |
  40. | 2003-03-03 | Added dispose methods to release IE memory                     |
  41. |-----------------------------------------------------------------------------|
  42. | Dependencies: *.css           a css file to define the layout               |
  43. |-----------------------------------------------------------------------------|
  44. | Created 2002-01-?? | All changes are in the log above. | Updated 2003-03-03 |
  45. ----------------------------------------------------------------------------*/
  46. // This function is used to define if the browser supports the needed
  47. // features
  48. function hasSupport() {
  49. if (typeof hasSupport.support != "undefined")
  50. return hasSupport.support;
  51. var ie55 = /msie 5.[56789]/i.test( navigator.userAgent );
  52. hasSupport.support = ( typeof document.implementation != "undefined" &&
  53. document.implementation.hasFeature( "html", "1.0" ) || ie55 );
  54. // IE55 has a serious DOM1 bug... Patch it!
  55. if ( ie55 ) {
  56. document._getElementsByTagName = document.getElementsByTagName;
  57. document.getElementsByTagName = function ( sTagName ) {
  58. if ( sTagName == "*" )
  59. return document.all;
  60. else
  61. return document._getElementsByTagName( sTagName );
  62. };
  63. }
  64. return hasSupport.support;
  65. }
  66. ///////////////////////////////////////////////////////////////////////////////////
  67. // The constructor for tab panes
  68. //
  69. // el : HTMLElement The html element used to represent the tab pane
  70. // bUseCookie : Boolean Optional. Default is true. Used to determine whether to us
  71. // persistance using cookies or not
  72. //
  73. function WebFXTabPane( el, bUseCookie ) {
  74. if ( !hasSupport() || el == null ) return;
  75. this.element = el;
  76. this.element.tabPane = this;
  77. this.pages = [];
  78. this.selectedIndex = null;
  79. this.useCookie = bUseCookie != null ? bUseCookie : true;
  80. // add class name tag to class name
  81. this.element.className = this.classNameTag + " " + this.element.className;
  82. // add tab row
  83. this.tabRow = document.createElement( "div" );
  84. this.tabRow.className = "tab-row";
  85. el.insertBefore( this.tabRow, el.firstChild );
  86. var tabIndex = 0;
  87. if ( this.useCookie ) {
  88. tabIndex = Number( WebFXTabPane.getCookie( "webfxtab_" + this.element.id ) );
  89. if ( isNaN( tabIndex ) )
  90. tabIndex = 0;
  91. }
  92. this.selectedIndex = tabIndex;
  93. // loop through child nodes and add them
  94. var cs = el.childNodes;
  95. var n;
  96. for (var i = 0; i < cs.length; i++) {
  97. if (cs[i].nodeType == 1 && cs[i].className == "tab-page") {
  98. this.addTabPage( cs[i] );
  99. }
  100. }
  101. }
  102. WebFXTabPane.prototype.classNameTag = "dynamic-tab-pane-control";
  103. WebFXTabPane.prototype.setSelectedIndex = function ( n ) {
  104. if (this.selectedIndex != n) {
  105. if (this.selectedIndex != null && this.pages[ this.selectedIndex ] != null )
  106. this.pages[ this.selectedIndex ].hide();
  107. this.selectedIndex = n;
  108. this.pages[ this.selectedIndex ].show();
  109. if ( this.useCookie )
  110. WebFXTabPane.setCookie( "webfxtab_" + this.element.id, n ); // session cookie
  111. }
  112. };
  113. WebFXTabPane.prototype.getSelectedIndex = function () {
  114. return this.selectedIndex;
  115. };
  116. WebFXTabPane.prototype.addTabPage = function ( oElement ) {
  117. if ( !hasSupport() ) return;
  118. if ( oElement.tabPage == this ) // already added
  119. return oElement.tabPage;
  120. var n = this.pages.length;
  121. var tp = this.pages[n] = new WebFXTabPage( oElement, this, n );
  122. tp.tabPane = this;
  123. // move the tab out of the box
  124. this.tabRow.appendChild( tp.tab );
  125. if ( n == this.selectedIndex )
  126. tp.show();
  127. else
  128. tp.hide();
  129. return tp;
  130. };
  131. WebFXTabPane.prototype.dispose = function () {
  132. this.element.tabPane = null;
  133. this.element = null;
  134. this.tabRow = null;
  135. for (var i = 0; i < this.pages.length; i++) {
  136. this.pages[i].dispose();
  137. this.pages[i] = null;
  138. }
  139. this.pages = null;
  140. };
  141. // Cookie handling
  142. WebFXTabPane.setCookie = function ( sName, sValue, nDays ) {
  143. var expires = "";
  144. if ( nDays ) {
  145. var d = new Date();
  146. d.setTime( d.getTime() + nDays * 24 * 60 * 60 * 1000 );
  147. expires = "; expires=" + d.toGMTString();
  148. }
  149. document.cookie = sName + "=" + sValue + expires + "; path=/";
  150. };
  151. WebFXTabPane.getCookie = function (sName) {
  152. var re = new RegExp( "(;|^)[^;]*(" + sName + ")=([^;]*)(;|$)" );
  153. var res = re.exec( document.cookie );
  154. return res != null ? res[3] : null;
  155. };
  156. WebFXTabPane.removeCookie = function ( name ) {
  157. setCookie( name, "", -1 );
  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. this.element = el;
  170. this.element.tabPage = this;
  171. this.index = nIndex;
  172. var cs = el.childNodes;
  173. for (var i = 0; i < cs.length; i++) {
  174. if (cs[i].nodeType == 1 && cs[i].className == "tab") {
  175. this.tab = cs[i];
  176. break;
  177. }
  178. }
  179. // insert a tag around content to support keyboard navigation
  180. var a = document.createElement( "A" );
  181. this.aElement = a;
  182. a.href = "#";
  183. a.onclick = function () { return false; };
  184. while ( this.tab.hasChildNodes() )
  185. a.appendChild( this.tab.firstChild );
  186. this.tab.appendChild( a );
  187. // hook up events, using DOM0
  188. var oThis = this;
  189. this.tab.onclick = function () { oThis.select(); };
  190. this.tab.onmouseover = function () { WebFXTabPage.tabOver( oThis ); };
  191. this.tab.onmouseout = function () { WebFXTabPage.tabOut( oThis ); };
  192. }
  193. WebFXTabPage.prototype.show = function () {
  194. var el = this.tab;
  195. var s = el.className + " selected";
  196. s = s.replace(/ +/g, " ");
  197. el.className = s;
  198. this.element.style.display = "block";
  199. };
  200. WebFXTabPage.prototype.hide = function () {
  201. var el = this.tab;
  202. var s = el.className;
  203. s = s.replace(/ selected/g, "");
  204. el.className = s;
  205. this.element.style.display = "none";
  206. };
  207. WebFXTabPage.prototype.select = function () {
  208. this.tabPane.setSelectedIndex( this.index );
  209. };
  210. WebFXTabPage.prototype.dispose = function () {
  211. this.aElement.onclick = null;
  212. this.aElement = null;
  213. this.element.tabPage = null;
  214. this.tab.onclick = null;
  215. this.tab.onmouseover = null;
  216. this.tab.onmouseout = null;
  217. this.tab = null;
  218. this.tabPane = null;
  219. this.element = null;
  220. };
  221. WebFXTabPage.tabOver = function ( tabpage ) {
  222. var el = tabpage.tab;
  223. var s = el.className + " hover";
  224. s = s.replace(/ +/g, " ");
  225. el.className = s;
  226. };
  227. WebFXTabPage.tabOut = function ( tabpage ) {
  228. var el = tabpage.tab;
  229. var s = el.className;
  230. s = s.replace(/ hover/g, "");
  231. el.className = s;
  232. };
  233. // This function initializes all uninitialized tab panes and tab pages
  234. function setupAllTabs() {
  235. if ( !hasSupport() ) return;
  236. var all = document.getElementsByTagName( "*" );
  237. var l = all.length;
  238. var tabPaneRe = /tab-pane/;
  239. var tabPageRe = /tab-page/;
  240. var cn, el;
  241. var parentTabPane;
  242. for ( var i = 0; i < l; i++ ) {
  243. el = all[i];
  244. cn = el.className;
  245. // no className
  246. if ( cn == "" ) continue;
  247. // uninitiated tab pane
  248. if ( tabPaneRe.test( cn ) && !el.tabPane )
  249. new WebFXTabPane( el );
  250. // unitiated tab page wit a valid tab pane parent
  251. else if ( tabPageRe.test( cn ) && !el.tabPage &&
  252. tabPaneRe.test( el.parentNode.className ) ) {
  253. el.parentNode.tabPane.addTabPage( el );
  254. }
  255. }
  256. }
  257. function disposeAllTabs() {
  258. if ( !hasSupport() ) return;
  259. var all = document.getElementsByTagName( "*" );
  260. var l = all.length;
  261. var tabPaneRe = /tab-pane/;
  262. var cn, el;
  263. var tabPanes = [];
  264. for ( var i = 0; i < l; i++ ) {
  265. el = all[i];
  266. cn = el.className;
  267. // no className
  268. if ( cn == "" ) continue;
  269. // tab pane
  270. if ( tabPaneRe.test( cn ) && el.tabPane )
  271. tabPanes[tabPanes.length] = el.tabPane;
  272. }
  273. for (var i = tabPanes.length - 1; i >= 0; i--) {
  274. tabPanes[i].dispose();
  275. tabPanes[i] = null;
  276. }
  277. }
  278. // initialization hook up
  279. // DOM2
  280. if ( typeof window.addEventListener != "undefined" )
  281. window.addEventListener( "load", setupAllTabs, false );
  282. // IE 
  283. else if ( typeof window.attachEvent != "undefined" ) {
  284. window.attachEvent( "onload", setupAllTabs );
  285. window.attachEvent( "onunload", disposeAllTabs );
  286. }
  287. else {
  288. if ( window.onload != null ) {
  289. var oldOnload = window.onload;
  290. window.onload = function ( e ) {
  291. oldOnload( e );
  292. setupAllTabs();
  293. };
  294. }
  295. else 
  296. window.onload = setupAllTabs;
  297. }