wheregroup / jquerydialogextendjs
Maximize and Minimize Buttons for UI Dialog
Installs: 6 679
Dependents: 2
Suggesters: 0
Security: 0
Stars: 0
Watchers: 2
Forks: 67
Language:HTML
Type:component
Requires
This package is auto-updated.
Last update: 2024-12-12 05:18:55 UTC
README
jQueryUI dialog addon that adds collapse / minimize / maximize interactions. Forked from ROMB/jquery-dialogextend. See original license.
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
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'
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 <dialogextendload> 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.
<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.
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
<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(){
$("<div>This is content</div>")
.dialog({ "title" : "My Dialog" })
.dialogExtend({
"maximizable" : true,
"dblclick" : "maximize",
"icons" : { "maximize" : "ui-icon-arrow-4-diag" }
});
});
});
Example - Full Config
$(function(){
$("#my-button").click(function(){
$("<div>This is content</div>")
.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); }
});
});
});