$(foo).dialogExtended()

Расширяет функционал виджета dialog добавляя в него возможность минимизации и востановления содержимого виджета посредством сокрытия.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">
<button id="start">open</button>
<button id="toggle">toggle</button>

CSS

.ui-dialog .ui-dialog-titlebar-expand { position: absolute; right: 1.7em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-expand span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-expand:hover, .ui-dialog .ui-dialog-titlebar-expand:focus { padding: 0; }

JavaScript

function showDialog(){
    if($('#test').length){
        $('#test').parent().effect('bounce', { times:5 }, 100);
        return false;
    }
    $('body').append('<div id="test" ="test">Content</div>');
    $('body').append('<input tyepe="text">');
    $('#test').dialogExtended({
        collapsible: true,
        collapseBtn: true,
        collapse:function(e,ui){
            //console.log(e);
            //console.log(ui.origHeight);
        },
        expand:function(e,ui){
            //console.log(e);
            //console.log(ui.origHeight);
        },
        beforeClose:function(){$(this).remove();}
    });
}
function toggleDialog(){
    if($('#test').length){
        if($('#test').dialogExtended('isCollapsed')){
            $('#test').dialogExtended('expand');
        }else{
            $('#test').dialogExtended('collapse');
        }
    }
}

$(function(){

//Добавление функционала к виджету $.dialog
// делаем ссылку на прототип базового виджета, чтобы использовать его методы
var dialogBase = $.ui.dialog.prototype;
// создаём свой виджет на основе уже существующего
$.widget('xn.dialogExtended', $.ui.dialog, {
    // расширяем опции
    options: {
        collapsible: false,
        collapseBtn: false,
        collapseBtnCls: {collapse:'ui-icon-minusthick',expand:'ui-icon-plusthick'},
        collapseText: 'maximize',
        expandText: 'minimize'
    },
    // перегружаем метод создания виджета
    _create: function() {
        var self = this;
        // вызываем метод создания от базового виджета
        dialogBase._create.call(self);
        // добавляем свой обработчик клика по заголовку
        self._collapsed = false;
        self._allowResize = self.options.resizable;
        if (self.options.collapsible) {
            self.element.parent().find('> .ui-dialog-titlebar > .ui-dialog-title')
            .css('cursor', 'pointer').attr('title',self.options.expandText)
            .click(function() {
                self[self._collapsed ? 'expand' :...