Ajax Tab Container Özelleştirerek kullanmak

Bu blogu bloglarımı takip etmiş ve bana ulaşarak Ajax Tab Panel hakkında soru soran okuyucum için yazıyorum.Konumuz Ajax Tab Panel Container kontrolünün özelleştirilmesidir.Bu Ajax kontrolünün ilk yazısını daha önce yazmıştım.Şimdide bu kontrolün görünümü kendimiz nasıl özelleştirebiliriz buna bir bakacağız.Eğer bu konunun aradığınız şey olduğunu düşünüyorsanız şimdi bir göz atın...

Öncelikle daha önceki yazdığım Ajax TabPanel Container yazısıyla başlayalım.Zira bu yazıda kontrolün eklenmesi ile ilgili açıklamaları yapmayacağım.İlk yazıya giderek bu fikri edinebilirsiniz ikinci aşama olarak bu blogta ise görünüm özelleştirmeyle ilgili yazıya devam edebilirsiniz.

Aps.Net Web Sitenize Ajax Tab Panel Container nasıl eklenir.

Yazıya göz atıp kontrolü eklediğinizde Ajax Tab Panel Xp görünümünde gelicektir.Tıpkı bir önceki yazıda görmüş olduğunuz görünüm sizi pek mutlu etmeyebilir ve kendi tasarımınızı oluşturmak isteyebilirsiniz.O zaman ne yapacağız.Yeni bir CSS yapılandırması yaparak görünümü istediğimiz şekilde değiştiricez tam burada benim özelleştirdiğim bir CSS görünümün kodlarını buraya koyalım...

/*Tab Panel*/
.TabLayout
{
    height: 120px;
}
.ajax__tab_panel .ajax__tab_header
{
    font-size: small;
    border-bottom: solid 1px #2647a0;
    border-bottom-color: #CCCCCC;
    border-bottom-width: 1px;
}
.ajax__tab_panel .ajax__tab_header .ajax__tab_outer
{
    border-bottom-width: 0px;
    border-width: 1px;
    border-color: #CCCCCC;
    margin: 0px 0.16em 0px 0px;
    padding: 0px 0px 0px 0px;
    vertical-align: bottom;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    background-color: #FFFF99;
    color: #000000;
    font-weight: bold;
}
.ajax__tab_panel .ajax__tab_header .ajax__tab_tab
{
    color: #333333;
    padding: 0.35em 0.75em;
    margin-right: 0.01em;
}
.ajax__tab_panel .ajax__tab_hover .ajax__tab_outer
{
    border-bottom-width: 0px;
    border-width: 1px;
    border-color: #CCCCCC;
    cursor: pointer;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    background-color: #FFFFFF;
}
.ajax__tab_panel .ajax__tab_active .ajax__tab_tab
{
    border-color: #CCCCCC;
    border-style: solid solid none solid;
    border-width: 0px;
    color: #000000;
}
.ajax__tab_panel .ajax__tab_active .ajax__tab_outer
{
    border-style: solid solid none solid;
    border-width: 1px;
    background: #fff repeat-x left -1400px;
    color: #333333;
}
.ajax__tab_panel .ajax__tab_body
{
    padding: 0.25em;
    color: #000000;
}
/*Tab Panel*/

Bu CSS görünümünü Asp.Net web çözümünüz içindeki StyleSheet yani stil dosyanıza alırsanız.Geriye kalan Ajax Tab Panel Container CSS Class bilgisine bu görünümü işaret etmek olacaktır....

Bu zahmetsiz işlemlerden sonra görünümü kendi web tasarımıza uyarlamak sizin istediğiniz görüntüyü yakalamak hiçte zor değildir.Böylece Asp.Net web sitenizde 3. türden diğer script yada java eklentilerine mecbur kalmaz ve bütünlüğü bozmazsınız.




Şimdi bakalım benim Ajax Tab Panel görüntüm nasıl olmuş...

Bence yeni Ajax Panel görünümüm gayet yakışıklı görünüyor.Bu kontrolün detaylarını yazının başında verdiğim linkten okumalısınız.Buna benzer Asp.Net ve Ajax yazılarımı fırsat buldukça ve soruldukça yazmaya çalışıyorum.

Şimdilik size kolay gelsin...