proto-dialog-js
Table of Contents
Usage
<link rel="stylesheet" type="text/css" href="proto-dialog.css"/> <!-- ... --> <script type="text/javascript" src="jquery.proto-dialog.js"></script> <!-- ... --> <div id="proto-dialog"> <div id="proto-dialog-header"></div> <div id="proto-dialog-content"></div> <div id="proto-dialog-footer"></div> <!-- ... --> </div>Add the UI.Layout module as a dependency to your application module:
$('#proto-dialog').protoDialog({ ... });Options
var protoDialogOptions = { actions: { }, animation: { 'open': false, 'close': false }, onInit: function($dialog) { }, onOpen: function($dialog) { }, onOpened: function($dialog) { }, onClose: function($dialog) { }, onClosed: function($dialog) { }, onResize: function($dialog) { }, onAction: function(_action, $dialog) { } };actions
Type: Object Default: {}
Define buttons that you want on action bar
var actions = { 'actionOne': { 'label': 'button label', 'class': 'html classes', 'on': { 'click': function(event, $dialog) { $(this).html('custom - custom on click event'); }, 'mouseover': function(event, $dialog) { $(this).html('custom - custom on mouse over event'); } } }, 'actionTwo': { 'label': 'button label', 'class': 'html classes' }, 'actionTree': { 'label': 'button label', 'class': 'html classes' } };onAction
Type: Function Default: function ($_action, _event, $dialog) {}
This method is called each time when an action button is clicked. If you want to have full control on action button events use the on key in actions.
var onAction = function (action, _event, $dialog) { switch(_action) { case 'actionTwo': /* Some specific action for button actionTwo */ break; default: $(this).html(_action + ' - auto click event'); break; } };onInit
Type: Function Default: function ($dialog) {}
This method is called when the dialog is initialized for the first time, and it is called one time only from the widget.
var onInit: function ($dialog) { var protoDialogContent = $dialog.find('.proto-dialog-content'); var dialogFooter = $dialog.find('#proto-dialog-footer'); var dialogHeader = $(this).find('#proto-dialog-header'); };onOpen
Type: Function Default: function ($dialog) {}
This method is called each time before the dialog is to be opened.
onOpened
Type: Function Default: function ($dialog) {}
This method is called each time after the dialog has been opened.
onClose
Type: Function Default: function ($dialog) {}
This method is called each time before the dialog is to be closed.
onClosed
Type: Function Default: function ($dialog) {}
This method is called each time after the dialog has been closed.
onResize
Type: Function Default: function ($dialog) {}
This method is called each time when the screen size changes.
Methods
Take a look at the list of methods to control the dialog.
open
This method is called to open a dialog manually.
$('#proto-dialog').protoDialog('open', { ['title': ... ] [, 'content': ... ] });close
This method is called to close a dialog manually.
$('#proto-dialog').protoDialog('close');settings
This method is called when you want to override settings.
$('#proto-dialog').protoDialog('settings', { ... });Advanced usage
The advanced usage is about taking full control of the dialog.
Dialog
Take a look at the dialog HTML structure in order to have a better view, and push your ideas further. When ever you have a $dialog variable in a on*** function, this will be your $('.proto-dialog-overlay') object. The <!-- Dialog content --> is replaced by your target object that the widget is applied to.
<div class="proto-dialog-overlay"> <div class="proto-dialog-window"> <div class="proto-dialog-inner"> <button type="button" class="proto-dialog-close proto-dialog-button"></button> <div class="proto-dialog-title"> <h3><!-- Title --></h3> </div> <div class="proto-dialog-content"> <!-- Dialog content --> </div> <div class="proto-dialog-actions"> <!-- Action buttons --> </div> </div> </div> </div>Controller
var controllerInterface = { /** * Closes the dialog */ 'close': function () {}, /** * Openes the dialog */ 'open': function () {}, /** * Is dialog opened */ 'isOpened': function () {}, /** * Sets the title */ 'setTitle': function () {}, /** * Sets the content */ 'setContent': function () {}, /** * Defines new settings */ 'setSettings': function () {}, /** * Get current settings */ 'getSettings': function () {}, }; /* Get dialog controller instance */ var _data = $('#proto-dialog').data('protoDialog'); // If the widget is initialized if (_data) { var _controller = _data['controller']; var _settings = _data['settings']; var $target = _data['target']; // === $('#proto-dialog') }
