binary-com-jquery-dialogextended

jquery-dialogextend 2.0.4  
===
Download
===
development build

minified library

Compatible
===
- jQuery 1.11.1
- jQueryUI 1.11.0

Overview
===
- Neat, simple, and ABSOLUTELY unobtrusive
- Extending (instead of replacing) original jQuery UI dialog
- Maximize and minimize buttons
- Show/Hide close button
- Double-clickable title bar
- Enhanced title bar options
- 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

Options
===

#### closable ####
Type: Boolean

Usage: enable/disable close button

Default: true

#### maximizable ####
Type: Boolean

Usage: enable/disable maximize button

Default: false

#### minimizable ####

Type: Boolean

Usage: enable/disable minimize button

Default: false

#### collapsable ####
Type: Boolean

Usage: enable/disable collapse button

Default: false

#### minimizeLocation ####

Type: String

Usage: sets alignment of minimized dialogues

Default: 'left'

Valid: 'left', 'right'

#### dblclick ####

Type: Boolean, String

Usage: set action on double click

Default: false

Valid: false, 'maximize', 'minimize', 'collapse'

#### titlebar ####

Type: Boolean, String

Default: false

Valid: false, 'none', 'transparent'

#### icons ####

Type: Object

Default:

{
"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>

Events
===

#### load ####

Type: load

Example:

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

#### beforeCollapse ####

Type: beforeCollapse

Example:

//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

Example:

//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

Example:

//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

Example:

//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

Example:

//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

Example:

//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

Example:

//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

Example:

//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

Trigger: dialogextendbeforeCollapse, dialogextendcollapse

Example:

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

Usage: Maximize the dialog without clicking the button

Trigger: dialogextendbeforeMaximize, dialogextendmaximize

Example:

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

#### minimize ####

Usage: Minimize the dialog without clicking the button

Trigger: dialogextendbeforeMinimize, dialogextendminimize

Example:

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

#### restore ####

Usage: Restore the dialog from maximized/minimized/collapsed state without clicking the button

Trigger: dialogextendbeforeRestore, dialogextendrestore

Example:

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

#### state ####

Usage: Get current state of dialog

Return: String

Value: 'normal', 'maximized', 'minimized', 'collapsed'

Example:

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.

The buttons are wrapped by title bar of jQuery UI Dialog.

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

Example - Basic Config
===
$(function(){
$("#my-button").click(function(){
$("

")
.dialog({ "title" : "My Dialog" })
.dialogExtend({
"maximizable" : true,
"dblclick" : "maximize",
"icons" : { "maximize" : "ui-icon-arrow-4-diag" }
});
});
});
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",
"titlebar" : "transparent",
"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); }
});
});
});