Tabs
axTabs
Description
axTabs allows the functionality to add tabs into the 5250 screen.
Usability
|
Context |
Supported |
|---|---|
|
Input screen fields |
No |
|
Output screen fields |
No |
|
Input subfile fields |
No |
|
Output subfile fields |
No |
|
New screen elements |
Yes |
Properties
|
Name |
Description and Comments |
JavaScript |
Shipped default |
|---|---|---|---|
|
orientation |
Indicates whether the tabs will be displayed vertically or horizontally. Excluding Material Design theme. |
Yes. Must return a string. |
Horizontal |
|
collapseContent |
Indicates whether the contents of the tab will collapse when the tab name is clicked or hovered. Excluding Material Design theme. |
Yes. Must return a Boolean. |
False. |
|
openOnMouseOver |
Additional style properties that should be applied to the button. Excluding Material Design theme. |
Yes. Must return a Boolean. |
False. |
|
sortable |
Indicates whether the editing function of the camera will be enabled. The editing features are device specific. Excluding Material Design theme. |
Yes. Must return a Boolean. |
False. |
|
keepLastActiveTab |
Indicates whether the last active tab will be remembered when leaving and re-entering the screen. |
Yes. Must return a Boolean. |
False. |
|
enabled |
Indicates whether this element is enabled. TS2 only. |
Yes. Must return a Boolean. |
True. |
Notes, Comments and Warnings
Display position of extensions added inside the tab is absolute. Therefore, drag and dropping an extension inside the tab will not change its position in the screen. Changing the orientation property will not automatically realign or reposition the existing extensions already added in the tabs.
Only extensions already in the screen can be added into the tab. Drag and dropping any extension from the Extensions list of the Extensions tab will just add the extension into the screen and not into the tab. So for new extensions, first insert it into the screen and then drag and drop it into the tab.
Just like any other extensions, the display of the axTabs extension will change automatically with any jQuery themes that is set.
Examples
Add/Delete tab
Adding and deleting tabs can only be done using the “+” and “-” buttons located at the bottom of the extension.
The “-” button is disabled when only one tab exist. It will be enabled once the number of tabs is greater than one.
Clicking the “+” button will display the Tab Name dialog where you can input the name of the tab to be added.
Clicking OK on the dialog above will add the new tab with the name you indicated in the input box.
Clicking the “-” button will delete the currently active tab. The active tab is the currently opened tab. If there are extensions in the tab to be deleted, the following confirmation dialog will be displayed.
Clicking on the Delete button will perform the deletion of all the extensions currently added inside the tab to be deleted. Choosing Save on the other hand will move the extensions from the Tabs extension back into the screen.
Changing tab name
Double-clicking the tab name of a tab will display the Tab Name dialog. Using the input box, you can change the name of the tab.
Sorting tabs
Tabs can be sorted by dragging and dropping it on your desired position.
On user mode, the sortable property can be set to true, to allow the user to sort the tabs on the screen.
Adding/Removing extensions
Adding extensions can also be done using drag and drop. In order for the extension to be added into the tab, the extension should first be added into the screen.
Multiple extensions can be added at the same time by selecting the extensions using the CTRL key or by mouse. After selection, just drag and drop the extensions into your desired tab.
To remove an extension from a tab, just drag and drop the extension outside of the tab.
Another method is to right-click on the extension which will display the “Remove” popup menu.
Clicking on the Remove menu will remove the extension from the tab but the position of the extension will not change.
Multiple extensions can be removed from the tab using drag and drop or the Remove menu. This can be done by first selecting the extension using multiple selection and then right-clicking or dragging them out of the tab.
Tabs inside tabs
The axTabs extension can be added inside another axTab extension. Just add the axTabs into another axTabs extension as you would any other extension.
Drag and dropping extensions to and from tabs is also supported.
See Also
Application Style Collection for Application themes
