AJAX Tab Control görünüm olarak yeterli bence, ancak bazı durumlarda ihtiyaçlarımızı karşılamayabilir. İhtiyaçlarımızı karşılamadığı durumlarda tabiki kendi stillerimizi kontrole uygulayarak istediğimiz görünümü sağlayabiliriz. Bunun için CSS in nimetlerinden faydalanacağız.

Bu adresten CSS class detaylarına ulaşabilirsiniz. Bu CSS sınıflarını aşağıda kısaca açıkalayacağım;

CSS class larınındaki outher, inner ve tab kelimelerini aşağıdaki gibi simüle edebiliriz. Aşağıdaki resmi Tab kontrolünün bir tab' ı şeklinde düşünebilirsiniz.

  • .ajax__tab_header: TabContainer ın en üstünde ve diğer tabları içine alan kontroldür.
  • .ajax__tab_outer: Tab ın sol taraf arka plan resmini veya CSS ini ayarlamamızı sağlayan elementtir.
  • .ajax__tab_inner: Tab ın sağ taraf arka plan resmini veya CSS ini ayarlamamızı sağlayan elementtir.
  • .ajax__tab_tab: Tab ın Text içeriğini tutan ve CSS ini ayarlamamızı sağlayan elementtir.
  • .ajax__tab_body: TabPanel içeriğini tutan ve CSS ini ayarlamamızı sağlayan elementtir.
  • .ajax__tab_hover . Mouse ile üzerine gelinen tab ın CSS ini ayarlamamızı sağlayan elementtir.
  • .ajax__tab_active: Aktif olan tab ın CSS ini ayarlamamızı sağlayan elementtir.

    • header, inner ve tab  kelimelerinin hiyerarşik yapısı da aşağıdaki gibidir.

    <span id="..." class="ajax__tab_active"> 
       <span class="ajax__tab_outer"> 
         <span class="ajax__tab_inner"> 
           <span id="..." class="ajax__tab_tab">Tab Text</span> 
        </span>
       </span>
    </span>

     Bu kısa bilgiden sonra aşağıdaki örnek üygulamada gösterildiği gibi CSS class larını TabControl e uygulayabiliriz. Aşağıdaki örnek uygulama için ilgili imajları da almanız gerekmektedir.

    İmajlar:

    Örnek Kodlar:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title>Untitled Page</title>

    <style type="text/css">

     

    .mumy .ajax__tab_body {

    font-family:verdana,tahoma,helvetica;

    font-size:10pt;

    border:1px solid #999999;

    border-top:0;

    padding:8px;

    background-color:#ffffff;

    }

     

    .mumy .ajax__tab_header {

    font-family:verdana,tahoma,helvetica;

    border-bottom:1px solid #999999;font-size:14px;

    }

    .mumy .ajax__tab_inner{

    background:url(images/left_Off.gif) no-repeat;

    padding-left:9px;

    padding-right:9px;

    }

     

    .mumy .ajax__tab_tab{

    background:url(images/mid_Off.gif) repeat-x;

    padding:7px 5px;margin:0;

    }

    .mumy .ajax__tab_outer{

    background:url(images/right_Off.gif) no-repeat right;

    height:30px;

    padding:0px 0px 0px 0px;

    }

    .mumy .ajax__tab_hover .ajax__tab_outer{ background:url(images/right_On.gif) no-repeat right;

    }

    .mumy .ajax__tab_hover .ajax__tab_inner{

    background:url(images/left_On.gif) no-repeat;

    }

    .mumy .ajax__tab_hover .ajax__tab_tab{ background:url(images/mid_On.gif) repeat-x;

    }

    .mumy .ajax__tab_active .ajax__tab_outer {

    background:url(images/right_On.gif) no-repeat right;

    }

    .mumy .ajax__tab_active .ajax__tab_inner { background:url(images/left_On.gif) no-repeat;

    }

    .mumy .ajax__tab_active .ajax__tab_tab {

    background:url(images/mid_On.gif) repeat-x;

    }

    </style> </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    </div>

    <cc1:TabContainer ID="TabContainer1" runat="server" Height="500" CssClass="mumy">

    <cc1:TabPanel ID="tbMission" runat="server">

    <HeaderTemplate>

    <table border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td width="25"><img src="images/icon1.png" width="15" height="15"/></td>

    <td><a>1. tab tab tab</a></td>

    </tr>

    </table>

    </HeaderTemplate>

    <ContentTemplate>

    1. tab içeriği<br />

    </ContentTemplate>

    </cc1:TabPanel>

    <cc1:TabPanel ID="TabPanel1" runat="server">

    <HeaderTemplate>

    <table border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td width="25"><img src="images/icon1.png" width="15" height="15"/></td>

    <td><a>2. Tab</a></td>

    </tr>

    </table>

    </HeaderTemplate>

    <ContentTemplate>

    2. tab içeriği<br />

    </ContentTemplate>

    </cc1:TabPanel>

    <cc1:TabPanel ID="TabPanel2" runat="server">

    <HeaderTemplate>

    <table border="0" cellpadding="0" cellspacing="0">

    <tr>

    <td width="25"><img src="images/icon1.png"/ width="15" height="15"></td>

    <td><a>3. Tab</a></td>

    </tr>

    </table>

    </HeaderTemplate>

    <ContentTemplate>

    3. tab içeriği<br />

    </ContentTemplate>

    </cc1:TabPanel>

    </cc1:TabContainer>

    </form> </body>

    </html>

    Uygulamamızın son hali aşağıda göründüğü gibi olacaktır:

            

    3 kişi tarafından 2.7 olarak değerlendirildi

    • Currently 2,666667/5 Stars.
    • 1
    • 2
    • 3
    • 4
    • 5