Blue Theme Orange Theme Green Theme Red Theme
 
MindFusion's Components
Home | Forums | Videos | Photos | Downloads | Blogs | Interviews | Jobs | Beginners | Training
 | Consulting  
Submit an Article Submit a Blog 
 Login Close
User Id:
Password:
 
Forgot Password
Forgot Username
Why Register
 Jump to
Skip Navigation Links
TechnologyExpand Technology
WebsiteExpand Website
 Resources  
Close
 Our Network  
Close
Search :       Advanced Search »
Home » AJAX » Ajax tab control using CSS

Ajax tab control using CSS

In this article, I am going to discuss how to use Ajax tab control using CSS.

Author Rank:
Total page views :  9333
Total downloads :  472
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
AjaxTab.zip
 
Become a Sponsor


Here I am going to discuss how to use Ajax tab control using CSS.
There are some easy steps to create Ajax Tab control.
Step1: Create new ajax enabled website and add reference of AjaxControlToolkit.dll in solution explorer.
Step 2: Add some image which are used in CSS.
Image1.JPG

Figure 1: Solution Explorer
Step 3: Use the following style in the tab container.
<style type="text/css">
.fancy .ajax__tab_header
{
font-size:13px;
font-weight:bold;
color:#000000;
font-family:sans-serif;
background:url(img/blue_bg.jpg) repeat-x;
}

.fancy
.ajax__tab_active .ajax__tab_outer,
.fancy .ajax__tab_header .ajax__tab_outer,
.fancy .ajax__tab_hover .ajax__tab_outer
{
height:46px;
background:url(img/blue_left.jpg) no-repeat left top
;
}

.fancy
.ajax__tab_active .ajax__tab_inner,
.fancy .ajax__tab_header .ajax__tab_inner,
.fancy .ajax__tab_hover .ajax__tab_inner
{
height:46px;
margin-left:16px; /* offset the width of the left image */
background:url(img/blue_right.jpg) no-repeat right top
;
}

.fancy
.ajax__tab_active .ajax__tab_tab,
.fancy .ajax__tab_hover .ajax__tab_tab,
.fancy .ajax__tab_header .ajax__tab_tab
{
margin:16px 16px 0px 0px;
}

.fancy
.ajax__tab_hover .ajax__tab_tab,
.fancy .ajax__tab_active .ajax__tab_tab
{
color:#cccccc
;
}

.fancy
.ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:2px;
background-color:#666666;
}

</style>

Step 4: Drag AjaxToolKit:TabContainer from the toolbox and drop on the page like as follows:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" CssClass="fancy"
ActiveTabIndex="0">
<
ajaxToolkit:TabPanel ID="TabAboutUs" runat="server" HeaderText="About Me">
<
ContentTemplate>
<
table cellspacing="2" cellpadding="2" background="img/Bg2.gif" width="100%" height="300">
<
tr align="left" valign="top">
<
td>
<
h3>
Purushottam Rathore</h3>
</
td>
</
tr>
</
table>
</
ContentTemplate>
</
ajaxToolkit:TabPanel>
<
ajaxToolkit:TabPanel ID="TabAddress" runat="server" HeaderText="Address">
<
ContentTemplate>
<
table cellspacing="2" cellpadding="2" width="100%" background="img/Bg2.gif" height="300">
<
tr align="left" valign="top">
<
td>
<
h3>
Noida</h3>
</
td>
</
tr>
</
table>
</
ContentTemplate>
</
ajaxToolkit:TabPanel>
<
ajaxToolkit:TabPanel ID="TabCountry" runat="server" HeaderText="Country">
<
ContentTemplate>
<
table cellspacing="2" cellpadding="2" width="100%" height="300" background="img/Bg2.gif">
<
tr align="left" valign="top">
<
td>
<
h3>
India</h3>
</
td>
</
tr>
</
table>
</
ContentTemplate>
</
ajaxToolkit:TabPanel>
<
ajaxToolkit:TabPanel ID="TabPhoto" runat="server" HeaderText="My Photo">
<
ContentTemplate>
<
table cellspacing="2" cellpadding="2" width="100%" height="300" bgcolor="WhiteSmoke">
<
tr align="left" valign="top">
<
td>
<
img src="puru.jpg" />
</
td>
</
tr>
</
table>
</
ContentTemplate>
</
ajaxToolkit:TabPanel>
</
ajaxToolkit:TabContainer>

