Saturday, March 23, 2013

Create a Tab control using JQuery in ASP.NET

By using the below code we can make a simple JQuery tab control. In this example i am going to create two tab. When we click a tab a table will be hide and another table will be visible.
  • Befor start coding download and add latest JQuery library and refer it in code like below inside head section.
<script src='js/common/jquery-1.9.1.js' ></script>
  •  Then add the below JQuery code inside head section in ASP.NET HTML design page

<script type="text/javascript">
    $(document).ready(function () {
        $(".tabLink").each(function () {
            $(this).click(function () {
                tabeId = $(this).attr('id');
                $(".tabLink").removeClass("activeLink");
                $(this).addClass("activeLink");
                $(".tabcontent").addClass("hide");
                $("#" + tabeId + "-1").removeClass("hide")
                return false;
            });
        });
    });
 </script>
  • Then add the below code in body section. This is actually a tab design.
<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="contact_tab_box">
        <a href="javascript:;" class="tabLink activeLink" id="tab1">Tab1</a>
        <a href="javascript:;" class="tabLink " id="cont-2">Tab2</a>
        </td>
    </tr>
</table>
  • Now we have to design two tables to work with the tab when we click it
<table width="100%" class="tabcontent" id="t1">
    <tr>
        <td>
        DO YOUR DESIGN HERE
        </td>
    </tr>
</table>

<table width="100%" class="tabcontent hide" id="t2"> <tr> <td> DO YOUR DESIGN HERE </td> </tr> </table>
  • We need the below CSS for better design
.contact_tab_bar_left {
    background: #F2F2F2;
}
.contact_tab_bar_right {
    background: #F2F2F2;     border-radius:0px 6px 6px 0px; }
.contact_tab_box {     background: #EEEEEE; }
.contact_tab_box a {     font-family:Arial;     font-size:14px;     border:1px solid #797979;     color:#000;
    padding: 7px 30px;     text-decoration:none;     background-color: #eee;     border-radius: 6px 6px 0px 0px;     -moz-border-radius: 6px 6px 0px 0px;     -webkit-border-radius: 6px 6px 0px 0px; }
.contact_tab_box a.activeLink {     font-family:Arial;     font-size:14px;     font-weight: bold;     background-color: #3F3F3F;     color:#FFFFFF;     border-bottom: 0;     padding: 7px 30px;     border-radius: 6px 6px 0px 0px;     -moz-border-radius: 6px 6px 0px 0px;     -webkit-border-radius: 6px 6px 0px 0px; }
.contact_tab_content {     border: 1px solid #797979;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;     border-radius: 6px; } .hide { display: none;}