AZ Window

Default settings

new AZWindow(
{
azWindowTitle: "",
azWindowText: "",
azWindowWidth: 300,
azWindowHeight: 150,
azWindowContentHeight: false,
azWindowPositionTop: 0,
azWindowModal: false,
azWindowTitlebar: true,
azWindowTitlebarClose: true,
azWindowAnimation: true,
azWindowNoParentScroll: false,
azWindowBackground: true,
azWindowBackgroundColor: "",
azWindowColor: "",
azWindowTitlebarBackgroundColor: "",
azWindowTitlebarColor: "",
azWindowButton: {
Button1: false,
TypeButton1: "primary",
SizeButton1: "",
RoundedButton1: false,
TextButton1: "",
Button2: false,
TypeButton2: "info",
SizeButton2: "",
RoundedButton2: false,
TextButton2: ""
}
});

Init AZWindow

There are two ways to initiate the AZWindow. The way you choose is important for further use of the function.

1. new AZWindow();
The function is initiated but you do not assign the function to a variable. This means that you can not directly interact with the function.

2. var AZWindow = new AZWindow();
The function is initiated and assigned to a variable. This means you can use the variable in relation to further interaction with the function.

Whatever approach you choose, you can use the following three features (Events):

azWindowBeforeOpen
azWindowAfterOpen
azWindowAfterClose

Other examples:

Window Title
Window Resize

azWindowTitle Type: String Default: "" Values: Text

azWindowText Type: String Default: "" Values: Text or HTML

azWindowWidth Type: Integer Default: 300 Unit: px
AZ Window width will be adjusted to fit the screen size of the device if azWindowWidth is set larger than the screen width.

azWindowHeight Type: Integer Default: 150 Unit: px
AZ Window height will be adjusted to fit the screen size of the device if azWindowHeight is set larger than the screen height.

azWindowContentHeight Type: Boolean Default: false Values: true or false
By changing the value to true, AZWindow will automatically adjust the height of the window to the content.

azWindowPositionTop Type: Integer Default: 0 Unit: px

azWindowModal Type: Boolean Default: false Values: true or false
By changing the value to true, AZWindow will not automatically close when the user clicks on the outside of AZWindow.

azWindowTitlebar Type: Boolean Default: true Values: true or false
By changing the values to false, you have the option to hide the entire title bar.

azWindowTitlebarClose Type: Boolean Default: true Values: true or false
By changing the values to false, you have the option to hide the close button (X) in the right part of the title bar.

azWindowAnimation Type: Boolean Default: true Values: true or false

azWindowNoParentScroll Type: Boolean Default: false Values: true or false
By changing the values to true, the scroll bar for the main page will be removed and AZWindow will retain its position when scrolling.

azWindowBackground Type: Boolean Default: true Values: true or false

azWindowBackgroundColor Type: Color Hex Default: ""
See also CSS #az-window

azWindowColor Type: Color Hex Default: ""
See also CSS #az-window

azWindowTitlebarBackgroundColor Type: Color Hex Default: ""
See also CSS #az-window > .az-window-titlebar

azWindowTitlebarColor Type: Color Hex Default: ""
See also CSS #az-window > .az-window-titlebar

azWindowButton Type: object
Button1: true or false TypeButton1: "default" or "primary" or "success" or "info" or "warning" or "danger" or "link" SizeButton1: "" or "xs" or "sm" or "md" RoundedButton1: true or false TextButton1: Text
Button2: true or false TypeButton2: "default" or "primary" or "success" or "info" or "warning" or "danger" or "link" SizeButton2: "" or "xs" or "sm" or "md" RoundedButton2: true or false TextButton2: Text

functionlib/azWindowBeforeOpen Type: Function

$.subscribeonce("functionlib/azWindowBeforeOpen", function ()
{
});

This function is triggered before AZWindow is fully initiated.

functionlib/azWindowAfterOpen Type: Function

$.subscribeonce("functionlib/azWindowAfterOpen", function (e, data)
{
data.azChangeWindowTitlebar - ƒ (n)
data.azWindowResize - ƒ (n)
data.azWindowClose - ƒ ()
});

This function is triggered after AZWindow is fully initiated.

functionlib/azWindowAfterClose Type: Function

$.subscribeonce("functionlib/azWindowAfterClose", function ()
{
});

This function is triggered after AZWindow is closed.

AZ Window - Title

Default settings

azChangeWindowTitlebar(
{
azWindowTitle: "",
azWindowTitlebarBackgroundColor: "",
azWindowTitlebarColor: "",
azWindowAlertTimeout: 3000
});

azWindowTitle Type: String Default: "" Values: Text

azWindowTitlebarBackgroundColor Type: Color Hex Default: ""
See also CSS .az-window-titlebar

azWindowTitlebarColor Type: Color Hex Default: ""
See also CSS .az-window-titlebar

azWindowAlertTimeout Type: Integer Default: 3000 Unit: milliseconds

var ChangeWindowTitlebarOptions =
{
azWindowTitle: "",
azWindowTitlebarBackgroundColor: "",
azWindowTitlebarColor: "",
azWindowAlertTimeout: 3000
};

azChangeWindowTitlebar(ChangeWindowTitlebarOptions);

AZ Window - Resize

Default settings

azWindowResize(
{
azWindowWidth: 300,
azWindowHeight: 150
};

azWindowWidth Type: Integer Default: 300 Unit: px

azWindowHeight Type: Integer Default: 150 Unit: px

var WindowResizeOptions =
{
azWindowWidth: 600,
azWindowHeight: 600
};

azWindowResize(WindowResizeOptions);

AZ Window CSS

AZWindow has some basic CSS that you should not initially need to adjust. window.css
You can find the CSS which you can change yourself in the file CSS Team

/*---------------------
AZ Window
window.css
---------------------*/

#az-window
{
background-color: #FFFFFF;
color: #000000;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#az-window > .az-window-titlebar
{
background-color: #0078D7;
color: #FFFFFF;
}

#az-window > .az-window-titlebar > h1
{
font-size: 14px;
}

#az-window > .az-window-titlebar > span
{
font-size: 14px;
font-weight: bold;
}

#az-window > .az-window-titlebar > span:hover
{
color: #FF4136;
}