Solved

building sub-tabs

Posted on 2008-10-13
7
1,174 Views
Last Modified: 2012-05-05
Greetings everyone:

I found the following scripts from the net. It is used to build tabbed pages.

My question is that I would like to use "sub-tabs" within each tab-page. Can this be done ?

If yes, can someone please give me an example of how to do this?

here is the current code that builds tabbed pages.
<!--#INCLUDE file= "../TabControl/TabControl.asp"-->
<%
'See if the default tab is passed to us
DefaultTab = Request.QueryString("Tab")
if DefaultTab = "" then
	DefaultTab = 2
else
	DefaultTab = cint(DefaultTab)
end if
 
' Declare and create our TabControl Object in memory
Dim MyTabControl, DefaultTab
Set MyTabControl = New TabControl
MyTabControl.TabType = TabTypeDynamic
MyTabControl.TabSelected = DefaultTab
MyTabControl.ControlImagePath = "../tabcontrol/"
MyTabControl.ControlScriptPath = "../tabcontrol/"
MyTabControl.TabWidth = "100"
MyTabControl.Width = "90%"
MyTabControl.Height = "800"
MyTabControl.OnClick = "countClicks('{0}');"
'We will just use the default value for the below properties
'MyTabControl.BGColor = "#F7F7F8"
%>
<head>
	<title>tabbed pages</title>
</head>
<script language="javascript">
var intClicks = 0;
 
function countClicks(strIndex) {
	intClicks +=1;
	document.getElementById("ClickCounter").innerHTML = intClicks +" (tab="+ strIndex +")";
}
</script>
<body topmargin="0" leftmargin="0" rightmargin="0">
<br>
	<center>
	<%
	'Add Tabs
	MyTabControl.AddTab "INTAKE","icon_company.gif","tab1"
	MyTabControl.AddTab "SUP","icon_user.gif","tab2"
	MyTabControl.AddTab "PARTNERS","icon_activity.gif","tab3"
	MyTabControl.AddTab "ADMIN","admin_icon.png","tab4"
	MyTabControl.AddTab "REPORTS","reportEx.gif","tab5"
	MyTabControl.AddTab "SEARCH","icon_search.gif","tab6"
	MyTabControl.AddTab "LOGOUT","logout.png","tab7"
 
	'Draw Tab Control
	MyTabControl.Draw
 
	'Add your content to div's which have the corresponding tab id as passed to AddTab
	%>
	<div id='tab1'>
	<!--#INCLUDE FILE="tab_tab1.asp"-->
	</div>
	<div class=TabContent id="tab2">
	<!--#INCLUDE FILE="tab_tab2.asp"-->
	</div>
	<div id="tab3">
	<!--#INCLUDE FILE="tab_tab3.asp"-->
	</div>
	<div id='tab4'>
	<!--#INCLUDE FILE="tab_tab4.asp"-->
	</div>
	<div class=TabContent id="tab5">
	<!--#INCLUDE FILE="tab_tab5.asp"-->
	</div>
	<div id="tab6">
	<!--#INCLUDE FILE="tab_tab6.asp"-->
	</div>
	<div id='tab7'>
	<!--#INCLUDE FILE="tab_tab7.asp"-->
	</div>
 
	<font face='arial' size='2'>Optional tab width is set to make the tabs the same size and OnClick event used in this demo.<br>
	OnClick event counter: <span id="ClickCounter">0</span>
	</font>
	</center>
</body>
</html>

Open in new window

0
Comment
Question by:nigerman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22703043
hi
its better you can write your own code using javascript and DIV

please refer the below link from that you can write your own sub tab inside tab

http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html

tab control is simple DIV show hide using the javascript
0
 

Author Comment

by:nigerman
ID: 22703470
thanks for your prompt response.
I wanted to see the example but the link is broken.

Any link that works?
0
 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22703610
Hi,

The link above it working but the link inside to that page is not work and I know that, I gave the above link to you to get idea on how to build the tab control using DIV and Javascript and it require you to work on it, try to write your logic and if you get stuck then feel free to post your code where you are stuck and experts are there to assist you
0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

Author Comment

by:nigerman
ID: 22703735
Well,

For me,it is hard to use that example to write mine when even the example they gave doesn't work, and I am not talking about the broken link.

I have gobbled together the example shown on that page and it doesn't even show on the screen.
0
 
LVL 7

Expert Comment

by:ASPSQLServerCOM
ID: 22704376
http://javascript.internet.com/miscellaneous/show-hide-a-div.html

click source code tab and you can see tab inside tab
0
 
LVL 7

Accepted Solution

by:
ASPSQLServerCOM earned 125 total points
ID: 22704508
the link
http://www.aliroman.com/article/how-to-create-web-tabs-with-javascript-show-hide-layers-34-1.html

code


<HTML>
<head>
<style type="text/css">
<!--
.tab_hover {
background-color:blue;
color:white;
cursor:pointer;
width:137px;
height:20px;
background-image:url(./images/ltab_blue.gif);
border:0px;
text-align:center;
font-family:verdana;
font-size:12px; 
font-weight:bold;
}
.tab {
background-color:blue;
color:white;
cursor:pointer;
width:137px;
height:20px; 
background-image:url(./images/ltab_blue2.gif);
border:0px;
text-align:center;
font-family:verdana;
font-size:12px; 
font-weight:none;
}
.data_tab {
border:1px solid gray; 
width:500px;
height:100px;
text-align:left;
font-family:verdana;
font-size:12px; 
padding:.3em;
}
-->
</style>
</HEAD>
<script type="text/javascript">
<!--
  // Tabber created by: Patrick Fitzgerald | http://www.barelyfitz.com
  document.write('<style type="text/css">.tabber{display:none;}<\/style>');
 
var last_tab = 'tab1';
function show(layerName) { 
	document.getElementById(layerName).style.display = '';
} 
 
function hide(layerName) { 
	document.getElementById(layerName).style.display = 'none';
} 
 
function show_next(tab_name) {
	document.getElementById(last_tab).className = 'tab';
	var curr = document.getElementById(tab_name);
	curr.className='tab_hover';
	hide(last_tab+'_data');
	show(tab_name+'_data');
	last_tab=tab_name;
}
//-->
</script>
<body>
<table cellpadding=0 cellspacing=0 border=0>
<tr> 
<td id=tab1 class=tab_hover onclick="javascript:show_next('tab1')">Football</td>
<td id=tab2 class=tab onclick="javascript:show_next('tab2')">Basketball</td> 
<td id=tab3 class=tab onclick="javascript:show_next('tab3')">Lacrosse</td> 
</tr>
<tr> 
<td valign="top"> 
<div id=tab1_data>
$tab1_data
</div>
</td>
<td>
<div id=tab2_data style='display:none'>
$tab2_data
</div>
</td>
<td>
<div id=tab3_data style='display:none'>
$tab3_data
</div>
</td>
</tr>
<tr>
<TD>
<input type=button onclick="javascript:show_next('tab1')" value='Select Tab1'>
</td>
<td>
<input type=button onclick="javascript:show_next('tab2')" value='Select Tab2'>
</td>
<td>
<input type=button onclick="javascript:show_next('tab3')" value='Select Tab3'>
</tr>
</table>
 
</body></html>

Open in new window

0
 

Author Comment

by:nigerman
ID: 22754476
thank you, that's not what I was looking for but I thank you a lot for your efforts.
0

Featured Post

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 73
w3c parsing errors 4 36
Horizontal Full Calendar using php 5 38
Form submit takes only for one form 23 46
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question