Toggle Tab Menus Version 3.0 - Installation & Customization =========================================================== Distribution ============ 1. ttHead.htm 2. ttApi.js 3. ttStyle.css 4. ttBody.htm Installation ============ 1. ttHead.htm This is the set-up file. Copy & paste the content of this file in the ... section of your HTML file, before linking to 'ttApi.js'. See parameters below for customization. 2. ttApi.js Main JavaScript API. Just save the file under the same folder as your HTML files and link to it from your page(s): 3. ttStyle.css Default styles for the tab menus. You can modify this file, but don't change class or id names. Link to it from your page(s): 4. ttBody.htm Main HTML file. Copy & paste the content of this file anywhere in the ... section of your HTML file. Add your text or images between the
tags and name the ids as 'tabContNumber':
My content goes here
Don't forget to add the 'ttInitTabs();' function as an onload event of the BODY tag. The script WON'T run without it: Customization ============= Set-up all parameters in you ttHead.htm file. To define a NEW tab menu add this array: tabProp[No] = new Array("tabMenuNo", "tabCaption", "#tabBgColor", "tabContNo") where: * tabMenuNo: name of current tab; e.g.: tabMenu0, tabMenu1, tabMenu2 * tabCaption: the text that will be displayed by the tab; e.g.: Home, About, Products * #tabBgColor: background color of the tab; e.g.: #FFFFFF for a white background * tabContNo: name (id) of the DIV tag that contains the text which will be displayed when selecting a tab and No starts from 0 to 9. E.g.: tabProp[0] = new Array("tabMenu0", "Home", "#FFFFEE", "tabCont0") Set-up Parameters: menuBgColorOff = Default color of un-selected tab menus menuBorderColor = Border color of tab menus & content menuWidth = Tab menu width menuHeight = Tab menu height menuSpacing = Space between tab menus menuLeftOffset = Space between first menu and left margin menuSelected = The number of default selected tab menu menuBehavior = Change tab behavior: onClick/onMouseOver; 0 = onClick; 1 = onMouserOver menuRememberLast= Remember last selected menu; this feature sets a session cookie; 1 = true, 0 = false. menuVerifyWidth = Verify if menus overflow content width. 1 = true, 0 = false. Set 0 if defining 'contentWidth' in percentage. Ie. ContentWidth = "100%" menuFontFamily = Tab font family menuFontSize = Tab font size menuFontColorOff= Tab font color of un-selected menus menuFontColorOn = Tab font color for the current menu contentWidth = Width of content window contentHeight = Height of content window contentFontFamily = Font family for content window text contentFontSize = Font size for content window text contentFontColor= Font color for content window text contentPadding = Content window padding space What's New in Version 3.0? ========================== One of the new features that come with Version 3.0 is remote invocation of the initial selected tab through an URL parameter. You can link from multiple pages to the one containing the Toggle Tab Menus script and have a different tab selected, each time. Remember: tab numbering starts at 0, tid=2 (tab id) will select the 3rd tab. E.g.: Load 3rd tab will select the 3rd tab In Version 3.0 you have the option to remember the last selected tab. If the user leaves the Toggle Tab Menus page and then returns to it, the last visited tab and content will be displayed. This feature requires a cookie enabled browser. Have fun with it! Your feedback is apprecitated: http://www.baldean.com/devzone/