ASP.Net tuh ga nyediain tool buat bikin tab. Setelah munyeng2 nyari2 gimana caranya bikin tab di ASP.Net, akhirnya bisa juga. Ternyata buat bikin tab itu mesti diakalin, bikin aja menu, banyak item menunya sesuai dengan banyaknya tab yang mau dibikin. Aku nemu source-nya kalo ga salah di codeproject, tapi source itu cuma bisa nampilin dua pilihan yaitu selected tab ama unselected tab, ga bisa dibedain tab satu ama lainnya. Nah, berikut ini source yang udah diubah biar lebih OK.
Pertama bikin aja dulu image buat tab-nya, Misal jumlah tab-nya ada 3, ya udah bikin 6 image, satu tab punya 2 image yaitu image yang tampak waktu tab itu dipilih dan image yang tampak waktu tab tidak dipilih. Trus ini code buat bikin menu:
<%--code menu--%><asp:Menu
ID="Menu1" Width="168px"
runat="server" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem ImageUrl="~/selectedtab0.GIF"
Text=" " Value="0"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/unselectedtab1.GIF"
Text=" " Value="1"></asp:MenuItem>
<asp:MenuItem ImageUrl="~/unselectedtab2.GIF"
Text=" " Value="2"></asp:MenuItem>
</Items>
</asp:Menu>
Nah, habis itu bikin multiview dengan banyak view-nya sama dengan banyak tab, dengan kata lain, satu tab berkorespondensi satu-satu dengan satu view (halah!!). Code buat bikin multiview:
<%--code multiview--%><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 />
TAB VIEW 1
INSERT YOUR CONENT IN HERE
CHANGE SELECTED IMAGE URL AS NECESSARY
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab2" runat="server">
<table width="600px" height="400px" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
TAB VIEW 2
INSERT YOUR CONENT IN HERE
CHANGE SELECTED IMAGE URL AS NECESSARY
</td>
</tr>
</table>
</asp:View>
<asp:View ID="Tab3" runat="server">
<table width="600px" height="400px" cellpadding=0 cellspacing=0>
<tr valign="top">
<td class="TabArea" style="width: 600px">
<br />
<br />
TAB VIEW 3
INSERT YOUR CONENT IN HERE
CHANGE SELECTED IMAGE URL AS NECESSARY
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
Trus, di bagian source-nya, buat nyambungin antara menu ama multiview-nya pake code berikut:
Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemClick
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
Menu1.Items(0).ImageUrl = "~/Logo/unSelTab0.gif"
Menu1.Items(1).ImageUrl = "~/Logo/unSelTab1.gif"
Menu1.Items(2).ImageUrl = "~/Logo/unSelTab2.gif"
Select Case e.Item.Value
Case 0 : Menu1.Items(0).ImageUrl = "~/Logo/SelTab0.gif"
Case 1 : Menu1.Items(1).ImageUrl = "~/Logo/SelTab1.gif"
Case 2 : Menu1.Items(2).ImageUrl = "~/Logo/SelTab2.gif"
Case Else : Exit Sub
End Select
End Sub
Nah, gampang kan ternyata :p Tapi inget, ini cuma code garis besarnya aja, biar tampilannya lebih OK, sesuain sendiri ya...met nyoba...