The PopUp Select class offer a way to open a pop up window where there is a list of different options. where for each you can add events.

How to Initialize the PopUp Select?


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


Also to be able to open the PopUp the function SetOpening() has to be called



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 PopUp all PopUp components will be defined by this name (this is to avoid mixing if you use different PopUp, so be sure to use different name for each PopUp).

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 PopUp will start by the RegistryName defined in arguments

SetOpening
  • Curve: CurveType - Animation curve type for opening.
  • Integer: Duration - Duration of the opening
  • Integer: FPS - How many frame per second
  • Class: CurveDetails - Any curve details require by the Animation

VOID

Setting up all information about the opening animation of the pop up.

Open
  • None

VOID

Open the popup


Note: SetOpening() has to be called first.

Close
  • None

VOID

Close the popup

Add
  • String: Text - Text added to the option (it also represent default text if you use the Lang Class).
  • String: LangID - LangID of the text (it also used as option name).
  • Function: Func - Function called when this option is clicked.
  • @Nullable Lang: Lang - Lang Class used for this option.
  • @Nullable String: LangSection - If you using the Lang Class then add the Lang Section here.

VOID

Add an option to the select popup

ClearOptions
  • None

VOID

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



Setters Functions

Name

Arguments

Return

Description

SetHeight
  • Integer - @CSS String: Height - Height

VOID

Change the popup height but also reset position to center the window.

SetHeight
  • Integer - @CSS String: Width - Width

VOID

Change the popup width but also reset position to center the window.

SetIndex
  • Integer: Index - z-index of the popup

VOID

Change the z-index of the pop up.

SetTitleText
  • String: Text - Text added to the option (it also represent default text if you use the Lang Class).
  • @Nullable Lang: Lang - Lang Class used for this option.
  • String: LangID - LangID of the text
  • @Nullable String: LangSection - If you using the Lang Class then add the Lang Section here.

VOID

Set the title text of this popup.

SetTitleSize
  • Integer - @CSS String: Size - Set the title section size

VOID

Resize the title section, the selection part will be automatically resized and moved too.

SetTitleBackgroundColor
  • Color - : Color - Color of the title section background

VOID

Setup the background color of the title section.

SetSelectBackgroundColor
  • Color - : Color - Default background color of the selection.
  • Color - : HoveredColor - Background color of the selection when Hovered.
  • Color - : PressedColor - Background color of the selection when Pressed.

VOID

Setup background color of the selection sections. apply for each

SetBorderStyle
  • @CSS String: Type - Border type
  • Integer - @CSS String: Thickness - Border Size
  • Color - : Color - Color of the border

VOID

Set the border that will be used as separation between two options.

SetHorizontalAlign
  • Integer - @CSS String - String: Position - Set the text margin value (use "centered" to center the text).

VOID

Set the options horizontal alignment.

SetBackColor
  • Color - : Color - background color

VOID

Set the popup background color.





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

id

String

undefined

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

name

String

undefined

Name of this PopUp.

basedId

String

undefined

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

select

Class[]:

  • JQuery DOM Object: div - option main div
  • JQuery DOM Object: p - option p
  • String: langId
  • String: id

[]

Where all options details are stored.

scale

Integer

0

Store the actual size of the PopUp. (Used by animation).

animation

Integer

null

Store the actual animation (used with ClearInterval).

curve

Class:

  • Curve: CurveType
  • Integer: duration
  • Integer: FPS
  • Class: details

{}

Hold animation details, this class is set with SetOpening() function.

selectMargin

Class:

  • String: margin-left

0px

Hold the text margin for the options

selectBorder

String

none 0px black

Hold the text border for the options

NormalBG

String

white

Hold the background color for the options

HoveredBG

String

none

Hold the background color for the options when hovered

PressedBG

String

none

Hold the background color for the options when pressed



Functions:        

Updates functions

Name

Arguments

Return

Description

UpdateTitle
  • None

None

Reset text centering of the title.

UpdateSelects
  • None

None

Reset text centering of the options.

UpdateStyle
  • None

None

Set all design of the popup



Util Functions

Name

Arguments

Return

Description

GetTitle
  • None

JQuery DOM Object

Get the title div.

GetTitleP
  • None

JQuery DOM Object

Get the title p (text).

GetSelect
  • None

JQuery DOM Object

Get select section div.

GetBG
  • None

JQuery DOM Object

Get background section div.




Compatibility


LANGUAGE CLASS:  Entirely Compatible

Created with the Personal Edition of HelpNDoc: Easily create Qt Help files