<layout:tablist>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist
DESCRIPTION
ATTRIBUTES
defaultTabId
id
panelbgcolor
panelfontcolor
panelpadding
tabbgcolor
tabborder
tabborderradius
tabfontcolor
EXAMPLES
Specify Default Tab
Specify Default Tab via Query String
layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<layout:tablist>` </...>

Defines a container for a set of tabs.

Content

<layout:tablistitem>
At least 1 TabListItem.

Attributes

- `defaultTabId`
string
The tab which is defaultly open upon the page initially loading
- `id`
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `panelbgcolor`
string
Panel Background Color

Background Color of the content panel in the Tablist
- `panelfontcolor`
string
Panel Font Color

Font Color of the content panel in the Tablist
- `panelpadding`
int
Panel Padding

Controls the padding of the content panel in the Tablist
- `tabbgcolor`
string
Tab Background Color

Background Color of Tabs in the Tablist
- `tabborder`
string
Tab Border

Applies a Border to the Tabs in the Tablist
- `tabborderradius`
int
Tab Rounded Corners

Controls how rounded the corners of the Tabs in the Tablist are
- `tabfontcolor`
string
Tab Font color

Font Color of the Tabs in the Tablist

Examples

Specify Default Tab

Demonstrates the tablist defaultly opening a tab other than the first tab.

HTML:

 <layout:tablist defaulttabid="tablistitem2"> <layout:tablistitem id="tablistitem1" title="Tab List Item 1"> Tab List Item 1 is first, but not open by default. </layout:tablistitem> <layout:tablistitem id="tablistitem2" title="Tab List Item 1"> Tab List Item 2 is open by default. </layout:tablistitem> </layout:tablist>

Run Example

Specify Default Tab via Query String

Demonstrates the tablist defaultly opening a tab specified through the query string.

HTML:

 <layout:tablist defaulttabid="[? $_GET['tab'] ?]"> <layout:tablistitem id="tablistitem1" title="Tab List Item 1"> Tab List Item 1 is first, but not open by default. </layout:tablistitem> <layout:tablistitem id="tablistitem2" title="Tab List Item 1"> Tab List Item 2 is open by default. </layout:tablistitem> </layout:tablist> <a href="?tab=tablistitem2">A link to the second tab</a>