Version complète: jsB@nk » Menu » Navigation » Voir Tab
URL: https://www.javascriptbank.com/tab-view-index.html
Une combinaison de CSS et JavaScript qui permet la commutation entre plusieurs pages sans les charger du serveur. Le scénario simule le comportement des onglets de contrôles dans les applications Windows.
Version complète: jsB@nk » Menu » Navigation » Voir Tab
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