AZ Window

AZ Full Window

Default settings

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

Default settings

new AZFullWindow(
{
azFullWindowText: "",
azFullWindowPosition: "bottom",
azFullWindowFadeIn: 400,
azFullWindowFadeOut: 400,
azFullWindowBackgroundColor: "",
azFullWindowColor: ""
});

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

Init AZFullWindow

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

1. new AZFullWindow();
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 AZFullWindow = new AZFullWindow();
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):

azFullWindowBeforeOpen
azFullWindowAfterOpen
azFullWindowAfterClose

azWindowTitle Type: String Default: "" Values: Text

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

azWindowWidth Type: Integer Default: 450 Unit: px
For screen sizes below 576, azWindowWidth 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
For screen sizes below 576, azWindowHeight will be adjusted to fit the screen size of the device if azWindowHeight is set larger than the screen height.

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" 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" 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.azWindowClose - ƒ ()
});

This function is triggered when 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 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;
}

AZ Full Window CSS

AZFullWindow 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 Full Window
window.css
---------------------*/

#az-full-window
{
background-color: #FFFFFF;
color: #000000;
}

#az-full-window-close
{
padding: 7px 14px;
font-size: 35px;
}

#az-full-window-close:hover
{
background: #DDDDDD;
}