Frontfire documentation

Tabs plugin

Version 2.1.0

Frontfire UI provides a layout for pages with separate content that can be switched through tab headers.

This plugin is only available in the Complete bundle.

Tab pages

To create a tab control, define a <div class="tabs"> element that contains the individual tab pages. Each tab page is a <div> element. The tab header text is defined in the title HTML attribute of each tab page element. The tab control is focusable and the active page can be changed with the arrow keys when it has the focus.

Add the tabs CSS class to an element, or call the tabs() plugin method on it, to add the tab layout.

The colours of hovered and selected items can be customised with the CSS variables that start with “--tabs-”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat vehicula ante, quis ultrices metus ultricies sit amet. Maecenas ornare nunc a est imperdiet, in pulvinar odio porttitor. Ut et velit ante. Suspendisse ut sem auctor, interdum nulla a, pellentesque augue. Maecenas velit quam, ultrices sed blandit eget, pharetra a ligula. Praesent imperdiet sed turpis vitae vehicula. Morbi pretium, nisi eget laoreet finibus, metus ante dapibus nunc, ac consectetur erat est tincidunt turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae urna tempor, dictum tortor id, accumsan tortor. Ut tortor est, finibus nec porttitor a, consectetur et orci. Proin fringilla lacus lorem, quis pellentesque libero fermentum sit amet. Maecenas vel dolor ultricies, sagittis risus vitae, tincidunt magna. Praesent quis congue felis. Morbi varius sapien risus, sed lobortis velit tincidunt ac.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc. Aliquam maximus nisi eu nunc tincidunt scelerisque. Phasellus eu nunc tempus, hendrerit diam vel, porta mauris. Donec sit amet turpis ut sapien dapibus sodales. Nulla in elit ut enim malesuada elementum non quis dui. Donec luctus tincidunt elit nec convallis. Morbi lorem nunc, sollicitudin ac blandit ut, pharetra sed dolor.
Ut placerat pharetra augue eget ultrices. Sed lobortis metus sapien, quis sollicitudin neque ultrices non. Ut nec metus aliquet, lacinia libero a, malesuada urna. Nullam faucibus nisl id convallis euismod. Phasellus massa massa, rhoncus in iaculis ac, blandit a velit. Suspendisse nec justo et enim lobortis porttitor. Nunc eget dui interdum, tristique neque lobortis, fringilla dui. Vestibulum sodales non metus a vehicula. Pellentesque sit amet ornare mauris.

Preselected page

A tab page can be preselected at load time by adding the active CSS class to the page element.

Content of page 1
Content of page 2
Content of page 3

Same height for all pages

If all tab pages should have the same height of the largest page content, add the same-height CSS class to the tab container element. Click through the pages below to see how the height does not change, compared to above.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat vehicula ante, quis ultrices metus ultricies sit amet. Maecenas ornare nunc a est imperdiet, in pulvinar odio porttitor. Ut et velit ante. Suspendisse ut sem auctor, interdum nulla a, pellentesque augue. Maecenas velit quam, ultrices sed blandit eget, pharetra a ligula. Praesent imperdiet sed turpis vitae vehicula. Morbi pretium, nisi eget laoreet finibus, metus ante dapibus nunc, ac consectetur erat est tincidunt turpis.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras non neque nunc.
Ut placerat pharetra augue eget ultrices. Sed lobortis metus sapien, quis sollicitudin neque ultrices non. Ut nec metus aliquet, lacinia libero a, malesuada urna.

Flex child

If the tab container needs to be used in a flex container, add the flex CSS class to the tab container element. This sets the display: flex style for the tabs container and allows stretching it and scrolling in a tab page. Reduce the window size or switch to mobile layout preview to see the scrolling in the first tab.

HTML titles

The tab header may also be defined with HTML code by using the data-title-html HTML attribute instead of the title attribute. The text title and HTML title can also be modified with the plugin methods title() and titleHTML().

Additionally, CSS classes can be assigned to a tab header by using the data-header-class HTML attribute or calling the headerClassList() plugin method.

Content of page 1
Content of page 2
Content of page 3

