Wednesday, September 17, 2008

Tab Control In ASP.Net Without third Party Controls




-> Tab Menu in ASP.Net can Be Archived by DIV. In this We Need two Div (First Consider Tab with 2 Menu)Put this Two DIV in Table and First Row of Table Divide in two column, Name This two Column As You Wish For Example In Below Screen Short There Are Two column Name Given Candidate(s) Suitable For You and Candidate(s) Forward by you.On Clicking of Individual Column Name We need to Hide or Show Div




 Now Write Down Below Code in First Cell click that means on Candidate(s) Suitable For You
 Click.

< td  id="celltech" class="MenuTabSelected" onclick="ShowTabContent('tech');HideTabContent('post');" style="width: 300px; height: 22px" >
               Candidate(s) Suitable For You < /td >



On Second Cell Click
< td  id="cellpost" class="MenuTab" onclick="HideTabContent('tech');ShowTabContent('post');" style="width: 300px; height: 22px" >
                            Candidate(s) Forward by you < /td >


And Write Down Following Java Script






< script type="text/javascript" language="javascript" >
        function ShowTabContent(TabID)
        {
        
            var TabControl=document.getElementById('cell' + TabID);
            var Tabdiv =document.getElementById('dv' + TabID);
            Tabdiv.style.display='block';
            TabControl.className='MenuTabSelected';
            return false;
        }
        function HideTabContent(TabID)
        {
        
            var TabControl=document.getElementById('cell' + TabID);
            var Tabdiv =document.getElementById('dv' + TabID);
            Tabdiv.style.display='none';
            TabControl.className='MenuTab';
            return false;
        }
      < /script >

Write Down Following code on Before Table Start. < script type="text/javascript" > ShowTabContent('tech');HideTabContent('post'); < /script > So Now your Tab control Ready Just See Below screenshot. CSS FOR Active\Deactive
.MenuTab
{

   color:black; 
   background-color  :#dce7f1;
   height :25px;
 font-size: 8pt;
 font-family: verdana;
 font-weight: bold;
 border: None;
 color:black;
    text-transform:uppercase;
 cursor:pointer;

    
}
.MenuTabSelected
{

  color :White; 
  background-image :url("./images/mainbg.jpg");
  height :28px;
    text-align:center; 
    vertical-align:middle;
 cursor:pointer;
 
 font-family:Verdana;
 font-size:12px;
 font-weight:bold;
   
   
}
 
 
 
Just take Image From your collection

Enjoy !!!!!!!!!!!!!



Prev Post                                                      All Post                                                           Next Post



No comments:

Post a Comment