Full version: jsB@nk » Menu » Navigation » Tab View
URL: https://www.javascriptbank.com/tab-view-index.html
A combination of CSS and JavaScript that allows switching between several pages without loading them from server. The script emulates the behavior of tabbed controls in Windows applications.
Full version: jsB@nk » Menu » Navigation » Tab View
URL: https://www.javascriptbank.com/tab-view-index.html
<style type=text/css>/*Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.Technical support: http://www.php-development.ru/YOU MAY NOT(1) Remove or modify this copyright notice.(2) Distribute this code, any part or any modified version of it. Instead, you can link to the homepage of this code: http://www.php-development.ru/javascripts/tabview.php.YOU MAY(1) Use this code on your website.(2) Use this code as a part of another product.NO WARRANTYThis code is provided "as is" without warranty of any kind, eitherexpressed or implied, including, but not limited to, the implied warrantiesof merchantability and fitness for a particular purpose. You expresslyacknowledge and agree that use of this code is at your own risk.If you find my script useful, you can support my site in the following ways:1. Vote for the script at HotScripts.com (you can do it on my site)2. Link to the homepage of this script or to the homepage of my site: http://www.php-development.ru/javascripts/tabview.php http://www.php-development.ru/ You will get 50% commission on all orders made by your referrals. More information can be found here: http://www.php-development.ru/affiliates.php*/div.TabView div.Tabs{ height: 24px; overflow: hidden;}div.TabView div.Tabs a{ float: left; display: block; width: 90px; text-align: center; height: 24px; line-height: 28px; vertical-align: middle; background: url('tabs.png') no-repeat -2px -1px; text-decoration: none; font-family: "Times New Roman", Serif; font-weight: 900; font-size: 13px; color: #000080;}div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{ background: url('tabs.png') no-repeat -2px -31px;}div.TabView div.Pages{ clear: both; border: 1px solid #404040; overflow: hidden;}div.TabView div.Pages div.Page{ height: 100%; padding: 0px; overflow: hidden;}div.TabView div.Pages div.Page div.Pad{ padding: 3px 5px;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type=text/javascript>/* This script and many more are available free online atThe JavaScript Source :: http://javascript.internet.comCreated by: Ilya S. Lyubinskiy :: http://www.php-development.ru/ *//* Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.Technical support: http://www.php-development.ru/YOU MAY NOT(1) Remove or modify this copyright notice.(2) Distribute this code, any part or any modified version of it. Instead, you can link to the homepage of this code: http://www.php-development.ru/javascripts/tabview.php.YOU MAY(1) Use this code on your website.(2) Use this code as a part of another product.NO WARRANTYThis code is provided "as is" without warranty of any kind, eitherexpressed or implied, including, but not limited to, the implied warrantiesof merchantability and fitness for a particular purpose. You expresslyacknowledge and agree that use of this code is at your own risk.If you find my script useful, you can support my site in the following ways:1. Vote for the script at HotScripts.com (you can do it on my site)2. Link to the homepage of this script or to the homepage of my site: http://www.php-development.ru/javascripts/tabview.php http://www.php-development.ru/ You will get 50% commission on all orders made by your referrals. More information can be found here: http://www.php-development.ru/affiliates.php*/// ----- Auxiliary -------------------------------------------------------------function tabview_aux(TabViewId, id){ var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling);}// ----- Functions -------------------------------------------------------------function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form action="tabview.html" method="get"><div class="TabView" id="TabView"><!-- *** Tabs ************************************************************** --><div class="Tabs" style="width: 350px;"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div><!-- *** Pages ************************************************************* --><div class="Pages" style="width: 350px; height: 250px;"> <div class="Page"> <div class="Pad"> <!-- *** Page1 Start *** --> <br> <table> <table> <tr> <td style="vertical-align: top;">Distributed form: </td> <td> <input type="text" name="first"> <br> <small>Note: the rest of the form is at the Tab 3.</small> </td> </tr> </table> <!-- *** Page1 End ***** --> </div> </div> <!-- *** Page2 Start *** --> <div class="Page"> <div class="Pad"> Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br>Tab2<br> <!-- *** Page2 End ***** --> </div> </div> <div class="Page"> <div class="Pad"> <!-- *** Page3 Start *** --> <br> <table> <tr> <td>Username: </td> <td><input style="width: 120px;" type="text" name="username"></td> </tr> <tr> <td>Password: </td> <td><input style="width: 120px;" type="password" name="password"></td> </tr> <tr> <td> </td> <td><input type="submit" value="Submit"></td> </tr> </table> <!-- *** Page3 End ***** --> </div> </div></div></div></form><script type="text/javascript">tabview_initialize('TabView');</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/Tab_View/tabs.png