Dialogs Manager

Dialogs Manager for websites. based on jQuery-UI

Getting started

Since this plugin based on jQuery and using the jQuery UI Position utility, you need to include them first in your html page:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Please note: Since the jQuery UI Library is too large, and you need only the position feature, it's highly recommended to download it through the official Download Builder in jQuery UI site. Just choose only the position feature and download it to your local folder.

After youv'e included all the required scripts, include the Dialogs Manager core file in your page:

<script src="dialogs-manager.min.js"></script>

Usage

Assuming that we have a simple button:

<button id="click-me">Click Me</button>

We'll write the following script:

jQuery(function ($) {

	var dialogManager = new DialogsManager.Instance(); // First, create instance of DialogsManager. Usually, you don't need more than one instance per application

	var confirmWidget = dialogManager.createWidget('confirm'); // Now, create a widget with the type you want to use

	confirmWidget.setMessage('Hello, my name is world!'); // Now, set message that will be shown in the dialog

	confirmWidget.onConfirm = function () { // Set what happens when the user clicked on the 'confirm' button

		console.log('I Confirmed!');
	};

	confirmWidget.onCancel = function () { // Set what happens when the user clicked on the 'cancel' button

		console.log('I Canceled!');
	};

	$('#click-me').on('click', function () { // Now, bind event to our button
		confirmWidget.show(); // Clicking this button will show the dialog
	});
});

Additionally, you can write the whole creation of the widget at once, as the following:

jQuery(function ($) {

	var dialogManager = new DialogsManager.Instance();

	var confirmWidget = dialogManager.createWidget('confirm', {
	    message: 'Hello, my name is world!',
        onConfirm: function () {

		    console.log('I Confirmed!');
	    },
        onCancel: function () {

		    console.log('I Canceled!');
	    }
	});

	$('#click-me').on('click', function () {
		confirmWidget.show();
	});
});

Demo

A basic demo can be found here.