MULTI VİEW KONTROLU
ILE TAB KONTROLÜ
Bu
makalemizde amacımız web
uygulamalarında
kullanılabilecek menu ve
multiview kontrollerinin birleştirilmesiyle
oluşturulmuş bir tab kontrolu olacak.
1-öncelikle toolbardan
bir menü kontrolümü sayfaya
sürükledim bu kontrol ile menümün
tab butonlarını yapacam.tab da
kullanacağım şekli ben photoshopda tasarladım. Aşağıda gösterdiğim tab şekillerini
kullandım bunlardan birisi
aktifdurumda diğeride pasif
durumda gösterilecek.
secili durum
için secili.jpg
secili olmayandurum için secilidegil.jpg
<asp:Menu
ID="Menu1"
Width="168px"
runat="server"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem ImageUrl="~/TAM/resim/secili.jpg" Text=" " Value="0"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/TAM/resim/secilidegil.jpg"
Text=" "Value="1"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/TAM/resim/secilidegil.jpg" Text=" "Value="2"></asp:MenuItem>
</Items>
</asp:Menu>
2-bunu ekledikten sonra sayfamıza bir
multiview kontrolu
ekleyelim. Ve multiview’e
ait kodlarım aşağıdaki gibi.
<asp:MultiView
ID="MultiView1"
runat="server"
ActiveViewIndex="0"
>
<asp:View ID="Tab1" runat="server"
>
<table width="600" height="400" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
Alan1
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table width="600" height="400" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
Alan2
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table width="600" height="400" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
Alan3
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
3-Sıra geldi
multiview’ı css ile biçimlendirmeye bunun
için aşağıdaki css dosyanısını
olusturdum
.TabArea
{
background-color:
White;
font-size:
x-small;
border-left:
1px solid black;
border-bottom:
1px solid black;
border-right:
1px solid black;
border-top:1px solid black;
position:absolute;
top:42px;
height:400px;
z-index:-25;
}
Default.aspx’in head tagları
arasına
<link href="StyleSheet.css"
rel="stylesheet"
type="text/css"
/> eklenir
4-son olarakta menuye tıklandığında
tabların değişmesini sağlayan yordama
protected void Page_Load(object
sender, EventArgs e)
{
Menu1.Items[0].Selected = true;//default olarak ilk
tab secili olacak
}
protected void Menu1_MenuItemClick(object
sender, MenuEventArgs e)
{
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);//tıklanılan
menunun index değeri
//mutiviewde
aktif index olark atanıyo
int i;
for
(i=0; i < Menu1.Items.Count-1;i++)//menudeki
eleman kadar dongu
{
if
(i==Convert.ToInt32(e.Item.Value))//tıklanılan deger
rast geldiğinde onunla
//alakalı
olan menu'nün image'ı aktif oluyo
{
Menu1.Items[i].ImageUrl = "~/TAM/resim/secili.jpg";
}
else
{
//secili
olmayanlar pasif oluyo
Menu1.Items[i].ImageUrl = "~/TAM/resim/secilidegil.jpg";
}
}
}
projemizi bu şekilde bitmiş olduk projemiz bittikden sonra ekran görüntüsü aşağıdaki gibi olacaktır
projenin örnek kodlarını buradan indirerek inceleyebilirsiniz hepinize kolay gelsin arkadaşlar..