neoTabs
Commands to create a Tabs object inside a Container.
Description
The neoTabs plugin for VisualNEO Web enables the creation and management of tabbed interfaces, allowing users to organize content within a single view. This plugin is ideal for applications needing a structured display, such as dashboards or content management systems. Here’s an overview of its primary features and usage:
Initializing the Tabs Object
The neoTabsCreateObject command initializes a tabs object within a specified container, allowing you to define a title for the tabs.
- Command: neoTabsCreateObject
- Syntax: neoTabsCreateObject "thisContainer" thisTitleHTML
- thisContainer: Container to host the tabs.
- thisTitleHTML: HTML title for the tabs (optional).
Example:
neoTabsCreateObject "tabsContainer" "My Tabs"
This creates a tabs object titled "My Tabs" within tabsContainer.
Inserting and Managing Tabs
Use the neoTabsInsertTab command to add individual tabs with specific titles and content.
- Command: neoTabsInsertTab
- Syntax: neoTabsInsertTab "thisContainer" thisTabPosition "thisTabID" thisTabTitle thisTabContent
- thisTabPosition: Position to insert the tab (starting at 1).
- thisTabID: Unique ID for the tab.
- thisTabTitle: Title displayed on the tab.
- thisTabContent: HTML content displayed when the tab is active.
Example:
neoTabsInsertTab "tabsContainer" 1 "homeTab" "Home" "<p>Welcome to the Home tab</p>"
This inserts a tab at position 1 with the title "Home" and specified content.
Changing Tab Information
The neoTabsChangeTabInfo command updates an existing tab's ID, title, or content by specifying its position.
- Command: neoTabsChangeTabInfo
- Syntax: neoTabsChangeTabInfo "thisContainer" thisTabPosition "thisID" thisTitle thisContent
- thisTabPosition: Position of the tab to update.
- thisID: New ID for the tab.
- thisTitle: New title for the tab.
- thisContent: Updated HTML content for the tab.
Example:
neoTabsChangeTabInfo "tabsContainer" 1 "mainTab" "Main" "<p>Main content updated</p>"
This modifies the tab at position 1 to display updated title and content.
Removing and Showing Specific Tabs
- neoTabsRemoveTab: Removes a tab by its position.
- Syntax: neoTabsRemoveTab "thisContainer" thisTabPosition
- neoTabsShowTabAtPosition: Activates a tab by its position.
- Syntax: neoTabsShowTabAtPosition "thisContainer" thisTabPosition
Example for Removing a Tab:
neoTabsRemoveTab "tabsContainer" 2
This removes the tab at position 2 from tabsContainer.
Practical Applications
The neoTabs plugin is suitable for:
- Dashboards: Organizing sections like analytics, settings, and reports.
- Content Management: Displaying categories, such as articles or user profiles, in tabs.
- Multi-Section Forms: Breaking long forms into tabbed sections for better usability.
The neoTabs plugin simplifies content organization within applications, enhancing user experience by creating structured and accessible interfaces.
neoTabsInit
|
Purpose: |
Set up template html variables. You only need to invoke this command once in your App. Unless you have a special requirement to change the default html, leave all parameters blank. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsInit thisObjectTemplate thisTabsTemplate thisPaneTemplate
thisObjectTemplate template html for the Object (leave blank to use default) thisTabsTemplate template html for the Tabs (leave blank to use default) thisPaneTemplate template html for the Panes (leave blank to use default) |
neoTabsCreateObject
|
Purpose: |
Create Tabs object in specified Container with specified Title, |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsCreateObject "thisContainer" thisTitleHTML
thisContainer Select a Container object to host the Tabs object thisTitleHTML title in Tabs object (optional) |
neoTabsChangeObjectTitle
|
Purpose: |
Change Title of the Tabs object hosted within specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsChangeObjectTitle "thisContainer" thisTitle
thisContainer Select the Container object that hosts the Tabs object thisTitle new title in Tabs object |
neoTabsInsertTab
|
Purpose: |
Define Position, Id, Title and Content for a Tab within the Tabs object hosted wthin specified Container.. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsInsertTab "thisContainer" thisTabPosition "thisTabID" thisTabTitle thisTabContent
thisContainer Select the Container object that hosts the Tabs object thisTabPosition Relative position for this Tab (starts at 1) thisTabID An id (unique within this container) for this tab thisTabTitle Title for this Tab thisTabContent Content for this Tab |
neoTabsShowTabAtPosition
|
Purpose: |
Make Tab at specified Position within specified Container to be active (displayed). |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsShowTabAtPosition "thisContainer" thisTabPosition
thisContainer Select the Container object that hosts the Tabs object thisTabPosition relative position for this Tab (starts at 1) |
neoTabsGetCount
|
Purpose: |
Return count of Tabs in the Tab object within specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsGetCount "thisContainer" resultVariable
thisContainer Select the Container object that hosts the Tabs object resultVariable variable to be populated with result |
neoTabsGetActiveTabPosition
|
Purpose: |
Return position of active Tab within specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsGetActiveTabPosition "thisContainer" resultVariable
thisContainer Select the Container object that hosts the Tabs object resultVariable variable to be populated with result |
neoTabsGetTabInfo
|
Purpose: |
Return Id, Title and Content of Tab at specified Position within specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsGetTabInfo "thisContainer" thisTabPosition resultTabID resultTabLabel resultTabContent
thisContainer Select the Container object that hosts the Tabs object thisTabPosition relative position for this Tab (starts at 1) resultTabID variable to be populated with id of Tab resultTabLabel variable to be populated with title of Tab resultTabContent variable to be populated with content of Tab |
neoTabsChangeTabInfo
|
Purpose: |
Change Id, Title and Content of Tab at specified Position within specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsChangeTabInfo "thisContainer" thisTabPosition "thisID" thisTitle thisContent
thisContainer Select the Container object that hosts the Tabs object thisTabPosition relative position for this Tab (starts at 1) thisID id for this tab (leave blank to leave it as is) thisTitle title for this Tab thisContent content for this Tab |
neoTabsRemoveTab
|
Purpose: |
Remove Tab at specified Position within specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsRemoveTab "thisContainer" thisTabPosition
thisContainer Select the Container object that hosts the Tabs object thisTabPosition relative position for this Tab (starts at 1) |
neoTabsDestroyObject
|
Purpose: |
Destroy Tabs object in specified Container. |
|
Category: |
neoTabs |
|
Syntax: |
neoTabsDestroyObject "thisContainer"
thisContainer Select the Container object that hosts the Tabs object |
Created with the Personal Edition of HelpNDoc: Elevate your documentation to new heights with HelpNDoc's built-in SEO