PHPackages                             wheregroup/jquerydialogextendjs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wheregroup/jquerydialogextendjs

ActiveComponent[Utility & Helpers](/categories/utility)

wheregroup/jquerydialogextendjs
===============================

Maximize and Minimize Buttons for UI Dialog

2.2(5y ago)06.8k12MITHTML

Since Apr 20Pushed 5y ago1 watchersCompare

[ Source](https://github.com/WhereGroup/jquery-dialogextend)[ Packagist](https://packagist.org/packages/wheregroup/jquerydialogextendjs)[ Docs](https://github.com/wheregroup/jquery-dialogextend)[ RSS](/packages/wheregroup-jquerydialogextendjs/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (3)Dependencies (1)Versions (4)Used By (2)

jQueryUI dialog addon that adds collapse / minimize / maximize interactions. Forked from [ROMB/jquery-dialogextend](https://github.com/ROMB/jquery-dialogextend). See [original license](https://github.com/ROMB/jquery-dialogextend/blob/2.0.4/LICENSE.md).

Compatible
==========

[](#compatible)

- jQuery 1.11.1
- jQueryUI 1.11.0

Overview
========

[](#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
====

[](#demo)

- Test Tool :

Tested Browsers
===============

[](#tested-browsers)

- Chrome 35
- Firefox 14
- IE 8

Please support this project
===========================

[](#please-support-this-project)

Donate Bitcoins: 1G8T7Xh2AN5ceduHmHT5TpPFUeddsnQHLQ

Options
=======

[](#options)

#### closable

[](#closable)

Type: *Boolean*

Usage: enable/disable close button

Default: *true*

#### maximizable

[](#maximizable)

Type: *Boolean*

Usage: enable/disable maximize button

Default: *false*

#### minimizable

[](#minimizable)

Type: *Boolean*

Usage: enable/disable minimize button

Default: *false*

#### collapsable

[](#collapsable)

Type: *Boolean*

Usage: enable/disable collapse button

Default: *false*

#### minimizeLocation

[](#minimizelocation)

Type: *String*

Usage: sets alignment of minimized dialogues

Default: *'left'*

Valid: *'left'*, *'right'*

#### dblclick

[](#dblclick)

Type: *Boolean*, *String*

Usage: set action on double click

Default: *false*

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

#### icons

[](#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
======

[](#events)

#### load

[](#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

[](#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

[](#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

[](#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

[](#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

[](#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

[](#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

[](#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

[](#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
=======

[](#methods)

#### collapse

[](#collapse-1)

Usage: Collapse the dialog without double-clicking the title bar

Trigger: *dialogextendbeforeCollapse*, *dialogextendcollapse*

Example:

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

```

#### maximize

[](#maximize-1)

Usage: Maximize the dialog without clicking the button

Trigger: *dialogextendbeforeMaximize*, *dialogextendmaximize*

Example:

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

```

#### minimize

[](#minimize-1)

Usage: Minimize the dialog without clicking the button

Trigger: *dialogextendbeforeMinimize*, *dialogextendminimize*

Example:

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

```

#### restore

[](#restore-1)

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

Trigger: *dialogextendbeforeRestore*, *dialogextendrestore*

Example:

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

```

#### state

[](#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
=======

[](#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*

```

  ...

    maximize
    minimize
    restore
    ...

  ...

```

Example - Basic Config
======================

[](#example---basic-config)

```
$(function(){
  $("#my-button").click(function(){
    $("This is content")
      .dialog({ "title" : "My Dialog" })
      .dialogExtend({
        "maximizable" : true,
        "dblclick" : "maximize",
        "icons" : { "maximize" : "ui-icon-arrow-4-diag" }
      });
  });
});

```

Example - Full Config
=====================

[](#example---full-config)

```
$(function(){
  $("#my-button").click(function(){
    $("This is  content")
      .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); }
      });
  });
});

```

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 54.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~589 days

Total

3

Last Release

2137d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e93698c8e1784f88100eab35a186fab222bcbb5dc805d52f36cb6c459fa4743c?d=identicon)[werrolf](/maintainers/werrolf)

![](https://www.gravatar.com/avatar/0154eb5bdfa738d2bbc95bb345ba5f971d9395a2318f8724e42fa3bd384ae9c2?d=identicon)[LazerTiberius](/maintainers/LazerTiberius)

---

Top Contributors

[![ROMB](https://avatars.githubusercontent.com/u/1905007?v=4)](https://github.com/ROMB "ROMB (62 commits)")[![werrolf](https://avatars.githubusercontent.com/u/24895932?v=4)](https://github.com/werrolf "werrolf (47 commits)")[![eSlider](https://avatars.githubusercontent.com/u/1188335?v=4)](https://github.com/eSlider "eSlider (2 commits)")[![psmak4](https://avatars.githubusercontent.com/u/847301?v=4)](https://github.com/psmak4 "psmak4 (2 commits)")

### Embed Badge

![Health badge](/badges/wheregroup-jquerydialogextendjs/health.svg)

```
[![Health](https://phpackages.com/badges/wheregroup-jquerydialogextendjs/health.svg)](https://phpackages.com/packages/wheregroup-jquerydialogextendjs)
```

###  Alternatives

[fullcalendar/fullcalendar

Full-sized drag & drop event calendar

20.4k373.3k4](/packages/fullcalendar-fullcalendar)[eternicode/bootstrap-datepicker

A datepicker for Bootstrap

12.7k543.8k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker

Date/time picker widget based on twitter bootstrap

7.2k492.4k9](/packages/eonasdan-bootstrap-datetimepicker)[trentrichardson/jquery-timepicker-addon

Adds a timepicker to jQueryUI Datepicker.

2.6k70.2k](/packages/trentrichardson-jquery-timepicker-addon)[grimmlink/bootstrap-filestyle

jQuery customization of input html file for Bootstrap Twitter http://markusslima.github.io/bootstrap-filestyle/

71510.6k](/packages/grimmlink-bootstrap-filestyle)[tempusdominus/bootstrap-4

A date/time picker component designed to work with Bootstrap 4 and Momentjs.

6079.3k](/packages/tempusdominus-bootstrap-4)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)