AAAAAAAAAA
[...]
Files this code depends on: prototype.js behaviour.js tabs.css Resources: Tabs with images - http://www.sitepoint.com/article/accessible-menu-tabs - http://alistapart.com/articles/slidingdoors/ - http://alistapart.com/articles/slidingdoors2/ CSS-only rounded boxes - http://www.cssplay.co.uk/boxes/snazzy.html CSS hacks - http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html (browser independant) */ // -------------------------------------------------------------------------------- var TabCtrl = { // -------------------------------------------------------------------------------- // "Private" section // -------------------------------------------------------------------------------- __getContentDiv: function( tab ) { return $( tab.id.replace( /t/, "tc" ) ); }, // -------------------------------------------------------------------------------- // "Protected" section // -------------------------------------------------------------------------------- _showContent: function( tab ) { var content = this.__getContentDiv( tab ); Element.removeClassName( content, "hide" ); Element.addClassName( content, "show" ); }, _hideContent: function( tab ) { var content = this.__getContentDiv( tab ); Element.removeClassName( content, "show" ); Element.addClassName( content, "hide" ); }, // -------------------------------------------------------------------------------- // "Public" section // -------------------------------------------------------------------------------- selectTab: function( tab ) { var tabCtrl = tab.parentNode.parentNode; this.deselectSelectedTabs( tabCtrl ); Element.addClassName( tab, "selected" ); this._showContent( tab ); }, deselectTab: function( tab ) { Element.removeClassName( tab, "selected" ); this._hideContent( tab ); }, selectFirstTab: function( tabCtrl ) { var tabContnr = document.getElementsByClassName( "tabs", tabCtrl )[0]; this.selectTab( tabContnr.getElementsByTagName( "LI" )[0] ); }, deselectAllTabs: function( tabCtrl ) { var tabContnrs = document.getElementsByClassName( "tabs", tabCtrl ); for ( var idx = 0; idx < tabContnrs.length; idx++ ) { var tabs = tabContnrs[ idx ].getElementsByTagName( "LI" ); for ( var jdx = 0; jdx < tabs.length; jdx++ ) { this.deselectTab( tabs[ jdx ] ); } } }, deselectSelectedTabs: function( tabCtrl ) { var tabContnrs = document.getElementsByClassName( "tabs", tabCtrl ); for ( var idx = 0; idx < tabContnrs.length; idx++ ) { var selectedTabs = document.getElementsByClassName( "selected", tabContnrs[ idx ] ); for ( var jdx = 0; jdx < selectedTabs.length; jdx++ ) { this.deselectTab( selectedTabs[ jdx ] ); } } }, // -------------------------------------------------------------------------------- // "Public events" section // -------------------------------------------------------------------------------- doMouseOver: function( tab ) { Element.addClassName( tab, "hover" ); }, doMouseOut: function( tab ) { Element.removeClassName( tab, "hover" ); }, doMouseClick: function( tab ) { this.selectTab( tab ); } }; var TabRules = { "div.tabCtrl": function( element ) { // Initialise the tab control. TabCtrl.deselectAllTabs( /*div*/element ); TabCtrl.selectFirstTab( /*div*/element ); }, "div.tabCtrl ul.tabs li": function( element ) { element.onmouseover = function() { TabCtrl.doMouseOver ( /* tab */ this ); }, element.onmouseout = function() { TabCtrl.doMouseOut ( /* tab */ this ); }, element.onclick = function() { TabCtrl.doMouseClick( /* tab */ this ); }//, }//, } Behaviour.register( TabRules ); // -------------------------------------------------------------------------------- /* Glossary Tab Control Libraries needed: prototype.js behaviour.js */ // -------------------------------------------------------------------------------- String.prototype.trim = function String_trim() { return this.replace( /^ +| +$/g, '' ); } // -------------------------------------------------------------------------------- // -------------------------------------------------------------------------------- var Glossary = { getTab: function( firstLetter ) { var tab = null; var ulTabs = document.getElementsByClassName( "tabs" )[0] var liTabs = ulTabs.getElementsByTagName( "LI" ); for ( var idx = 0; idx < liTabs.length; idx++ ) { var liTab = liTabs[idx]; if ( liTab.innerHTML.trim() == firstLetter ) { tab = liTab; break; // leave for-loop } } return tab; }, inPageA: function( nameA ) { var firstLetter = nameA.substring( 0, 1 ).toUpperCase(); var tab = this.getTab( firstLetter ); TabCtrl.selectTab( tab ); window.location.hash = "#" + nameA; }//, }; // Glossary // -------------------------------------------------------------------------------- // Popup script // // Copyright (C) RopeMarks 2002, http://www.ropemarks.com // // Remarks: // This source file has a number of functions to popup a // page on the RopeMarks website. // // -------------------------------------------------------------------------------- // -------------------------------------------------------------------------------- // Public functions. // -------------------------------------------------------------------------------- function popupVideo( pageName ) { // --- popupPageLTWH( 10, 10 // Left, Top , 600, 400 // Width, Height , pageName , "" ); } function popupWallpaper( left, top, width, height, pageName ) { // --- popupPageLTWH( left, top , width, height , pageName , "" ); } function popupHelp( anchorName ) { // --- popupPage( "popup_help.htm", anchorName ); } // -------------------------------------------------------------------------------- // Generic public functions. // -------------------------------------------------------------------------------- // --- // function popupPage( pageName, anchorName ) { // --- popupPageLTWH( 10, 10, 300, 300, pageName, anchorName ); } // --- // Popup a page at the specified position // and the specified Width and height // function popupPageLTWH( left, top, width, height, pageName, anchorName ) { // --- var pageUrl = pageName; if ( anchorName != "" ) { pageUrl = pageName + "#" + anchorName; } var wnd = window.open( pageUrl , "rmPopupPage" , "left=" + left + "," + "top=" + top + "," + "width=" + width + "," + "height=" + height + "," + "resizable," + "scrollbars" ); wnd.focus(); } /* --- This function needs the rm_cookie.js (generic cookie handling) file. */ function popupOnce_a_dayWH( /*int*/width, /*int*/height, /*string*/pageName, /*string*/cookieName ) { // --- var showPage = "False"; var cookieVal = getCookie( cookieName ); if ( ( cookieVal == null ) || ( cookieVal != "True" ) ) { // no cookie present yet or page has not been shown today setCookie( cookieName, "True" ); showPage = "True"; } // --- if ( showPage == "True" ) { popupPageLTWH( 10, 10, width, height, pageName, "" ); } } // -------------------------------------------------------------------------------- /* Last Modified Date */ // -------------------------------------------------------------------------------- // --- // function date_ddmmmyy( date ) { // --- var d = date.getDate(); var m = date.getMonth() + 1; var y = date.getFullYear(); // --- // Could use splitString() here but the following // method is more compatible. // var mmm = ( 1 == m ) ? 'Jan' : ( 2 == m ) ? 'Feb' : ( 3 == m ) ? 'Mar' : ( 4 == m ) ? 'Apr' : ( 5 == m ) ? 'May' : ( 6 == m ) ? 'Jun' : ( 7 == m ) ? 'Jul' : ( 8 == m ) ? 'Aug' : ( 9 == m ) ? 'Sep' : ( 10 == m ) ? 'Oct' : ( 11 == m ) ? 'Nov' : ( 12 == m ) ? 'Dec' : '???'; return ( mmm + " " + d + ", " + y ); } // -------------------------------------------------------------------------------- // -------------------------------------------------------------------------------- // --- // function date_lastModified() { // --- var lmd = document.lastModified; var s = "Not Available"; var dl; // --- // Check if we have a valid before proceding if ( 0 != ( dl = Date.parse( lmd ) ) ) { // --- s = date_ddmmmyy( new Date( dl ) ); } // --- // Finally, display the last modified date as MMM DD, YY // document.write( "This page was last modified on " + s + "." ); } // EOF /* end hide */ // -->