BTW, yes, in HTML attributes, only the delimiter quote character ('/") and the escape character itself (&) need to be escaped. This is clearly defined in the HTML 5.2 standard. So there’s no need to painfully escape left and right angle brackets (</>) for these attributes when hand-typing HTML code. The code shown in the examples is browser-generated and so serves as a good example.

No border

The borders can be removed by adding the no-border CSS class to the container element. This style can be used to remove visual clutter caused by the surrounding border lines, if there is no additional content below the tab container that could be confused as part of a tab page, like in the example box below.

Content of page 1
Content of page 2
Content of page 3

Synchronised tabs

When the tab page is changed, an activeTabChange event is triggered. The tab page can be determined and switched by code. Both features combined can be used to synchronise the selected page in two tab containers. (This does not need to be the case on page load, as shown here, but any interaction will also update the other control.)

Content of page 1
Content of page 2
Content of page 3

Content of page 1
Content of page 2
Content of page 3

Tab manipulations

Tabs can be added, removed and reordered by code and their title can be changed. See the descriptions of the plugin methods below.

Content of page 1
Content of page 2
Content of page 3

Plugin methods

This plugin provides methods to control the tabs.

addTab

Adds a new tab page and header from a page div element. The new page does not need to be added to the document yet. The new page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used.

let newPage = F("<div>Sample page</div>"); F("#tabs").tabs.addTab(newPage);

headerClassList

Gets the classList object of a tab header. The page can be specified as the page element or its zero-based index. The page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last tab, -2 the second-last etc.

The returned object has the same methods and properties as if using the Frontfire.classList property on an element.

F("#tabs").tabs.headerClassList(0).add("new-class", "class2"); F("#tabs").tabs.headerClassList(1).toggle("class3");

moveTab

Moves a tab to another position. The page to move can be specified as the page element or its zero-based index. The page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last tab, -2 the second-last etc.

let activeTab = F("#tabs").tabs.activeTab; F("#tabs").tabs.moveTab(activeTab, 0);

removeTab

Removes a tab page and header. The page to remove can be specified as the page element or its zero-based index. The page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last tab, -2 the second-last etc. If no argument was given, the currently active tab is removed.

F("#tabs").tabs.removeTab(1);

title

Gets or sets the title of a tab page. The page can be specified as the page element or its zero-based index. The page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last tab, -2 the second-last etc.

If a new title is specified, it will be set; otherwise, the current tab title is returned.

let oldTitle = F("#tabs").tabs.title(3); F("#tabs").tabs.title(3, "New title");

titleHTML

Gets or sets the title HTML of a tab page. The page can be specified as the page element or its zero-based index. The page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used. Negative indexes are counted from the end, i.e. -1 is the last tab, -2 the second-last etc.

If a new title is specified, it will be set; otherwise, the current tab title is returned.

let oldTitle = F("#tabs").tabs.title(3); F("#tabs").tabs.title(3, "New <em>title</em>");

Plugin properties

This plugin provides properties to access the tabs state.

activeTab

Gets or sets the active page in the first selected tab container. The page can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used.

If no tab page is active, undefined is returned.

let activeTab = F("#tabs").tabs.activeTab; F("#tabs").tabs.activeTab = F("#first-tab-page");

activeTabIndex

Gets the index of the active page in the first selected tab container, or sets the index of the active page in all selected tab containers. Negative indexes are counted from the end, i.e. -1 is the last tab, -2 the second-last etc.

If no tab page is active, -1 is returned.

let activeTabIndex = F("#tabs").tabs.activeTabIndex; F("#tabs").tabs.activeTabIndex = 3;

pages

Gets all page div elements.

Plugin events

This plugin triggers events for the tabs.

activeTabChange

Triggered when the active tab has changed.

Template tabs

Tabs can also be created from data records where all tab pages look identical or similar. For each record, a tab page is created from a template and fields in the page are filled with the record data. Each field element needs the data-name HTML attribute to bind it to a record field. To prepare a tabs container for template pages, call the templateTabs() plugin method on a tabs container element. The data pages can be added or read with the plugin methods described below.

If the tab page contains a table that has a data-name attribute itself, the table is set up for template rows and will show the subrecords in that field. Since this is done internally, the row template must be specified in a data-opt attribute at the table element.

Options

The following options are available:

Name Type Description Default
init Function A function that is called for each added tab after it has been added to the tabs container. It gets the following arguments:
  1. The tab page element
  2. The record object
  3. The original tabs container element as specified for the plugin (<div class="tabs">)
If undefined, the standard Frontfire autostart is applied. If null, nothing happens. 		None
jsonField String, Node The form field that contains all records as JSON string. If set, the tab pages are created at load time. The template must also be set in the options then. This option can be set later with the loadJSON() method. It will be reused for saving the tabs data to a JSON field for form submit. None
template Node, String The template element that contains a tab page to use for all records. Specified as Node or CSS selector. None

Plugin methods

This plugin provides methods to set and read the tabs data.

addTab

Adds a new tab page with the specified record data. If no record is specified, the new tab page will not be altered.

addTabs

Adds new tab pages with the specified record data.

getRecord

Returns the object with the data from the specified tab page fields. If a tab was created without a record, a new object will be assigned so that subsequent calls return the same record instance.

getRecords

Returns an Array of objects with the data from the tab page fields. If a tab was created without a record, a new object will be assigned so that subsequent calls return the same record instance.

loadJSON

Adds new tab pages with the data from the specified JSON form field, and remembers the field for later updating. If the field is not specified, it must be set in the plugin options. Returns the added tab page elements.

If the JSON form field is already set with the element, the loadJSON method is automatically called at initialisation time.

saveJSON

Saves the data from the tab page fields as JSON to a form field. If the field is not specified, it must be set in the plugin options or in a previous loadJSON() call.