The overlapping tab in an interactive slide tab system. This class will generate everything and will link all events.

How to Initialize the Overlapping Tab?


The initialization of the Overlapping Tab is an one step process, just call the function Init of the class with its two arguments (see bellow for more details).

Note: the Initialization is usually done by EE


Once called all setters and data functions, call Launch function to generate all the code.


Class Details

Functions:


       Initialization & Main Functions

Name

Arguments

Return

Description

Init
  • String: ID - HMTL ID defining the position in the DOM of the tab
  • String: Name - Define the name of the tab all tab components will be defined by this name (this is to avoid mixing if you use different ImageList, so be sure to use different name for each tab).

VOID

This function Initialized every part of the viewer: HMTL, CSS, Data, Events, etc...

It will be generated in the defined ID and all HTML IDs used for this tab will start by the name defined in arguments

Launch
  • None

VOID

This function is doing the main setup but it mostly relay on the bigger function CreateInteraction() for all the interaction part.



       Tab Functions


Name

Arguments

Return

Description

AddTab
  • String: DefaultText - Default text shown if the language can't be found or no lang has been specified.
  • @nullable String: Side - not used, insert null
  • @nullable Lang: Lang - lang class used to set up the vertical title.
  • String: LangID - if you use Language enter the LangID (WILL BE USED AS TAB ID)
  • @nullable String: LangSection - if you use Language enter the LangSection

VOID

This function will create a new section, (all interaction will be created during the launch function). The lang information are only for the title of this section (When the section is not hovered, closed).


To add the block content (When the section is opened) call AddTabBlock to add the large content.

AddTabBlock
  • String: TabId - ID of the target type (IDs Are defined by LangID in AddTab).
  • String: DefaultText - Default text shown if the Language can't be found or no lang has been specified.
  • @nullable Lang: Lang - lang class used to set up the vertical title.
  • @nullable String: LangID - if you use Language enter the LangID
  • @nullable String: LangSection - if you use Language enter the LangSection

VOID

With a DefaultText or the language class this function is used to add a block to the selected section.


The block is the part shown when the section is open (When the section is hovered).

AddTitle
  • String: DefaultText - Default text shown if the Language can't be found or no lang has been specified.
  • @nullable String: Side - not used, insert null
  • @nullable Lang: Lang - lang class used to set up the vertical title.
  • @nullable String: LangID - if you use Language enter the LangID
  • @nullable String: LangSection - if you use Language enter the LangSection

VOID

This function will add the section visible when nothing is hovered (The Tab Title), the languages content asked is only for the text when another section is hovered (The vertical Text).


To add the block content (When the section is opened) call AddTitleBlock to add the large content.

AddTitleBlock
  • String: DefaultText - Default text shown if the Language can't be found or no lang has been specified.
  • @nullable Lang: Lang - lang class used to set up the vertical title.
  • @nullable String: LangID - if you use Language enter the LangID
  • @nullable String: LangSection - if you use Language enter the LangSection

VOID

With a DefaultText or the language class this function is used to add a block to the title.


The block is the part shown when the section is open (Here when nothing is hovered).



Setters Functions

Name

Arguments

Return

Description

SetBackgroundColor
  • String: Which - Selected section ID (Use "Title" for the title div).
  • Color: Color - Color to add

VOID

Change the background color of the selected section.

SetBackgroundImage
  • String: Which - Selected section ID (Use "Title" for the title div).
  • String: URL - Image URL
  • String: Size - Background size
  • @nullable String: Filtre - Use to apply CSS filter
  • @nullable Class: Offset - Use to apply a background offset
    • String: x - X Offset
    • String: y - Y Offset

VOID

Use this function to add a background image to a specific section.

SetHeight
  • String or Integer: Height - Tab height

VOID

Set the tab height (Launch need to be to apply the setting).

SetSmallWidth
  • Integer: Width - Tab Width (in %)

VOID

Setting up the width when a section is closed.

SetVerticalFont
  • String: Which - Selected section ID (Use "Title" for the title div).
  • String: Name - Name of the font.

VOID

Call this function to change the font of the vertical text of the selected section.

SetVerticalFontColor
  • String: Which - Selected section ID (Use "Title" for the title div).
  • Color: Color - Color to add

VOID

Call this function to change the font color of the vertical text of the selected section.





Private Details


All private details are usable but its recommended to not use any of those. It might modify the proper functioning of the class.


Variables (Members):


       Main Members


Name

Type

Default Value

Description

allTabs

JQuery DOM Object []

[]

Hold the the all created tabs.

basedId

String

undefined

HTML Id of the viewer parent.

height

String or Integer

0

Hold the height of the tab.

id

String

undefined

Global HMTL Id of the viewer (# + name).

name

String

undefined

Name of this Image list.

smallWidth

Integer

10

Hold the width of the sections when they're closed.

titleTab

JQuery DOM Object

null

Hold the the title tab when created.



       Animation Member

Name

Type

Default Value

Description

animations

Integer []

[]

Hold all animation IDs when launch (Match with allTabs ids).

animationsSize

Float []

[]

Hold all the actual width of the sections (Match with allTabs ids).

verticalOpacity

Float []

[]

Hold all the actual opacity of the sections' vertical title (Match with allTabs ids).



Functions:

Initialization & Main Functions

Name

Arguments

Return

Description

CreateInteraction
  • None

VOID

This function Initialize all the events, and create the animations


This is an initialization step function and is called by the Launch function.



Util Functions

Name

Arguments

Return

Description

GetTab
  • String: Name - ID of the section

JQuery DOM Object

Get the selected section (the section) div object.

GetTab_Block
  • String: Name - ID of the section

JQuery DOM Object

Get the selected section title block.

GetTab_Vertical
  • String: Name - ID of the section

JQuery DOM Object

Get the selected section vertical text.

GetTitle
  • None

JQuery DOM Object

Get the title (the section) div object.

GetTitle_Block
  • None

JQuery DOM Object

Get the title block.

GetTitle_Vertical
  • None

JQuery DOM Object

Get the title vertical text.




Compatibility


LANGUAGE CLASS: Entirely Compatible

Created with the Personal Edition of HelpNDoc: Qt Help documentation made easy