Koně jsou jednoduchá stvoření a proto i já mám rád jednoduché věci - zejména vizuálně. S radostí využívám výhod prvku TabContainer z AJAX control Toolkitu, ale už se mi příliš nelíbí, jak vypadá. Vytvořil jsem proto maximálně jednoduchý a bezobrázkový styl, kterým lze změnit vzhled záložek.
Výchozí skin se jmenuje "XP" a pravděpodobně má navozovat dojem záložek z Windows XP:
Mně se ale příliš nelíbí. Většina mých webů je "plochých" a pseudo-3D efekty moc nemusím. Kromě toho si tab container vynutí vlastní typ a velikost písma, bez ohledu na nastavení mého webu. Proto jsem vytvořil "simple" styl, který záložky vytváří ploché, bez obrázků a podobných vymožeností:
Změnu vzhledu záložek jest prováděti prostřednictvím kaskádových stylů. Běžným způsobem nastavíte ve vlastnosti CssClass třídu, od které se odvodí všechno další. CSS pro shora uvedený jednoduchý styl používá jako název třídy simpletabs a vypadá takto:
.simpletabs .ajax__tab_header {
display: block;
}
.simpletabs .ajax__tab_header .ajax__tab_outer {
background-color: #eeeeee;
color: #333333;
padding-left: 1ex;
margin-right: 1ex;
}
.simpletabs .ajax__tab_header .ajax__tab_inner {
color: #666666;
padding: .5ex 1ex .5ex 0ex;
}
.simpletabs .ajax__tab_hover .ajax__tab_inner {
background-color: #ffffcc;
color: #000000;
}
.simpletabs .ajax__tab_hover .ajax__tab_outer {
background-color: #ffffcc;
color: #000000;
}
.simpletabs .ajax__tab_active .ajax__tab_outer {
background-color: #ffffff;
}
.simpletabs .ajax__tab_active .ajax__tab_inner {
background-color: #ffffff;
color: #000000;
font-weight: bold;
}
.simpletabs .ajax__tab_body {
padding: 1ex;
background-color: #ffffff;
}
Výhodou tohoto stylu je, že je velmi jednoduchý a jeho barevné schéma se dá velmi snadno přizpůsobit vzhledu vašeho webu.
Pokud byste snad prahli po něčem méně spartánském, doporučuji vám blog Matta Bersetha. Poměrně extenzivně se tam věnuje hrátkám s grafikou ASP.NET server controls a z článků tamo publikovaných jsem vycházel i při tvorbě svého skinu. Zajímat by vásm mohly zejména dva články z poslední doby: