Message properties
Message box
Usage
dhx.message({
text?: string,
icon?: string,
css?: string,
html?: string,
node?: HTMLElement | string,
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right", // "top-right" by default
expire?: number,
});
Description
The configuration object of a message box may take the following parameters:
| text | (optional) the text of a message box |
| icon | (optional) an an icon from the used icon font |
| css | (optional) the style of a message box |
| html | (optional) the HTML content to be displayed in a message box Related Sample: Message. Message with HTML content |
| node | (optional) the container for a message box or its id |
| position | (optional) the position of a message box: "top-left" | "top-right"| "bottom-left" | "bottom-right"; "top-right" by default Related Sample: Message. Message positioning and container |
| expire | (optional) the time period of displaying a message box before it disappears, in ms |
Example
dhx.message({
text:"Message text",
icon:"dxi-clock",
css:"expire",
expire:1000
});
Related samples:
Alert box
Usage
dhx.alert({
text: string,
header?: string,
css?: string,
buttons?: string[],
buttonsAlignment?: "left" | "center" | "right", // "left" by default
blockerCss?: string,
htmlEnable?: boolean, // true by default
});
Description
The configuration object of an alert box may take the following parameters:
| text | (required) the text of an alert box |
| header | (optional) the text of an alert box header |
| css | (optional) the style of an alert box |
| buttons | (optional) an array with the name of the alert button. By default, the button's name is "Apply" |
| buttonsAlignment | (optional) the position of buttons: "left" | "center" | "right"; "left" by default |
| blockerCss | (optional) the style of blocking the window when an alert box appears |
| htmlEnable | (optional) enables/disables the HTML content to be displayed in an alert box; true by default Related Sample: Message. Disable HTML content |
Example
dhx.alert({
header:"Alert Header",
text:"Alert text",
buttonsAlignment:"center",
htmlEnable: false
});
Related samples:
Confirm box
Usage
dhx.confirm({
text: string,
header?: string,
css?: string,
buttons?: string[],
buttonsAlignment?: "left" | "center" | "right", // "right" by default
blockerCss?: string,
htmlEnable?: boolean, // true by default
});
Description
The configuration object of a confirm box may take the following parameters:
| text | (required) the text of a confirm box |
| header | (optional) the text of a confirm box header |
| css | (optional) the style of a confirm box |
| buttons | (optional) an array with the names of the confirm buttons. By default, the buttons' names are "Reject" and "Apply" |
| buttonsAlignment | (optional) the position of the button: "left" | "center" | "right"; "right" by default |
| blockerCss | (optional) the style of blocking the window when a confirm box appears |
| htmlEnable | (optional) enables/disables the HTML content to be displayed in a confirm box; true by default Related Sample: Message. Disable HTML content |
Example
dhx.confirm({
header:"Confirm Header",
text:"Confirm text",
buttons:["cancel", "apply"],
buttonsAlignment:"center",
htmlEnable: false
});
Related samples:
Tooltip
Usage
dhx.tooltip( text: string, {
node: HTMLElement | string,
margin?: number, // 8 by default
position?: "right" | "bottom" |"center" | "left" | "top", // "bottom" by default
css?: string,
force?: boolean, // false by default
showDelay?: number,
hideDelay?: number,
htmlEnable?: boolean, // false by default
});
Description
The dhx.tooltip() function takes two parameters:
- text - the text of a tooltip
- config - the configuration object of a tooltip
The configuration object of a tooltip may take the following parameters:
| node | (required) the target of tooltip or its id |
| margin | (optional) margin between the node and tooltip, 8px by default |
| position | (optional) the position of a tooltip: "right", "bottom", "center", "left", "top"; "bottom" by default |
| css | (optional) the style of a tooltip box |
| force | (optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, false by default |
| showDelay | (optional) the time period that should pass before showing a tooltip, in ms |
| hideDelay | (optional) the time period that should pass before hiding a tooltip, in ms |
| htmlEnable | (optional) enables/disables the HTML content to be displayed in a tooltip; false by default |
Example
dhx.tooltip("Tooltip from the right", {
node: "fourth",
position: "right",
margin: 2,
htmlEnable: true
});
Related Samples:
Change log: