I am looking for a way to add tabs to my asp.net pages. I saw an
application that had tabs on it. It seem as they did it with javascript,
because when you click on each tab. It didn't post back to the server to
load the tab information.
Any Suggestions?
MarkIt can be done on the client side using divs which are positioned one on top
of the other, and by changing the Z-order of the divs.
HTH,
Kevin Spencer
Microsoft MVP
.Net Developer
What You S
Is What You Get.
"SouthSpawn" <southspawn@.aol.com> wrote in message
news:1405e751c119caa9997ebc3d65258101@.lo
calhost.talkaboutsoftware.com...
>I am looking for a way to add tabs to my asp.net pages. I saw an
> application that had tabs on it. It seem as they did it with javascript,
> because when you click on each tab. It didn't post back to the server to
> load the tab information.
> Any Suggestions?
> Mark
>
> I am looking for a way to add tabs to my asp.net pages. I saw an
> application that had tabs on it. It seem as they did it with javascript,
> because when you click on each tab. It didn't post back to the server to
> load the tab information.
Right. There is no such thing as 'tabs' in HTML. So, you need to fake it. If
you want it to work all client-side, then you need to use Javascript.
Typically, you have a variety of links and then you use a javascript
function to swap the CSS display: attribute for each 'panel' from BLOCK to
NONE.
-Darrel
Kevin,
Can you give me a small code example of this?
Mark
Hi Mark,
I'm afraid I don't have one. I just know what the tools are, and how to use
them. I could write one, but then again, so could you. You would have to do
the same thing I would: Look up information on the HTML div element, and use
that.
I have a lot of general information in my head, but when it comes to
specifics, I have to look things up just like everybody else. God forbid I
should have to memorize the entire CLR, or the entire HTML DOM! I only know
enough to know what toool to use, not necessarily all the details about
implementing the tool. For that, I rely on my extensive ever-growing
reference library.
For example, the MSDN Library has a complete reference on the HTML DOM. And
Google is my home page! ;-)
HTH,
Kevin Spencer
Microsoft MVP
.Net Developer
What You S
Is What You Get.
"SouthSpawn" <southspawn@.aol.com> wrote in message
news:bd6bdd601af05a79327eac771304fb75@.lo
calhost.talkaboutsoftware.com...
> Kevin,
> Can you give me a small code example of this?
> Mark
>
> Can you give me a small code example of this?
This isn't for tabs, but the concept is the same. Save the below as an HTML
file and then open in your browser to see how things work...
========================================
====================================
==
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Javascript DIV toggle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language=javascript type='text/javascript'>
// Toggle function graciously provided by Mick White
// be sure to change the path to the close.gif file to match your directly
setup
function toggle(id){
var toggleLink = id + 'Toggle';
if(document.getElementById){
document.getElementById(id).style.display=
document.getElementById(id).style.display == "block"? "none":"block"
document.getElementById(toggleLink).style.backgroundImage=
document.getElementById(id).style.display == "block"?
"url(close.gif)":"url(open.gif)"
return;
}
}
function hideTextBlock(id){
if(document.getElementById){
document.getElementById(id).style.display = "none"
return;
}
}
function writeOutToggleLink(spanID, id, linkedText){
document.getElementById(spanID).innerHTML = '<a href="http://links.10026.com/?link=java script:void(0)"
onClick="toggle('details' + id + '')" id="details' + id + 'Toggle"
class="detailsToggleLink">' + linkedText + '</a>'
}
// ========================================
====================
</script>
<style type="text/css">
.details {
text-align: left;
background-color: #ffc;
padding: 10px;
border: 1px solid #cc9;
padding: 5px;
}
/* the open.gif is an icon that shows before the link to indicate that the
text block is now visible */
a.detailsToggleLink, a.detailsToggleLink:hover, a.detailsToggleLink:visited,
a.detailsToggleLink:active {
background: url("open.gif");
color: #666;
text-decoration: none;
border-bottom: 1px dashed #999;
background-repeat: no-repeat;
background-position: 0px 2px;
padding-left: 12px;
}
/* the following styles are just for this page...not needed for the
javascript to work */
body {
background-color: white;
font-family: verdana;
line-height: 150%;
padding: 15px 10%;
}
code {
font-family: monospace;
background-color: #FFFFCC;
border: 1px solid #666;
padding: 10px;
margin: 10px 30px;
display: block;
}
</style>
</head>
<body onload="writeOutToggleLink('appleToggleSpan', 'Apple', 'Tell me
more');hideTextBlock('detailsApple');wri
teOutToggleLink('orangeToggleSpan',
'Orange', 'Tell me more');hideTextBlock('detailsOrange');">
<h1>Javascript DIV toggle</h1>
<div class="content">
<h3>How this works</h3>
<p>Javascript is used to change the style sheet on the fly for each hidden
block of text. By default, it is set to display: hidden. The javascript link
changes it to display: block, thereby making it visible on the page</p>
<p>This has been tested in IE 6/PC and Firefox. It may not work on other
browsers.</p>
<p>For each block of text you want to show/hide, you need a 'toggle' link to
call the javascript function that, in turns, changes the CSS of the text
block so that it becomes visible or not visible:
</p>
<code><a href="http://links.10026.com/?link=java script:void(0)"
onClick="toggle('details[ID]')" id="details[ID]Toggle"
class="detailsToggleLink">Tell
me more</a></code>
<p>HOWEVER, we will not actually be placing the above HTML link in our
source code. Instead, we're going to insert the above link via javascript
into an empty SPAN tag. Each 'tell me more' link is actually an empty SPAN
tag. When the page loads, IF the person has javascript, these SPAN tags get
filled with the toggle link that shows/hides the block of text. (if you
don't have javascript, then the toggle links wouldn't do anyting, so there
is no point in showing them to folks that don't have javascript):</p>
<code> <span id="[id]ToggleSpan"></span></code>
<p>And each block of content you want toggled on and off will have be
wrapped in a div that looks like this:</p>
<code><div id="details[ID]"
class="details"></code>
<p>For each toggle set (link + block of text) you need to replace the
'[ID]' in the above code with a unique word. This allows the main javascript
function to uniquely identify each set an only enact upon that particular
set at a time.</p>
<p>Then, to put it all together, we need to call some events in the BODY
tag when the page loads. For each set of toggle links + text block, we need
to do two things. First, we need to insert the HTML link into the empty SPAN
tags. Secondly, we need to hide the text boxes when the page first loads. We
do this so that if a person doesn't have javascript, they don't see the
links, and the text isn't hidden from them.</p>
<code> <body onload=& quot;writeOutToggleLink('[ID]ToggleSpan'
, 'Apple',
'Tell me more');hideTextBlock('details[ID]');"></code>
<p>The above functions are written as such:</p>
<p>writeOutToggleLink(the ID of the span you want the link inserted into,
the keyword you are using for this set, the actual text of the link)</p>
<p>hideTextBlock(the DIV ID of the text block)</p>
<p>You will need to call each of those functions for each of the sets of
links/textblocks that you have on the page.</p>
<hr>
<p>Sample Link 1 (using ID of 'Apple')
<span id="appleToggleSpan"></span></p>
<div id="detailsApple" class="details">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.</div>
<p>Sample Link 2 (using ID of 'orange') <span
id="orangeToggleSpan"></span></p>
<div id="detailsOrange" class="details">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.</div>
</div>
</body>
</html>
"SouthSpawn" <southspawn@.aol.com> wrote in
news:1405e751c119caa9997ebc3d65258101@.lo
calhost.talkaboutsoftware.com:
> I am looking for a way to add tabs to my asp.net pages. I saw an
> application that had tabs on it. It seem as they did it with javascript,
> because when you click on each tab. It didn't post back to the server to
> load the tab information.
> Any Suggestions?
ASP.NET's IE Controls does have a tab control... but it's IE specific.
Do a google search for Javascript Tabs, you'll find several examples : )
Lucas Tam (REMOVEnntp@.rogers.com)
Please delete "REMOVE" from the e-mail address when replying.
[url]http://members.ebay.com/aboutme/
spot18/[/url]
