IE Web Controls in VB.NET

IE Web Controls in VB.NET - TabStrip Control
(Page 3 of 4 )

Now let’s look at how to use the TabStrip control.

The code in the ASPX file is similar to the code for TreeView control, here it is:

<iewc:tabstrip id=mytabstrip accessKey="<%# Page %>" runat="server" Width="338px" Height="28px" AutoPostBack="True" TabSelectedStyle="background-color:#ffffff;color:#000000;" TabHoverStyle="background-color:#777777;" TabDefaultStyle="background-color:#668274;font-family:verdana;font-weight:bold;font-size:8pt;color:#ffffff;width:79;height:21;text-align:center;">
   <iewc:Tab Text="tab1"></iewc:Tab>
   <iewc:Tab Text="tab2"></iewc:Tab>
   <iewc:Tab Text="tab3"></iewc:Tab>
   <iewc:Tab Text="tab4"></iewc:Tab>
</iewc:tabstrip>

The code above will create 4 tabs in the page. Now comes time to add functionality to these tabs.

The most common functionality which we have seen in something like this is that a user clicks different tabs and pages corresponding to the tabs are displayed to the user. I was trying to implement this TabStrip for similar functionality in my project but I was disappointed to see that there is not property or method like Treenode.NavigateUrl. So I created an iframe in the page like this:

<iframe id=applnname style="WIDTH: 100.33%; HEIGHT: 175.81%" hspace=0 vspace=0 src="<%=sIFrameSrc%>" frameBorder=no height="100%">
</iframe>

This src="<%=sIFrameSrc%>" is important as in the code behind page we will populate frame source so that we can get required functionality of switching between different pages.

When you click on different tabs mytabstrip_onSelectedIndexChange is called so this is the place where we can change srcframe to different pages.

Private Sub mytabstrip_onSelectedIndexChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles mytabstrip.SelectedIndexChange
  Dim sdata As String
  Select Case mytabstrip.SelectedIndex
    Case 0
      tabname = "tab1"
      sIFrameSrc = "http://www.oxx.no"
    Case 1
      tabname = "tab2"
      sIFrameSrc = "http://www.yahoo.co,"
    Case 2
      tabname = "tab3"
      sIFrameSrc = "your choice"
    Case Else
      sIFrameSrc = "http://www.oxx.no"
  End Select
End Sub

You should now be able to set up a working TabStrip on your page. The code I have provided is very simple but these controls can be utilized in many applications.
blog comments powered by Disqus