www.webdeveloper.com
Results 1 to 2 of 2

Thread: asp ajax tabs help needed

  1. #1
    Join Date
    Dec 2002
    Posts
    213

    Question asp ajax tabs help needed

    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:
    HTML 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:
    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;}
    Finally the script:
    Code:
    $(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

  2. #2
    Join Date
    Dec 2002
    Posts
    213

    asp ajax help

    Hi
    Can someone here please help me with this?
    thnx

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles