Using JSDialog and API

The most used classes and methods:

• JSDialog
  • JSDialog.showMessageDialog(..)
  • JSDialog.showConfirmDialog(..)
  • JSDialog.create(..)
• JSDialog.DialogDefinition
• JSDialog.DialogInstance
• JSDialog.ButtonDefinition
• JSDialog.ButtonInstance
• JSDialog.Config
  • JSDialog.Config.skin
• JSDialog.Lang

JSDialog class

This is the mail class of the library. It is used for showing messages, configrmation dialogs and creating custom windows.

JSDialog.showMessageDialog(text [, icon, func, width, height, title, buttonTitle])

Creates and shows the message or alert. Use this function to show the dialog with the only button ("OK" by default) and message inside it. All parameters except text are optional. Example of use:

JSDialog.showMessageDialog("Hello, World!");

or:

JSDialog.showMessageDialog(
    "This was a big mistake", 
    "error", 
    function() { console.log('Closed'); }
);

See more samples and demos of message dialog usage.

text: String
Default value: no (required)
The text message for the dialog. Please specify plain text here. All HTML tags will be encoded. Use standard line delimiter \n to specify multiline message.

type: String
Default value: "info"
Available values: "info", "warning", "error", "confirm", "none", or any custom URL
The type of the message. This parameter affects to the icon displayed in the dialog and its default title. If none value is set then "Information" title will be used by default. If this value contains an URL it will be used to display custom icon placed on this URL (with "Information" title by default). We recommend you to use 64x64px icons.

func: function()
Default value: null
The function which is called on the dialog is closed.

width: Integer
Default value: 450
The width for the new dialog in pixels. This is the width of content area only, the borders depends of the used skin and will be added to this width automatically.

height: Integer
Default value: 84
The height for the new dialog in pixels. This is the height of content area only, the borders and height of title and buttons depends of the used skin and will be added to this height automatically.

title: String
Default value: depends of type
By default the title is got by type value. This option lets you set your own title.

buttonTitle: String
Default value: "OK"
Set this option to override default button name.

JSDialog.showConfirmDialog(text, func, type, buttons, width, height, title)

Creates and shows the confirmation dialog. Text, buttons, handler and other parameters can be customized. Usage sample:

JSDialog.showConfirmDialog(
    "Do you want to continue?",
    function(result) {
        if (result == 'ok')
            console.log("User confirmes the operation"); 
    }
);

or:

JSDialog.showConfirmDialog(
    "Are you sure?\nAll unsaved changes will be lost",
    function(result) {
        if (result == 'ok')
            console.log("Yes pressed"); 
    },
    "warning",
    "yes:Yes, sure!|no|abort"
);

See more samples and demos of confirmation dialog usage.

text: String
The text message for the dialog. Please specify plain text here. All HTML tags will be encoded. Use standard line delimiter \n to specify multiline message.

type: String
Default value: "info"
Available values: "info", "warning", "error", "confirm", "none", or any custom URL
The type of the message. This parameter affects to the icon displayed in the dialog and its default title. If none value is set then "Information" title will be used by default. If this value contains an URL it will be used to display custom icon placed on this URL (with "Information" title by default). We recommend you to use 64x64px icons.

buttons: String
Default value: "ok|cancel"
Definition of buttons set and (optionally) their titles. Format: button1[:title1]|button2[:title2]... You can do not set titles in this case default titles for specifiend buttons will be used. The list of buttons available: yes (synonyms with other titles: ok, confirm, accept no (synonyms with other titles: decline) cancel (synonyms with other titles: abort) Note that using synonyms of the buttons will not affect to return result in the function func passed as the handler.

width: Integer
Default value: 450
The width for the new dialog in pixels. This is the width of content area only, the borders depends of the used skin and will be added to this width automatically.

height: Integer
Default value: 84
The height for the new dialog in pixels. This is the height of content area only, the borders and height of title and buttons depends of the used skin and will be added to this height automatically.

title: String
Default value: depends of type
By default the title is got by type value. This option lets you set your own title.

JSDialog.create(parameters: JSDialog.DialogDefinition): JSDialog.DialogInstance

Creates and returnes new dialog instance. This is the main function of the library.
Please use it to create any dialogs except message and confirmation dialogs.
parameters is associative array containing all options for new dialog.
Sample usage:

JSDialog.create(
    {
        elementId: 'btnId',
        title: 'My custom dialog',
        contents: '<p>My custom text</p>',
        onOk: function() { console.log('OK'); }
    }
);  

See more samples and demos of custom dialog usage.

JSDialog.DialogDefinition class

This is associative array to pass inside JSDialog.create function. See its sample usage to see how you can set this array.

Full list of parameters keys:

JSDialog.DialogInstance class

This is the class for all runtime-generated dialogs. When you create any dialog object you get this class instance as result. Use is to manipulate created dialog.

JSDialog.ButtonDefinition

This is the associative array for defining the button inside JSDialog.create function.

It has these parameters:

JSDialog.ButtonInstance class

The class representing button object on a dialog.

You do not need to create this object manually, but you may need to know its API for changing buttons in runtime. For example you can call this code to disable your "OK" button::

dlgInstance.getOkButton().setEnabled(false);

JSDialog.Config class

This global class is used to preconfigure the JSDialog. Use it before creating any dialogs to set visual theme, change CSS and HTML templates of the dialogs.

<div class="jsdialog_dlg">
    <div class="jsdialog_title">
        <div class="jsdialog_title_text"></div>
        <div class="jsdialog_x">×</div>
    </div>
    <div class="jsdialog_content_wrap">
        <div class="jsdialog_content"></div>
    </div>
    <div class="jsdialog_buttons"></div>
</div>

<a></a>

<div class="jsdialog_bg"></div>

JSDialog.Lang class

This class contains all string used by JSDialog. Use it to localize JSDialog library to other language. Localizing must be done before any dialogs are created. For example:

JSDialog.Lang = {
    ok: "OK",
    yes: "Да",
    confirm: "Подтвердить",
    ...
};

The list of keys in JSDialog.Lang object: