Several server-side tabstrip controls are available for ASP, PHP, and JSP etc. For example, a 2D tabstrip can be added to any ASPX page by combining the ASP.NET
Menu controls. However, such pages are posted back to the server every time the user clicks on a tab button. This is unnecessary in some situations, causing delays which can be annoying for the user.
Compatible with any server-side programming language
- Round trips to the server are only made when the user performs an action that requires post-back.
- It works equally well in both the Internet Explorer and Firefox web-browsers.
- The tab buttons have a 3D look and feel, similar to a "Windows classic" desktop application.
A typical use of the Tabstrip page would be as a web-application "Options…" form, which could be displayed in a pop-up window. E.g., the Tabstrip page looks similar to the "Internet Options" pop-up window which can be accessed via the "Tools" menu in Internet Explorer.
How to add the Tabstrip page to your ASP.NET project
The Tabstrip can be added to a project created within any development environment. However, it has been designed for ease of use within Microsoft Visual Studio 2008 or Visual Web Developer Express 2008 (which is free). The Tabstrip page can be added to your ASP.NET project as follows:
- Click on the download link (see above) to download the Tabstrip code, then unzip this file.
- Add a new .aspx or .html page to your ASP.NET project (give this page a name that suits your project).
- Open the unzipped TabStrip.html file in a text editor such as Notepad - but don't add this file to your project.
- Paste the code in the TabStrip.html file over the top of the
<html>...</html> in your new page - but don't paste over the top line of an .aspx page.
- Add the unzipped TabStrip.css and TabStrip.js files to your ASP.NET project.
The resulting page is shown below in the Visual Studio 2008 designer. Controls can be dragged from the Toolbox and dropped onto the tabs, as shown in the screenshot. The tabs can be resized in the designer and the Tabstrip will automatically resize itself to suit when the Tabstrip page appears.
How to add new tabs to the Tabstrip
New tabs can be added by simply copying, pasting, and then editing the HTML that describes an existing tab.
For example, to add tab 3, you could copy and paste the three pieces of HTML that describe tab 2, then change their
id attributes like this:
id="tab3", as shown below. The width of the tab button
<td...> also needs to be changed to match the width of the new button's label using
style="width: 38px;", as shown.
<td id="tabtop3" class="tabTopFiller"/><td/>
<td id="3" class="tabButton" style="width: 38px;" onclick='showTab(this.id)'>
<div id="tab3" class="tabDiv" style="height: 150px; width: 470px;">
This is Tab three