InteractiveTab
InteractiveTab
The class will generate automatically an interactive tab interactive and entirely custom.
How to Initialize the tab ?
The initialization of the tab is a two step process:
- First call the Init function: It will initiate the tab HTML and some basic CSS
- Then call the InitData function: It will initiate all data in tab including CSS.
Class Details
Functions:
Name |
Arguments |
Return |
Description |
Init |
|
VOID |
This function will generate the whole HTML code of the tab, it will also apply some basic CSS. The function need a tab TabInitializer to setup the tab (See TabInitializer for more details) |
InitData |
|
VOID |
This function use a JSON format to Initiate all data and the CSS that you want to apply. |
addLegend |
NONE |
Create a new Legend assign to the tab. |
Structures:
Name |
Data |
Default Values |
Description |
Tab |
|
|
Tab structure is used to initialize to tab. |
Private Details
All private details are usable but its recommended to not use anythings of those. It might modify the good working of the class
Variables (Members):
Name |
Type |
Default Value |
Description |
id |
String |
null |
HTML ID where the tab is located |
name |
String |
null |
Name of table use to define all other IDs |
tabDetails |
null |
Hold the TabInitializer used to Initiate the tab. |
|
timeoutHolder |
Timeout |
null |
This member is used for hold the SetInterval event to be able to cancel it if the mouse leave the selected case. |
Functions:
Name |
Arguments |
Return |
Description |
CheckAndReplaceKey (Util Function) |
|
String |
The tab class offer a way to define constant word (mostly for using with language). This function check the all text for a %%WORD%% to replace it by getting the reference trough the data (The Mess). |
difinedBackPosition |
|
VOID |
Move the selected back on the mouse position with a small gap(This is to avoid by moving the mouse to fast to move over the back and making it disappear). |
EventInit |
|
VOID |
Initialize the events for the cells of the tab:
|
GetBackId (Util Function) |
|
String |
Quick way to get the HTML ID of a back section. |
GetBoxId (Util Function) |
|
String |
Quick way to get the HTML ID of a box. |
GetLineId (Util Function) |
|
String |
Quick way to get the HTML ID of a Line. |
isOK |
|
Boolean |
Check if the selected OBJ is valid (Defined // Non-Null) |
Data Structure
Main Structure Details
Note:
black -> Needed
Blue -> Optional
{
"data": { //Main data class
"HorizontalTitleLine": [], //String list for the title on the horizontal part
"VerticalTitleLine": [], //String list for the title on the vertical part
"Section": { //Define the sections (Section are groups for titles).
"HorizontalSection": [ //Define the horizontal sections (Section are groups for titles).
{
"Value": "", //String for the value of the section
"Size": 1 //How many title (lines) the section take (note that the next section size (count) will start after the one)
}
],
"VerticalSection": [ //Define the vertical sections (Section are groups for titles).
{
"Value": "", //String for the value of the section
"Size": 1 //How many title (rows) the section take (note that the next section size (count) will start after the one)
}
],
"Angle": "" //String the define the data in the angle.
},
"Mess": [ //The mess is the constant section, here you can define common data that can change just here and not everywhere.
{
"Key": "" //The key the program will look for when a replacement is needed.
"Value": "" //Value to replace.
}
],
"Line": [ //Groups of lines you need to add the below class for each line of your array
{ //Line class brackets
"Box": [ //Groups of boxes on the line you need to add the below class for each line of your array
{ //Box class brackets
"Constant": { //Constant part of the boxes (this is just to help when writing different language files)
"FrontCSS": { //CSS Group for the box
"CSS":{ //CSS details
},
"Children":[ //To add extra CSS for some children (see below how it work)
]
},
"BackCSS": { //CSS Group for the back part
"CSS":{ //CSS details
},
"Children":[ //To add extra CSS for some children (see below how it work)
]
}
},
"Value": { //Value group for the boxes
"Front": [ //Front value: each String is a line.
],
"Back": [ //Back value: each String is a line.
]
}
}
]
}
],
"BaseCSS": { //Group to define the basic CSS (This CSS is override by the local CSS)
"Front": { //Group to define the basic CSS on the front part
"CSS":{
},
"Children":[
]
},
"Back": { //Group to define the basic CSS on the back part front part
"CSS":{
},
"Children":[
]
},
"Title":{ //Group to define the CSS of the titles
"Horizontal":{ //Group to define the CSS of the horizontal title
"CSS":{
},
"Children":[
]
},
"Vertical":{ //Group to define the CSS of the vertical title
"CSS":{
},
"Children":[
]
},
"Angle":{ //Group to define the CSS of the angle title
"CSS":{
},
"Children":[
]
}
},
"Section":{
"Horizontal":{ //Group to define the CSS of the horizontal sections
"CSS":{
},
"Children":[
]
},
"Vertical":{ //Group to define the CSS of the Vertical sections
"CSS":{
},
"Children":[
]
},
"Void":{ //Group to define the CSS of the void sections (angle between the two sections)
":{
"CSS":{
},
"Children":[
]
}
}
}
},
Note:
- CSS Children: Children is a list of class composed by two data (Name are important):
- String: ID - HTML ID of the target (it start by adding the ID of the target object then the children)
- Class: CSS - CSS details to add
- Keys: in the values you can use Key. To use one just add the key word between %% (e.g. %%Key%%) then in the mess you can define whet the key mean. It's used to avoid changing things that are the same between boxes.
Created with the Personal Edition of HelpNDoc: Full-featured Kindle eBooks generator