Kentico CMS 7.0 Controls

Getting started

Getting started

 Previous topic Next topic Mail us feedback on this topic!  

Getting started

 Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The following is a step-by-step tutorial that will show you how to display a simple tab menu using the BasicTabControl control:

 

1. Create a new Web form somewhere in your website installation directory.

 

2. Switch to its Design tab, drag and drop a BasicTabControl control from the toolbox onto the form.

 

3. Switch to the Source tab. The code of the BasicTabControl control should look like this:

 

<cms:BasicTabControl ID="BasicTabControl1" runat="server" />

 

Now add the following code between the tags of the <head> element:

 

<style type="text/css">

 

/* Tab menu class definitions */  

.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>

 

This sets the CSS styles that will modify the appearance of the tab menu. The BasicTabControl control renders tabs even without any CSS classes specified, but they are extremely basic and not very user friendly. You can find out what individual CSS classes affect in the Appearance and styling topic.

 

The classes are defined in the <head> element only for this quick example, if you wish to use the control on a Kentico CMS website, it is recommended to define these classes in the used stylesheet in the administration interface at Site Manager -> Development -> CSS stylesheets.

 

4. Add the following code just after the <cms:BasicTabControl> element. It will display a stripe under the tabs.
 

<hr style="width:100%; height:2px; margin-top:0px;" />

 

5. Switch to the code behind of the page and add the following code to the Page_Load method:

 

[C#]

 

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

 

tabs[0, 0] = "&nbsp;Home&nbsp;";

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

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

tabs[1, 0] = "&nbsp;Features&nbsp;";

tabs[1, 2] = "http://www.kentico.com/free-cms-asp-net.aspx";

tabs[2, 0] = "&nbsp;Download&nbsp;";

tabs[2, 2] = "http://www.kentico.com/download/trial-version.aspx";

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) = "&nbsp;Home&nbsp;"

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

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

tabs(1, 0) = "&nbsp;Features&nbsp;"

tabs(1, 2) = "http://www.kentico.com/free-cms-asp-net.aspx"

tabs(2, 0) = "&nbsp;Download&nbsp;"

tabs(2, 2) = "http://www.kentico.com/download/trial-version.aspx"

tabs(2, 3) = "Some tooltip"

 

BasicTabControl1.Tabs = tabs

BasicTabControl1.SelectedTab = 0

BasicTabControl1.UrlTarget = "_blank"

BasicTabControl1.UseClientScript = True

 

This creates an array of tab items and assigns it to the BasicTabControl control. It also selects the first tab, sets the target frame to "_blank" and enables client script.

 

6. Save the changes to the web form. Now right-click it in the Solution explorer and select View in Browser. The resulting page should display a tab menu like this:
 

controls_clip0028