The InteractiveToolBox class offer a way to replace the default context menu and create yours.

How to Initialize the Interactive Tool Box?


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



Class Details

Functions:


       Initialization & Main Functions

Name

Arguments

Return

Description

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

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 RegistryName defined in arguments

Open
  • Class: Pos - tool box position in
    • int: X  - Left position
    • int: Y  - Top position

VOID

Open the InteractiveToolBox at defined position

Close
  • None

VOID

Close the box.

AddOption
  • String: Name - Define the option name (make sure it's unique.
  • String: Text - Text to add in the option.
  • Function: Event - Function called when this option is clicked.
  • Class: EventsArgs - Arguments that need to be passed for the Event function

VOID

Add an option to the tool box.

ClearOptions
  • None

VOID

Remove all options (tool is not opening if there is no option).



Setters Functions

Name

Arguments

Return

Description

SetWidth
  • Integer - @CSS String: Width - Width

VOID

Change the tool box width.

SetBorder
  • String: Where - Where the border should be created (for the the tool box): "top", "bottom", "left", "right", "all". You can add multiple location at the same time
  • @CSS String: Type - Set the border Type.
  • Integer - @CSS String: Size - The border size.
  • Color: Color - set the border color

VOID

The a border to the tool box

SetOptionHeight
  • Integer - @CSS String: Height - The height of each options
  • @Nullable String: On - Define if the this height is applying for when the option is "Normal" or 'Hovered" or "Pressed". You can use "All" to apply at any condition.

VOID

Set the option height size. (Same for all).

SetOptionPadding
  • String: Where - Where the padding should be set (for the the tool box): "top", "bottom", "left", "right", "all". You can add multiple location at the same time
  • Integer - @CSS String: size - The CSS padding size
  • @Nullable String: On - Define if the this height is applying for when the option is "Normal" or 'Hovered" or "Pressed". You can use "All" to apply at any condition.

VOID

Set the padding inside all options. (Same for all).

SetOptionBorder
  • String: Where - Where the padding should be set (for the the tool box): "top", "bottom", "left", "right", "all". You can add multiple location at the same time
  • @CSS String: type - CSS border type.
  • Integer - @CSS String: size - The CSS border size
  • Integer []: Color - Array defining the RGB.
  • @Nullable String: On - Define if the this height is applying for when the option is "Normal" or 'Hovered" or "Pressed". You can use "All" to apply at any condition.

VOID

Set the border of each options.

SetOptionBackgroundColor
  • Integer [] - @CSS String: Color - Array or string defining the RGB.
  • @Nullable String: On - Define if the this height is applying for when the option is "Normal" or 'Hovered" or "Pressed". You can use "All" to apply at any condition.

VOID

Set the background color for each options (Same for all).

SetOptionGradientBackgroundColor
  • Integer - @CSS String: to - Degrees of the gradient
  • Integer [][] - @CSS String[]: Colors - Array that contain arrays of Integer for the RGB or Strings of the colors
  • @Nullable String: On - Define if the this height is applying for when the option is "Normal" or 'Hovered" or "Pressed". You can use "All" to apply at any condition.

VOID

Set the background color for each options with a gradient effect.


/!\ /!\ This function is not done yet and might not work properly /!\ /!\





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

options

Class[] :

  • String: name - name of the option
  • String: text - text of the option
  • Event: event - callback when option is pressed.

[]

Hold a list of the options details.

isOpen

Boolean

false

Used to check if the toolbox is or not open.

style

Class:

  • CSS Class: normal - CSS when option is normal
  • CSS Class: hovered - CSS when option is hovered
  • CSS Class: pressed - CSS when option is pressed

Each CSS Class has this default setting:



//position                height: "100px",

                       padding: "none",

padding-top: "none",

padding-right: "none",

padding-bottom: "none",

padding-left: "none",

                       

                       //Design                border: "none",

border-top: "none",

border-right: "none",

border-bottom: "none",

border-left: "none",

                       

background-color: "white",

background-image: "none"

Hold the 3 CSS Class of the option, it is used by the options event when hovered or pressed

id

String

undefined

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

name

String

undefined

Name of this Tool box.

basedId

String

undefined

Where it is located is the existing DOM (its parent).



Functions:        

Updates functions

Name

Arguments

Return

Description

UpdateStyle
  • None

None

Set all option to default style.



Util Functions

Name

Arguments

Return

Description

GetOptionFromName
  • String: Name - name of the selected option

JQuery DOM Object

Get the option div.




Compatibility


LANGUAGE CLASS: Not compatible.

Created with the Personal Edition of HelpNDoc: Easily create HTML Help documents