Online Programme Page Modes¶
Sometimes, within a page, it can be useful to show the same set of data with different layouts.
For example, a set of entries could either be displayed as a list or in a table.
A page showing the entries in List mode.
The same programme page showing the entries in Table mode.
These different layouts are called Modes. Each page can be configured with as many modes as required. Only one Mode can be displayed at a time.
A page can include buttons or other html elements to enable the user to swap between the different modes that have been defined within the page:
List and Table buttons to swap modes
Defining Modes¶
The modes of the page are defined using tags with the Mode data tag.
<div data-mode='Table'> <!-- Table mode goes here --> </div>
A div containing the Table mode
The content of the Div can contain any normal Html but the div and its contents will only be shown when the specified data mode is enabled.
Changing Modes¶
Users can change the mode that is currently being displayed by clicking on a html element that has the ChangeMode data tag on it. The mode to be displayed is set in the Mode data tag.
<button type='button' data-function='ChangeMode' data-mode='List'> List </button>
A button that changes the mode to List