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:audio 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>