dzigner
25 May 2009, 10:05 PM
Hi
I have an asp ajax tab box implemented using jquery. I copied the code from http://www.aspajax.org/
I have used the script from http://www.aspajax.org/asp-ajax-examples-tabstrip.asp, and it works fine.
I want to add this functionality to the code, that when I click on the tab, it should change to be the active tab. Right now, the tab reverts back to the original state after clicking. Here is the code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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=utf-8" />
<title>Services offered by D.zigns</title>
<!--#include file="metatags.htm"-->
<!--#include file="ASPAjax.asp"-->
<link href="scripts/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="conttext">Text Container
<% ASPAjax.open()%>
<div id="tabHolder">
<div id="tabMenu">
<ul id="TabNav">
<li><a href="?Tab=1" class="active"><span>Web Design</span></a></li>
<li><a href="?Tab=2" ><span>Development</span></a></li>
<li><a href="?Tab=3" ><span>Applications</span></a></li>
<li><a href="?Tab=4" ><span>Redesign</span></a></li>
<li><a href="?Tab=5" ><span>Site Maintenance</span></a></li>
<li><a href="?Tab=6" ><span>Graphics</span></a></li>
<li><a href="?Tab=7" ><span>Business Identity</span></a></li>
<li><a href="?Tab=8" ><span>Hosting</span></a></li>
<li><a href="?Tab=9" ><span>Domain</span></a></li>
<li><a href="?Tab=10" ><span>Others</span></a></li>
</ul>
</div><!-- end of tabMenu -->
<%
dim myPanel
Set myPanel = ASPAjax.CreateUpdatePanel
myPanel.Id = "TABSTRIP"
myPanel.RegisterTriggerGroup("TabNav")
myPanel.Open
%>
<div id="tabContent">
<% Select Case Request.QueryString("Tab")
CASE "2" %>
<h1>Development</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus sit amet nunc fermentum dictum. Sed sit amet nunc vel mi condimentum aliquet. Integer eleifend aliquam urna. Pellentesque quis ligula. Sed facilisis posuere neque. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla semper leo. Fusce sed ipsum. Aliquam auctor ligula sit amet massa. Aliquam erat volutpat. Nunc neque elit, vulputate sed, ultricies ut, porttitor eu, felis. Ut id justo. Donec mauris enim, lobortis vitae, pretium ut, vulputate vel, tortor. </p>
<% CASE "3" %>
<h1>Applications</h1>
<p>Ut a justo a tortor mollis tempus. Integer scelerisque. Suspendisse potenti. Suspendisse vitae erat. Donec eu nisi commodo arcu luctus luctus. Suspendisse eget purus. Phasellus arcu pede, congue id, pretium eget, dignissim non, neque. Duis aliquet, mauris id pellentesque porttitor, erat turpis vulputate enim, in convallis eros diam a ligula. Aenean tristique mi in pede. Praesent enim ligula, mattis eu, fringilla sit amet, rutrum eget, nibh. Donec hendrerit, sapien et suscipit pretium, nibh mauris aliquam ligula, et feugiat elit arcu at diam. In eros nulla, congue quis, volutpat ut, blandit non, nisi. </p>
<% CASE "4" %>
<h1>Redesign</h1>
<p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
<% CASE "5" %>
<h1>Site Maintenance</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "6" %>
<h1>Graphics</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "7" %>
<h1>Business Identity</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "8" %>
<h1>Hosting</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "9" %>
<h1>Domains</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "10" %>
<h1>Others</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE Else%>
<h1>Web Design</h1>
<p>This example shows how to easily build a tabstrip control using ASPajax.</p><p> An UpdatePanel is created - an area where all ASP actions occur without refreshing the page. The RegisterTriggerGroup functon is used to neatly associate all of the tab links with the AJAX UpdatePanel. </p>
<% END Select%>
<%
myPanel.Close
set myPanel = nothing
%>
</div><!-- end of tabContent-->
</div><!-- end of tabHolder -->
<% ASPAjax.Close()%>
</div><!-- end of conttext -->My css code:
#tabMenu {float:left; width:100%; font-size:70%; line-height:normal;border-bottom:1px solid #24618E;}
#tabMenu ul {margin:0; padding:10px 10px 0 10px; list-style:none;}
#tabMenu li {display:inline; margin:0; padding:0; }
#tabMenu a {float:left; background:url(../images/servicetabs.gif) top left no-repeat; margin:0; padding:0; text-decoration:none;}
#tabMenu a span {float:left; display:block; padding:5px 15px 4px 6px; color:#f99400; font-weight:bold;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabMenu a span {float:none;}
/* End IE5-Mac hack */
#tabMenu a:hover {background-position:0% -42px;}
#tabMenu a:hover span {color:#551a8b; background-position:100% -42px;}
#tabMenu li.active {background-color:#f99400; color:#551a8b;}
#tabContent {width:100% clear:both; padding:10px 10px 0 10px;}
#tabHolder {clear:both; border:#808080 thin dotted;-moz-border-radius: 10px;-webkit-border-radius: 10px;}The script:
$(document).ready(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('> .dir',this).addClass("open");
$('ul:first',this).css('visibility', 'visible');
},function(){
$(this).removeClass("hover");
$('.open',this).removeClass("open");
$('ul:first',this).css('visibility', 'hidden');
});
});The other files I use are aspajax.asp and jquery.js from the original website.
Please tell me how to implement the active tab code and where to put it.
Thanks
I have an asp ajax tab box implemented using jquery. I copied the code from http://www.aspajax.org/
I have used the script from http://www.aspajax.org/asp-ajax-examples-tabstrip.asp, and it works fine.
I want to add this functionality to the code, that when I click on the tab, it should change to be the active tab. Right now, the tab reverts back to the original state after clicking. Here is the code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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=utf-8" />
<title>Services offered by D.zigns</title>
<!--#include file="metatags.htm"-->
<!--#include file="ASPAjax.asp"-->
<link href="scripts/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="conttext">Text Container
<% ASPAjax.open()%>
<div id="tabHolder">
<div id="tabMenu">
<ul id="TabNav">
<li><a href="?Tab=1" class="active"><span>Web Design</span></a></li>
<li><a href="?Tab=2" ><span>Development</span></a></li>
<li><a href="?Tab=3" ><span>Applications</span></a></li>
<li><a href="?Tab=4" ><span>Redesign</span></a></li>
<li><a href="?Tab=5" ><span>Site Maintenance</span></a></li>
<li><a href="?Tab=6" ><span>Graphics</span></a></li>
<li><a href="?Tab=7" ><span>Business Identity</span></a></li>
<li><a href="?Tab=8" ><span>Hosting</span></a></li>
<li><a href="?Tab=9" ><span>Domain</span></a></li>
<li><a href="?Tab=10" ><span>Others</span></a></li>
</ul>
</div><!-- end of tabMenu -->
<%
dim myPanel
Set myPanel = ASPAjax.CreateUpdatePanel
myPanel.Id = "TABSTRIP"
myPanel.RegisterTriggerGroup("TabNav")
myPanel.Open
%>
<div id="tabContent">
<% Select Case Request.QueryString("Tab")
CASE "2" %>
<h1>Development</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lectus sit amet nunc fermentum dictum. Sed sit amet nunc vel mi condimentum aliquet. Integer eleifend aliquam urna. Pellentesque quis ligula. Sed facilisis posuere neque. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla semper leo. Fusce sed ipsum. Aliquam auctor ligula sit amet massa. Aliquam erat volutpat. Nunc neque elit, vulputate sed, ultricies ut, porttitor eu, felis. Ut id justo. Donec mauris enim, lobortis vitae, pretium ut, vulputate vel, tortor. </p>
<% CASE "3" %>
<h1>Applications</h1>
<p>Ut a justo a tortor mollis tempus. Integer scelerisque. Suspendisse potenti. Suspendisse vitae erat. Donec eu nisi commodo arcu luctus luctus. Suspendisse eget purus. Phasellus arcu pede, congue id, pretium eget, dignissim non, neque. Duis aliquet, mauris id pellentesque porttitor, erat turpis vulputate enim, in convallis eros diam a ligula. Aenean tristique mi in pede. Praesent enim ligula, mattis eu, fringilla sit amet, rutrum eget, nibh. Donec hendrerit, sapien et suscipit pretium, nibh mauris aliquam ligula, et feugiat elit arcu at diam. In eros nulla, congue quis, volutpat ut, blandit non, nisi. </p>
<% CASE "4" %>
<h1>Redesign</h1>
<p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
<% CASE "5" %>
<h1>Site Maintenance</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "6" %>
<h1>Graphics</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "7" %>
<h1>Business Identity</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "8" %>
<h1>Hosting</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "9" %>
<h1>Domains</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE "10" %>
<h1>Others</h1>
<p>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 vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<% CASE Else%>
<h1>Web Design</h1>
<p>This example shows how to easily build a tabstrip control using ASPajax.</p><p> An UpdatePanel is created - an area where all ASP actions occur without refreshing the page. The RegisterTriggerGroup functon is used to neatly associate all of the tab links with the AJAX UpdatePanel. </p>
<% END Select%>
<%
myPanel.Close
set myPanel = nothing
%>
</div><!-- end of tabContent-->
</div><!-- end of tabHolder -->
<% ASPAjax.Close()%>
</div><!-- end of conttext -->My css code:
#tabMenu {float:left; width:100%; font-size:70%; line-height:normal;border-bottom:1px solid #24618E;}
#tabMenu ul {margin:0; padding:10px 10px 0 10px; list-style:none;}
#tabMenu li {display:inline; margin:0; padding:0; }
#tabMenu a {float:left; background:url(../images/servicetabs.gif) top left no-repeat; margin:0; padding:0; text-decoration:none;}
#tabMenu a span {float:left; display:block; padding:5px 15px 4px 6px; color:#f99400; font-weight:bold;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabMenu a span {float:none;}
/* End IE5-Mac hack */
#tabMenu a:hover {background-position:0% -42px;}
#tabMenu a:hover span {color:#551a8b; background-position:100% -42px;}
#tabMenu li.active {background-color:#f99400; color:#551a8b;}
#tabContent {width:100% clear:both; padding:10px 10px 0 10px;}
#tabHolder {clear:both; border:#808080 thin dotted;-moz-border-radius: 10px;-webkit-border-radius: 10px;}The script:
$(document).ready(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('> .dir',this).addClass("open");
$('ul:first',this).css('visibility', 'visible');
},function(){
$(this).removeClass("hover");
$('.open',this).removeClass("open");
$('ul:first',this).css('visibility', 'hidden');
});
});The other files I use are aspajax.asp and jquery.js from the original website.
Please tell me how to implement the active tab code and where to put it.
Thanks