Jquery-ui Extended dialog

Provides minimze and maximize options for jquery ui dialog widget by entending it.

Downloads

• [For Jquery Ui v1.10.0 +] (https://github.com/CrazyTuna/jquery-extendeddialog/releases/tag/v1.1.0)
• [For Jquery Ui v1.9.0 +] (https://github.com/CrazyTuna/jquery-extendeddialog/releases/tag/v1.0.0)

Samples

• [For Jquery Ui v1.10.0 +] (http://crazytuna.github.io/jquery-extendeddialog/)
• [For Jquery Ui v1.9.0 +] (http://crazytuna.github.io/jquery-extendeddialog/indexv1.html)

API Documentation

Options	Methods	Events
maximizable	maximize	beforeMaximize
maximizeIcon	minimize	beforeMinimize
maximizeText	restore	beforeRestore
minimizable		maximize
minimizeIcon		minimize
minimizeText		restore
resizeOnDlbclick
restoreIcon
restoreText

Options

maximizable

• Type: boolean
• Default: true

If set to "true", the dialog will be maximizable by the tittle bar maximize button.

Code examples: Initialize the dialog with the maximizable option specified:

$( ".selector" ).dialog({ maximizable: true });

Get or set the maximizable option, after initialization:

// getter
var maximizable = $( ".selector" ).dialog( "option", "maximizable" );
 
// setter
$( ".selector" ).dialog( "option", "maximizable", false );

maximizeIcon

• Type: string
• Default: ui-icon-extlink

Specifies the icon for the maximize button. Note that the default icon is part of the Jquery UI Framework icons.

Code examples: Initialize the dialog with the maximizeIcon option specified:

$( ".selector" ).dialog({ maximizeIcon: 'ui-icon-extlink' });

Get or set the maximizeIcon option, after initialization:

// getter
var maximizeIcon = $( ".selector" ).dialog( "option", "maximizeIcon" );
 
// setter
$( ".selector" ).dialog( "option", "maximizeIcon", 'ui-icon-extlink' );

maximizeText

• Type: string
• Default: maximize

Specifies the text for the maximize button. Note that the maximize text is visibly hidden when using a standard theme.

Code examples: Initialize the dialog with the maximizeText option specified:

$( ".selector" ).dialog({ maximizeText: 'maximize' });

Get or set the maximizeText option, after initialization:

// getter
var maximizeText = $( ".selector" ).dialog( "option", "maximizeText" );
 
// setter
$( ".selector" ).dialog( "option", "maximizeText", 'maximize' );

minimizable

• Type: boolean
• Default: true

If set to "true", the dialog will be minimizable by the tittle bar minimize button.

Code examples: Initialize the dialog with the minimizable option specified:

$( ".selector" ).dialog({ minimizable: true });

Get or set the minimizable option, after initialization:

// getter
var minimizable = $( ".selector" ).dialog( "option", "minimizable" );
 
// setter
$( ".selector" ).dialog( "option", "minimizable", false );

minimizeIcon

• Type: string
• Default: ui-icon-minus

Specifies the icon for the minimize button. Note that the default icon is part of the Jquery UI Framework icons.

Code examples: Initialize the dialog with the minimizeIcon option specified:

$( ".selector" ).dialog({ minimizeIcon: 'ui-icon-minus' });

Get or set the minimizeIcon option, after initialization:

// getter
var minimizeIcon = $( ".selector" ).dialog( "option", "minimizeIcon" );
 
// setter
$( ".selector" ).dialog( "option", "minimizeIcon", 'ui-icon-minus' );

minimizeText

• Type: string
• Default: minimize

Specifies the text for the minimize button. Note that the minimize text is visibly hidden when using a standard theme.

Code examples: Initialize the dialog with the minimizeText option specified:

$( ".selector" ).dialog({ minimizeText: 'minimize' });

Get or set the minimizeText option, after initialization:

// getter
var minimizeText = $( ".selector" ).dialog( "option", "minimizeText" );
 
// setter
$( ".selector" ).dialog( "option", "minimizeText", 'minimize' );

resizeOnDlbclick

• Type: boolean
• Default: true

If set to "true", the dialog will be resized by a tittle bar double click.

Code examples: Initialize the dialog with the resizeOnDlbclick option specified:

$( ".selector" ).dialog({ resizeOnDlbclick: true });

Get or set the resizeOnDlbclick option, after initialization:

// getter
var resizeOnDlbclick = $( ".selector" ).dialog( "option", "resizeOnDlbclick" );
 
// setter
$( ".selector" ).dialog( "option", "resizeOnDlbclick", false );

restoreIcon

• Type: string
• Default: ui-icon-newwin

Specifies the icon for the restore button. Note that the default icon is part of the Jquery UI Framework icons.

Code examples: Initialize the dialog with the restoreIcon option specified:

$( ".selector" ).dialog({ restoreIcon: 'ui-icon-newwin' });

Get or set the restoreIcon option, after initialization:

// getter
var restoreIcon = $( ".selector" ).dialog( "option", "restoreIcon" );
 
// setter
$( ".selector" ).dialog( "option", "restoreIcon", 'ui-icon-newwin' );

restoreText

• Type: string
• Default: restore

Specifies the text for the restore button. Note that the restore text is visibly hidden when using a standard theme.

Code examples: Initialize the dialog with the restoreText option specified:

$( ".selector" ).dialog({ restoreText: 'restore' });

Get or set the restoreText option, after initialization:

// getter
var restoreText = $( ".selector" ).dialog( "option", "restoreText" );
 
// setter
$( ".selector" ).dialog( "option", "restoreText", 'restore' );

Methods

maximize()

• Returns: jQuery (plugin only)

Maximizes the dialog

• This method does not accept any arguments.

Code examples: Invoke the maximize method:

$( ".selector" ).dialog('maximize');

minimize()

• Returns: jQuery (plugin only)

Minimizes the dialog

• This method does not accept any arguments.

Code examples: Invoke the minimize method:

$( ".selector" ).dialog('minimize');

restore()

• Returns: jQuery (plugin only)

Restores the dialog

• This method does not accept any arguments.

Code examples: Invoke the restore method:

$( ".selector" ).dialog('restore');

Events

beforeMaximize(event, ui)

• Type: extendeddialogbeforemaximize

Triggered when a dialog is about to maximize. If canceled, the dialog will not maximize.

• event:
• Type: event
• ui:
• Type: Object

Code examples: Initialize the dialog with the beforeMaximize callback specified:

$( ".selector" ).dialog({
  beforeMaximize: function( event, ui ) {}
});

Bind an event listener to the extendeddialogbeforemaximize event:

$( ".selector" ).on( "extendeddialogbeforemaximize", function( event, ui ) {} );

beforeMinimize(event, ui)

• Type: extendeddialogbeforeminimize

Triggered when a dialog is about to minimize. If canceled, the dialog will not minimize.

• event:
• Type: event
• ui:
• Type: Object

Code examples: Initialize the dialog with the beforeMinimize callback specified:

$( ".selector" ).dialog({
  beforeMinimize: function( event, ui ) {}
});

Bind an event listener to the extendeddialogbeforeminimize event:

$( ".selector" ).on( "extendeddialogbeforeminimize", function( event, ui ) {} );

beforeRestore(event, ui)

• Type: extendeddialogbeforerestore

Triggered when a dialog is about to restore. If canceled, the dialog will not restore.

• event:
• Type: event
• ui:
• Type: Object

Code examples: Initialize the dialog with the beforeRestore callback specified:

$( ".selector" ).dialog({
  beforeRestore: function( event, ui ) {}
});

Bind an event listener to the extendeddialogbeforerestore event:

$( ".selector" ).on( "extendeddialogbeforerestore", function( event, ui ) {} );

maximize(event, ui)

• Type: extendeddialogmaximize

Triggered when the dialog is maximized.

• event:
• Type: event
• ui:
• Type: Object

Note: The ui object is empty but included for consistency with other events.

Code examples: Initialize the dialog with the maximize callback specified:

$( ".selector" ).dialog({
  maximize: function( event, ui ) {}
});

Bind an event listener to the extendeddialogmaximize event:

$( ".selector" ).on( "extendeddialogmaximize", function( event, ui ) {} );

minimize(event, ui)

• Type: extendeddialogminimize

Triggered when the dialog is minimized.

• event:
• Type: event
• ui:
• Type: Object

Note: The ui object is empty but included for consistency with other events.

Code examples: Initialize the dialog with the minimize callback specified:

$( ".selector" ).dialog({
  minimize: function( event, ui ) {}
});

Bind an event listener to the extendeddialogminimize event:

$( ".selector" ).on( "extendeddialogminimize", function( event, ui ) {} );

restore(event, ui)

• Type: extendeddialogrestore

Triggered when the dialog is restored.

• event:
• Type: event
• ui:
• Type: Object

Note: The ui object is empty but included for consistency with other events.

Code examples: Initialize the dialog with the restore callback specified:

$( ".selector" ).dialog({
  restore: function( event, ui ) {}
});

Bind an event listener to the extendeddialogrestore event:

$( ".selector" ).on( "extendeddialogrestore", function( event, ui ) {} );