Two tab: Easy Tabs 1.2 : Tab « GUI Components « JavaScript DHTML






Two tab: Easy Tabs 1.2

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easy Tabs 1.2 - presented by Kollermedia.at</title>

<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
/*Example for a Menu Style*/
.menu {background-color:#008bd3;border-bottom:1px solid #d7d7d7; height:23px;width:300px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; }
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold;  position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2, #anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6 {border:1px solid #ececec; width:298px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}
</style>


<script type="text/javascript">
/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
www.kollermedia.at | www.austria-media.at
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/

//EASY TABS 1.2 - MENU SETTINGS
//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent") 
//Set the number of your tabs in each menu
var tabcount = new Array("4","6")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load)
var loadtabs = new Array("2","5")  
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 2;
//the speed in seconds when the tabs should change
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;
//END MENU SETTINGS


/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;} menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
</script>
</head>


<body>
<h2>Easy Tabs 1.2 - Example with 1 normal and 1 changing Menu</h2>

<!--Start of the Tabmenu 1 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">Tab 3 </a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;"  title="" id="tablink4">Tab 4 </a>
</li>
</ul>
</div>
<!--End of the Tabmenu 1 -->


<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->


<br/><br/>

<!--Start of the Tabmenu 2 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');"  onclick="return false;" title="" id="anotherlink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');"  onclick="return false;" title="" id="anotherlink2">Tab 2</a></li>
<li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');"  onclick="return false;" title="" id="anotherlink3">Tab 3</a></li>
<li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');"  onclick="return false;" title="" id="anotherlink4">Tab 4</a></li>
<li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');"  onclick="return false;" title="" id="anotherlink5">Tab 5</a></li>
<li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');"  onclick="return false;" title="" id="anotherlink6">Tab 6</a></li>
</ul>
</div>
<!--End of the Tabmenu 2 -->


<!--Start Tabcontent 1 -->
<div id="anothercontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="anothercontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="anothercontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div id="anothercontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->

<!--Start Tabcontent 5-->
<div id="anothercontent5">Tabcontent 5</div>
<!--End Tabcontent 5-->

<!--Start Tabcontent 6-->
<div id="anothercontent6">Tabcontent 6</div>
<!--End Tabcontent 6-->


<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>
<div style="background-color:#efefef; margin-top:25px; padding:8px;">
<strong>Settings setted for this menu:</strong><br/>
<strong>loadtabs = 2, 5 </strong> (load tab 2 in first menu and tab 5 in second menu at start)<br/>
<strong>autochangemenu = 2 </strong>(set the second menu to autochange - if you want the first menu to autochange just set this to 1)<br/>
<strong>changespeed = 3 </strong>(change every 3 seconds)<br/>
<strong>stoponhover = 0 </strong>(don't stop the autochange on hover)</div>
</body>
</html>
   
     
  








Related examples in the same category

1.Tab Manager 1
2.Tab Manager 2
3.Tab control for a game
4.Tabs in JavaScript
5.Tab with control inside
6.Slide tab
7.Tab control
8.Four Tab with different style
9.XP Tab in JavaScript
10.Two tab in one page
11.HTML style tab
12.Calendar in tab
13.Tab in javascript
14.Tab from gwidgets_0.8.0
15.One tab: Easy Tabs 1.2
16.three tabs: Easy Tabs 1.2
17.Tabber Example
18.Nested tab and tab changed event
19.Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected