Tabs System

The tabs system is used to hide and show specific content on a given page in order to categorise it without the need to view multiple pages

Adding the Tab module

1. After you have logged in, click "Modules" > "Add New Module"

   

2. Drag the horizontal scroll bar to until you can see the "avt.TabsPro" module and then click and drag the module onto the page.

   

Moving Modules to sit inside the tabs module

1. After you have logged in, Edit the current page by going to Edit Page > Edit page

   

2. Hover over the pencil up the top right hand corner of the module and click Manage Tabs(full screen)

   

3. Under the Items Heading click the "New Tab" button

4. Below the image is a list of instructions what to do with the settings

   

   1. Title: Displays as the tab or accordion title (it can be separate to the module titles).

   2. Image: Adds an image next to the tab title (1), below is a description of what each option does:

      1. None: Simply does not display an image.
      2. Icon (from portal files): Allows you to select an image from your portal file structure, folders can be navigated to on the left and an image can be selected on the right.
      3. Icon (from URL): Allows you to select an image accessible from the internet e.g. Console Assets.
         Please note that we do not recommend using recources that are outside of your control.
      4. Font Awesome Icon: Select from a pre-defined list of icons
      5. Image header: Select a background icon and states for when the current tab is selected or hovered over by the mouse.

   3. Actions: Allows you to choose whether you want to open the content on the current tab or to redirect to another module.

   4. Select Modules: Choose the modules that will be displayed in the current tab.

   5. Display in accordion: Make the modules inside this tab display as an accordion menu. This can be useful if you want to categorise information again within tabs.

   6. Stack direction: Set the modules inside the current tab stack horizontally or vertically

   7. Default Tab: Sets this tab to be open on page load

   8. New Tab Button: Add the first tab or add additional tabs

   After you have specified your tabs, click the "Save" button up the top right hand corner of the page.
   Here is an example of five tabs with no images with a single module in each tab.

   

   This provides the following output

   

Tab Settings

The tabs settings can generally be left to their default values, however there are different layouts that can be utilised, explanations are available under the following image

1. Tabs Layout: Displays how the text

   • Horizontal Top

     

   • Horizontal Bottom

     

   • Vertical Left

     

   • Vertical Right

     

   • Accordion

     

2. Use Accordion on Mobile: Change the tabs menu to an accordion menu on mobile devices, this is useful as multiple tabs can take up more horizontal space.

3. Panel Height: Sets the minimum panel height before content is added.

4. Collapsible: Lets a user click the currently selected tab to hide it's content

   Initially Collapsed: Starts all of the tab content closed.

5. Show Empty Tabs: Will continue to display tabs even if there is no content in them

   This is useful for content that is hosted on separate websites (e.g. Facebook)

6. Display tabs in Dialog?: Brings up and interface that allows you to call a window with tab content separately.

7. UI Settings Widget Provider

   1. Bootstrap: Uses Twitter's bootstrap system to render tabs, this is the recommended system for most SiteDesqPro websites.

   2. JQuery UI: Calls an additional platform to render tabs.

      • jQuery UI Theme Location: Allows you to select a local server, CDN or external link to load jQuery.

        CDN links can be useful as a user might not need to download jQuery UI tab library if they have previously done so on another website.

      • Theme Name: Select a jQuery UI theme

8. Transition Effect: Add a Fade effect for Bootstrap or choose between Fade, Slide or Fade and Slide for jQuery

9. Open on Action: Allows a user to change tabs from either clicking or by hovering over a tab.

10. Auto Scroll: Scrolls the window down to the tab content when you click a tab if the page is longer than the tab system.

11. Show When Fully Loaded: Only have tab icon available once the tab content has been initialised.

12. Tab Persistence on Postback: The same tab will stay open if you refresh the current page or if you client the "back" button in your browser after navigating to a different page.

13. Tab Persistence in Url Bookmark: Adds a anchor to your URL that allows the tab to start open.

14. Tab Persistence in Browser Cookies: Creates a file within your browser that remembers which tab was open on the page.

15. Save Button: Click this to save changes.

Advanced Tab Settings

These advanced settings generally don't need to be changed (except to change default tab container to the IMGSTG one) .

1. Maximum number of tabs: Change the amount of tabs that can be created.

2. Include jQuery: Allows the system to not load a version of jQuery if it is already running in the website skin to reduce page load times.

3. Include Bootstrap: Allows the system to not load a version of Bootstrap if it is already running in the website skin to reduce page load times.

4. Container: Allows you to specifically change the wrapping container for the module, if it is available we recommend changing the option to Host: IMGSTG_Tab

5. Delay (milliseconds): Forces the module to wait for the specified amount of time before running, this can be used if there are some plugins that require to be loaded after the page loads, e.g. the Facebook Page plugin.

6. Append IDs to bookmarks: This option allows there to be no conflicts between different tab modules on the page to be bookmarked, if there is only one module on the page you can deselect this option to better generate content for bookmarks.