In addition to the tab menu,
which can be defined in the properties dialog of a page to collate multiple pages,
you can create a tab menu on a page using buttons to display contact data
clearly - like in our example application. With this approach, actions (such as
saving the data) can also be performed when the user clicks on one of the tabs.
2. Example application
You can download the example application here
and then import it as usual.
3. Edit page
Contact data can be entered on the edit page.
4. View pages
The "Private", "Office", "Telephone" and "Online" view pages are loaded via the
buttons shown in the image above. The tab menu can be created on one of the
view pages and then copied to the other pages. It is important to
switch the buttons' type to text.
So that the buttons are displayed as tabs in the browser later, they need to be
positioned one beneath the other; otherwise they will be displayed in one tab.
The style class "TAB_MENU" is then assigned on the
The custom modification "padding-left:0;" is now required; this is created as
a CSS rule. With this, the tab menu will not be displayed center-aligned but
left-aligned. The groupiing can now be copied to other view pages.
To make it easier for the users to know where they are, adjusting the style
class for the current tab can be helpful. This is done by making them bold with
the style class "Link_Strong". Now the user sees which page they are on at a
The result is very similar to the classic tab menu but is positioned in the
middle of the page.