OutPut: Here I am using ActiveTabIndex property of tabcontainer is zero as follows:
 <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" CssClass="fancy"
ActiveTabIndex="0">

So the first tab is selected by default.


Image2.JPG

Figure 2: By default First tab is selected because I set ActiveTabIndex="0".

 image3.JPG
Figure 3:


Login to add your contents and source code to this article
 About the author
 
Purushottam Rathore
I am working as a Software Developer and has around 2+ years of experience in the IT industry and having a Master Degree in Computer Application. I really like to work in the .NET platform. and working with, ASP.NET 2.0/3.5, Web Services, WPF, WCF, Silverlight, AJAX, JavaScript, JQuery, Ado.net, MsAccess, SQL Server 2005/2008 .
Looking for C# Consulting?
C# Consulting is founded in 2002 by the founders of C# Corner. Unlike a traditional consulting company, our consultants are well-known experts in .NET and many of them are MVPs, authors, and trainers. We specialize in Microsoft .NET development and utilize Agile Development and Extreme Programming practices to provide fast pace quick turnaround results. Our software development model is a mix of Agile Development, traditional SDLC, and Waterfall models.
Click here to learn more about C# Consulting.
 
Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.
Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Dynamic PDF
ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications.
Go.NET
Build custom interactive diagrams, network, workflow editors, flowcharts, or software design tools. Includes many predefined kinds of nodes, links, and basic shapes. Supports layers, scrolling, zooming, selection, drag-and-drop, clipboard, in-place editing, tooltips, grids, printing, overview window, palette. 100% implemented in C# as a managed .NET Control. Document/View/Tool architecture with many properties&events. Optional automatic layout.
Dundas Software
Dundas Chart for .NET is the most advanced .NET charting package available today.  With an extremely complete feature set, elegant architecture and easy implementation, Dundas Chart can quickly add advanced Charting functionality to enhance and transform ASP.NET and Windows Forms applications.  Whether you are implementing charting into internal projects, or building applications for clients, Dundas Chart offers advanced technology and advanced results to get the most out of data.
Clickatell's SMS Gateway
Clickatell's Developer Solutions allow you to SMS enable any website or application via a range of API's. Learn More about our API connections.
Free access to .NET Memory Management video
Everything you need to know about Garbage Collection, Temporary Objects, Fragmentation, Finalization and common causes of memory leaks in .NET. Watch the video here.
Microsoft Visual Studio 2010 Professional
Microsoft Visual Studio 2010 Professional will launch on April 12, but you can beat the rush and secure your copy today by pre-ordering at the affordable estimated retail price of $549 (US). Pre-order now.
Nevron Chart for .NET 2010.1 Now Available
The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.
Developer-Ready ASP.NET 2.0 Web Hosting with 3 MONTHS FREE
Now supporting .NET 3.0 Framework with Windows Workflow Foundation, Windows Communication Foundation (WCF), Windows Presentation Foundation (WPF), windows CardSpace (WCS)! Providing more flexibility for Developers with Web Services Support and a User/Permission Manger. Also supporting MS SQL 2005/2000 with Real-Time Backups, FREE Automated Attach .MDF Tool, FREE SQL Restore and Shrink SQL DB Tools, and SQL
 
   Print Read/Post comments Post a comment  Similar Articles  
   Email to a friend  Bookmark  Author's other articles  
Download Files:
AjaxTab.zip
 
 Post a Feedback, Comment, or Question about this article
Subject:  
Comment:  
Become a Sponsor
 Comments
