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.
