jQuery & jQuery UI Dialog Enhancement Plugin - dialogextend

File Size: 24.5 KB
Views Total: 15761
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.