BasicTabControl

The BasicTabControl control displays several tabs according to provided data. BasicTabControl doesn't use Kentico CMS database or API.

Please note

If you want to display a tab menu based on the data from Kentico CMS, please use the CMSTabControl control.

Properties

Property Name

Description

Sample Value

SelectedTab

Index of the selected tab.

TabControlLayout

Horizontal or vertical layout.

TabControlLayoutEnum.Horizontal

Tabs

4- or 7-dimensional array of tabs:

tabs[0, 0] = title

tabs[0, 1] = OnClick JavaScript

tabs[0, 2] = URL

tabs[0, 3] = tooltip

tabs[0, 4] = left image URL

tabs[0, 5] = center image URL

tabs[0, 6] = right image URL

Please note:

1.	The image URLs in dimensions 4, 5 and 6 are optional.

2.	If you specify the center image URL, the image is displayed instead of the title.

tabs[0, 0] = " Home ";

tabs[0, 1] = "alert('It is very simple!');";

tabs[0, 2] = "http://www.kentico.com";

tabs[0, 3] = "Some tooltip";

tabs[0, 4] = "leftimage.gif";

tabs[0, 5] = "centerimage.gif";

tabs[0, 6] = "rightimage.gif";

UrlTarget

If URL for tab items is set, this property specifies target frame for all URLs.

"_blank"

UseClientScript

Indicates if client script should be generated for each tab.

TabControlIdPrefix

Prefix that will be used for all IDs in the HTML code rendered by the BasicTabControl. It's useful if you need to place multiple tab controls on the same page.

"FirstTab"

Design

You can modify the design using the following CSS Classes:

Class Name	Description
TabControlTable	Table that contains the tabs (<TABLE> tag).
TabControlRow	Table row (<TR> tag).
TabControl	Tab item (<TD> tag).
TabControlSelected	Selected tab item (<TD> tag).
TabControlLink	Tab item link - for case a URL is specified (<A> tag).
TabControlLinkSelected	Selected tab item link - for case a URL is specified (<A> tag).
TabControlLeft	Left side of the tab item (<TD> tag).
TabControlRight	Right side of the tab item (<TD> tag).
TabControlSelectedLeft	Left side of the selected tab item (<TD> tag).
TabControlSelectedRight	Right side of the selected tab item (<TD> tag).

Example

This example will show you how to display a simple tab-menu.

•	Create a new Web form.

•	Drag and drop the BasicTabControl control on the form.

•	Switch to the Source mode and add the following CSS styles inside the <BODY> tag. It will modify the appearance of the tabs.

[C#], [VB.NET]

<style>

.TabControlTable { FONT-SIZE: 14px; FONT-FAMILY: Arial,Verdana }

.TabControlRow { }

.TabControl { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #e7e7ff; BORDER-LEFT: black 1px solid; CURSOR: hand; COLOR: black }

.TabControlSelected { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #4a3c8c; BORDER-LEFT: black 1px solid; CURSOR: default; COLOR: white }

.TabControlLinkSelected { COLOR: white; TEXT-DECORATION: none }

.TabControlLink { COLOR: black; TEXT-DECORATION: none }

.TabControlLeft { WIDTH: 1px }

.TabControlRight { WIDTH: 0px }

.TabControlSelectedLeft { WIDTH: 1px }

.TabControlSelectedRight { WIDTH: 0px }

</style>

•	Add the following table code just after the BasicTabControl tags. It will display a stripe under the tabs.

[C#], [VB.NET]

•	Switch to the page code-behind and add the following code to the Page_Load method:

[C#]

string[,] tabs = new string[3, 7];

tabs[0, 0] = " Home ";

tabs[0, 1] = "alert('It is very simple!');";

tabs[0, 2] = "http://www.kentico.com";

tabs[1, 0] = " Products ";

tabs[1, 2] = "http://www.comparesql.com";

tabs[2, 0] = " Contact ";

tabs[2, 2] = "http://www.syncserverfiles.com";

tabs[2, 3] = "Some tooltip";

BasicTabControl1.Tabs = tabs;

BasicTabControl1.SelectedTab = 0;

BasicTabControl1.UrlTarget = "_blank";

BasicTabControl1.UseClientScript = true;

[VB.NET]

Dim tabs(2, 6) As String

tabs(0, 0) = " Home "

tabs(0, 1) = "alert('It\'s very simple!');"

tabs(0, 2) = "http://www.kentico.com"

tabs(1, 0) = " Products "

tabs(1, 2) = "http://www.comparesql.com"

tabs(2, 0) = " Contact "

tabs(2, 2) = "http://www.syncserverfiles.com"

tabs(2, 3) = "Some tooltip"

BasicTabControl1.Tabs = tabs

BasicTabControl1.SelectedTab = 0

BasicTabControl1.UrlTarget = "_blank"

BasicTabControl1.UseClientScript = True

What you did

You have added code that creates an array of tab items and assigns it to the BasicTabControl control. It also selects the first tab and sets the target frame to "_blank".

•	Compile and run the project. You will see a page like this:

Page url: http://devnet.kentico.com/docs/controls/index.html?basictabcontrol.htm