wheregroup/jquerydialogextendjs

Maximize and Minimize Buttons for UI Dialog

jQueryUI dialog addon that adds collapse / minimize / maximize interactions. Forked from ROMB/jquery-dialogextend. See original license., _(*1)

Compatible

• jQuery 1.11.1
• jQueryUI 1.11.0

Overview

• Extending (instead of replacing) original jQuery UI dialog
• Maximize and minimize buttons
• Show/Hide close button
• Double-clickable title bar
• Configurable icons
• Custom events

Demo

• Test Tool : http://romb.github.io/jquery-dialogextend/example.html

Tested Browsers

• Chrome 35
• Firefox 14
• IE 8

Please support this project

Donate Bitcoins: 1G8T7Xh2AN5ceduHmHT5TpPFUeddsnQHLQ, _(*2)

Options

closable

Type: Boolean, _(*3)

Usage: enable/disable close button, _(*4)

Default: true, _(*5)

maximizable

Type: Boolean, _(*6)

Usage: enable/disable maximize button, _(*7)

Default: false, _(*8)

minimizable

Type: Boolean, _(*9)

Usage: enable/disable minimize button, _(*10)

Default: false, _(*11)

collapsable

Type: Boolean, _(*12)

Usage: enable/disable collapse button, _(*13)

Default: false, _(*14)

minimizeLocation

Type: String, _(*15)

Usage: sets alignment of minimized dialogues, _(*16)

Default: 'left', _(*17)

Valid: 'left', 'right', _(*18)

dblclick

Type: Boolean, String, _(*19)

Usage: set action on double click, _(*20)

Default: false, _(*21)

Valid: false, 'maximize', 'minimize', 'collapse', _(*22)

icons

Type: Object, _(*23)

Default:, _(*24)

{
  "close" : "ui-icon-circle-closethick", // new in v1.0.1
  "maximize" : "ui-icon-extlink",
  "minimize" : "ui-icon-minus",
  "restore" : "ui-icon-newwin"
}

Valid: <jQuery UI icon class>, _(*25)

Events

load

Type: load, _(*26)

Example:, _(*27)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "load" : function(evt, dlg) { ... }
});
//Bind to event by type
//NOTE : You must bind() the <dialogextendload> event before dialog-extend is created
$("#my-dialog")
  .bind("dialogextendload", function(evt) { ... })
  .dialogExtend();

beforeCollapse

Type: beforeCollapse, _(*28)

Example:, _(*29)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeCollapse" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeCollapse", function(evt) { ... });

beforeMaximize

Type: beforeMaximize, _(*30)

Example:, _(*31)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeMaximize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeMaximize", function(evt) { ... });

beforeMinimize

Type: beforeMinimize, _(*32)

Example:, _(*33)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeMinimize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeMinimize", function(evt) { ... });

beforeRestore

Type: beforeRestore, _(*34)

Example:, _(*35)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeRestore" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeRestore", function(evt) { ... });

collapse

Type: collapse, _(*36)

Example:, _(*37)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "collapse" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendcollapse", function(evt) { ... });

maximize

Type: maximize, _(*38)

Example:, _(*39)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "maximize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendmaximize", function(evt) { ... });

minimize

Type: minimize, _(*40)

Example:, _(*41)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "minimize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendminimize", function(evt) { ... });

restore

Type: restore, _(*42)

Example:, _(*43)

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "restore" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendrestore", function(evt) { ... });

Methods

collapse

Usage: Collapse the dialog without double-clicking the title bar, _(*44)

Trigger: dialogextendbeforeCollapse, dialogextendcollapse, _(*45)

Example:, _(*46)

$("#my-dialog").dialogExtend("collapse");

maximize

Usage: Maximize the dialog without clicking the button, _(*47)

Trigger: dialogextendbeforeMaximize, dialogextendmaximize, _(*48)

Example:, _(*49)

$("#my-dialog").dialogExtend("maximize");

minimize

Usage: Minimize the dialog without clicking the button, _(*50)

Trigger: dialogextendbeforeMinimize, dialogextendminimize, _(*51)

Example:, _(*52)

$("#my-dialog").dialogExtend("minimize");

restore

Usage: Restore the dialog from maximized/minimized/collapsed state without clicking the button, _(*53)

Trigger: dialogextendbeforeRestore, dialogextendrestore, _(*54)

Example:, _(*55)

$("#my-dialog").dialogExtend("restore");

state

Usage: Get current state of dialog, _(*56)

Return: String, _(*57)

Value: 'normal', 'maximized', 'minimized', 'collapsed', _(*58)

Example:, _(*59)

switch ( $("#my-dialog").dialogExtend("state") ) {
  case "maximized":
    alert("The dialog is maximized");
    break;
  case "minimized":
    alert("The dialog is minimized");
    break;
  case "collapsed":
    alert("The dialog is collapsed");
    break;
  default:
    alert("The dialog is normal");
}

Theming

The dialog will have class according to its current state., _(*60)

<div class="ui-dialog jqdx-state-{normal|maximized|minimized|collapsed}">
  <div class="ui-dialog-titlebar">...</div>
  <div class="ui-dialog-content ui-dialog-{normal|maximized|minimized|collapsed}">...</div>
</div>

The buttons are wrapped by title bar of jQuery UI Dialog., _(*61)

Note : After using dialogExtend, close button will not be a direct child of title bar anymore. It will be wrapped by a button pane element, _(*62)

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  ...
  <div class="ui-dialog-titlebar-buttonpane">
    <a class="ui-dialog-titlebar-maximize ui-corner-all" href="#"><span class="ui-icon {icons.maximize}">maximize</span></a>
    <a class="ui-dialog-titlebar-minimize ui-corner-all" href="#"><span class="ui-icon {icons.minimize}">minimize</span></a>
    <a class="ui-dialog-titlebar-restore ui-corner-all" href="#"><span class="ui-icon {icons.restore}">restore</span></a>
    <button type="button" class="ui-dialog-titlebar-close ui-corner-all" href="#">...</button>
  </div>
  ...
</div>

Example - Basic Config

$(function(){
  $("#my-button").click(function(){
    $("

") .dialog({ "title" : "My Dialog" }) .dialogExtend({ "maximizable" : true, "dblclick" : "maximize", "icons" : { "maximize" : "ui-icon-arrow-4-diag" } }); }); });, _(*63)

Example - Full Config

$(function(){
  $("#my-button").click(function(){
    $("

") .dialog({ "title" : "This is dialog title", "buttons" : { "OK" : function(){ $(this).dialog("close"); } } }) .dialogExtend({ "closable" : true, "maximizable" : true, "minimizable" : true, "collapsable" : true, "dblclick" : "collapse", "minimizeLocation" : "right", "icons" : { "close" : "ui-icon-circle-close", "maximize" : "ui-icon-circle-plus", "minimize" : "ui-icon-circle-minus", "collapse" : "ui-icon-triangle-1-s", "restore" : "ui-icon-bullet" }, "load" : function(evt, dlg){ alert(evt.type); }, "beforeCollapse" : function(evt, dlg){ alert(evt.type); }, "beforeMaximize" : function(evt, dlg){ alert(evt.type); }, "beforeMinimize" : function(evt, dlg){ alert(evt.type); }, "beforeRestore" : function(evt, dlg){ alert(evt.type); }, "collapse" : function(evt, dlg){ alert(evt.type); }, "maximize" : function(evt, dlg){ alert(evt.type); }, "minimize" : function(evt, dlg){ alert(evt.type); }, "restore" : function(evt, dlg){ alert(evt.type); } }); }); });, _(*64)