jQuery & jQuery UI Dialog Enhancement Plugin - dialogextend

dialogextend is a jQuery plugin for extending jQuery UI dialog widget that allows you to create resizable and draggable dialog boxes with some additional features and custom events support.

Main Features:

• Clean, clear and neat.
• 4 control buttons: close, maximize, minimize and collapse.
• 4 icons: close, maximize, minimize and restore.
• 4 double click actions: none, maximize, minimize and collapse.
• 9 custom events.
• Modal dialog with cancel button and overlay effect supported.

Basic Usage:

1. Include jQuery and jQuery UI library files in your web page.

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2. Include jQuery dialogextend plugin after jQuery library.

<script type="text/javascript" src="build/jquery.dialogextend.js"></script>

3. Create a button to trigger a dialog box.

<button class="demo"></button>

4. Create your dialog box in the javascript.

$(function(){
$("#my-button").click(function(){
$("<div>Dialog Content</div>")
.dialog({ "title" : "Your Title" })
.dialogExtend({
"maximizable" : true,
"dblclick" : "maximize",
"icons" : { "maximize" : "ui-icon-arrow-4-diag" }
});
});
});

5. All the settings.

$(function(){
$("#my-button").click(function(){
$("<div>Dialog Content</div>")
.dialog({
"title" : "Title",
"buttons" : { "OK" : function(){ $(this).dialog("close"); } }
})
.dialogExtend({
"closable" : true, // enable/disable close button
"maximizable" : true, // enable/disable maximize button
"minimizable" : true, // enable/disable minimize button
"collapsable" : true, // enable/disable collapse button
"dblclick" : "collapse", // set action on double click. false, 'maximize', 'minimize', 'collapse'
"titlebar" : "transparent", // false, 'none', 'transparent'
"minimizeLocation" : "right", // sets alignment of minimized dialogues
"icons" : { // jQuery UI icon class
  "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); }, // event
"beforeCollapse" : function(evt, dlg){ alert(evt.type); }, // event
"beforeMaximize" : function(evt, dlg){ alert(evt.type); }, // event
"beforeMinimize" : function(evt, dlg){ alert(evt.type); }, // event
"beforeRestore" : function(evt, dlg){ alert(evt.type); }, // event
"collapse" : function(evt, dlg){ alert(evt.type); }, // event
"maximize" : function(evt, dlg){ alert(evt.type); }, // event
"minimize" : function(evt, dlg){ alert(evt.type); }, // event
"restore" : function(evt, dlg){ alert(evt.type); } // event
      });
});
});

Change log:

2014-07-08

• fix bug: iframe reset after minimization
• fix bug: forgot to restore state to normal before minimization
• fix bug: dialog lose focus after restore
• fix bug: invalid dialog position on collapse
• enhancement: added tooltips to title buttons
• update to jquery 1.11.1 and jquery.ui 1.11.0

---

This awesome jQuery plugin is developed by ROMB. For more Advanced Usages, please check the demo page or visit the official website.