How do I paginate a tab using Ajax by venu On September 27, 2009

I am a self taught php programmer trying to make a blogging site using php and Ajax How do I paginate individual tab? I am using this code:

<?php
//  database connection
require_once('./includes/base.php');

if($_GET['logout'] == 1){
    @$_SESSION = array();
    @session_unregister($_SESSION['userID']);
    @session_unregister($_SESSION['userName']);
    @session_unregister($_SESSION['userUser']);
    @session_unregister($_SESSION['userPass']);
    @session_destroy();
}

require("./templates/$template/header.php");
include 'pagination.class.php';

?>

<div id="blurb"  align="right">

<script language="javascript">
    function isClear()
        {
            document.myForm[0].value='';
            return true;
       
        }
    </script>
    <!-- new search -->
    <?php
ob_start();
if(!empty($_SESSION['userID']) and !empty($_POST['user'])){
echo '<form action="search.php" method="post" name="myForm">
<input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/>
<input type="submit" name="serachuser" value="search"/></form>';
}
?>
</div>
<br>
<div id="blurb" align="justify">
Hello world <?php echo "$sitename"; ?> is blah, blah, blah.......!
</div>
<br>

 <div id="container-5">
            <ul>
                <li><a href="#fragment-13"><span>Blogs</span></a></li>
                <li><a href="#fragment-14"><span>Links</span></a></li>
                <li><a href="#fragment-15"><span>Images</span></a></li>

            </ul>
            <div id="fragment-13">
                <?php
   

$sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar  FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC ");                
while($row = mysql_fetch_array($sql)){
    $abcd= $row['userName'];
    $abcd = str_replace (" ", "-", $abcd);
 $time = reltime($row['postTime']);

    echo '
    <div class="virtualpage">
     <table width="100%" >
      <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'"  width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8"  border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a>&nbsp;'.$row['postComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time.'</a></td>
    </table><br>
   
    </div>';}

 


    ?>

<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>
<table align="center"><tr><td align="center">
<script type="text/javascript"  defer="defer">
var gallery=new virtualpaginate("virtualpage",10)
gallery.buildpagination("gallerypaginate")
</script>
</td></tr></table>

            </div>


</div>

 

            </div>


            <div id="fragment-14">
                <?php

                 $sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC");
while($row = mysql_fetch_array($sql)){
    $abcd= $row['userName'];
    $abcd = str_replace (" ", "-", $abcd);
 $time1 = reltime($row['linksTime']);

    echo '
    <div class="virtualpage">
     <table width="100%" >
      <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'"  width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8"  border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a>&nbsp;'.$row['linksComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time1.'</a></td>
    </table><br>
   
    </div>';}

    ?>


 


            </div>
            <div id="fragment-15">
                <?php
                // testing
                grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20');

                ?>

            </div>
        </div>

 

 

 


<?php

// Display footer
require("./templates/$template/footer.php");
?>

 

The above virtual pagination shows up in every tab.

Reply | Email | Delete | Modify | 
I need to set the selected Ajax tab from a button event on another tabbed window by Roger On February 11, 2010
Hello Purushottam, I wonder if you can suggest how I can change the selected tab from another window in the tab container. This is my aspx code:

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate><div>
<tabctrl:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="1250px" ScrollBars="None"><tabctrl:TabPanel ID="TabPanelMap" runat="server" HeaderText="Map">
And here is the codebehind I am using:
AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)TabContainer1;
container.ActiveTabIndex = 2;
I get the error that the 'TabContainer1' does not exist in this context.
Do you have any thoughts? Thank you.


Reply | Email | Delete | Modify | 

 Hosted by MaximumASP  |  Found a broken link?  |  Contact Us  |  Terms & conditions  |  Privacy Policy  |  Site Map  |  Suggest an Idea  |  Media Kit
Current Version: 5.2009.6.2
 © 2010  contents copyright of their authors. Rest everything copyright Mindcracker. All rights reserved.