Javascript 如何最小化/最大化 jQuery 对话框？

How to Minimize/Maximize jQuery Dialog?

提问by Fawad Ghafoor

I am using jQuery UI Dialogto show a video. The video is working fine.

我正在使用jQuery UI Dialog来显示视频。视频工作正常。

What I want to do is minimize the Dialog-element just like in an OS or something like that. A small icon like (" - ") that would minimize my dialog and when I press (*) it would close the dialog but keep the video running in the background.

我想要做的是最小化 Dialog 元素，就像在操作系统或类似的东西中一样。像 (" - ") 这样的小图标可以最小化我的对话框，当我按下 (*) 时，它会关闭对话框但让视频在后台运行。

Here's my code

这是我的代码

//Watch Video

$(".watchVideo").live('click',function(){
    if($('div.ui-dialog').length){
        $('div.ui-dialog').remove();
    }

    var path  = $(this).attr('rel');
    var title = $(this).attr('title');

    var $dialog = $('<div>', {
        title: translator['Watch Video']
    }).dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 500
    });

    var tab = '<table  style="margin: 10px 10%;"><tr><td><object id="MediaPlayer1" width="500" height="400" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft? Windows? Media Player components..." type="application/x-oleobject" align="middle"><param name="'+title+'" value="'+path+'"> <param name="ShowStatusBar" value="True">  <param name="DefaultFrame" value="mainFrame"> <param name="autostart" value="false">  <embed type="application/x-mplayer2"  pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"  src="'+path+'"   autostart="false"  align="middle" width="500"    height="300"   defaultframe="rightFrame"  showstatusbar="true"> </embed></object></td></tr></table>';

    $('<div id="updateContent">').html(tab).appendTo($dialog);
    $dialog.dialog('open');
    return false;

});

where var tab is equal to

其中 var tab 等于

<object id="MediaPlayer1" width="500" height="400"
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft? Windows? Media Player components..."
type="application/x-oleobject" align="middle">
    <param name="FileName" value="YourFilesName.mpeg">
    <param name="ShowStatusBar" value="True">
    <param name="DefaultFrame" value="mainFrame">
    <param name="autostart" value="false">
    <embed type="application/x-mplayer2"
     pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
     src="YourFilesName.mpeg"
     autostart="false"
     align="middle"
     width="500"
    height="300"
    defaultframe="rightFrame"
    showstatusbar="true">
 </embed>

回答by Diana

There is an extension for jQuery UI dialog, named "DialogExtend" that allows you to add a maximize, minimize and restore buttons:

jQuery UI 对话框有一个扩展名为“DialogExtend”，它允许您添加最大化、最小化和恢复按钮：

• Code: https://github.com/ROMB/jquery-dialogextend
• Demo: http://jsbin.com/ehagoy/154

• 代码：https: //github.com/ROMB/jquery-dialogextend
• 演示：http: //jsbin.com/ehagoy/154

Works perfectly.

完美运行。

回答by Jason

There are a couple of approaches that you could try.

您可以尝试几种方法。

1. Introduce a new minimize button and append it to the ui-dialog-titlebarand on click change the dialog to a position: fixedand position it so only the title bar is visible on the bottom of the screen.

2. Fairly similar approach - change your original dialog div's height to 0. Allow the dialog to be draggable, so a user can move it around. but you would probably need to offset the dialog to the bottom of the viewport. This approach leaves the ui-dialog-titlebarintact - you could also change the width of the dialog on the fly, to make the minimize effect.

3. Use .animateor other transitions (or easing, such as easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/)

1. 引入一个新的最小化按钮并将其附加到ui-dialog-titlebar，单击时将对话框更改为 aposition: fixed并将其定位，以便在屏幕底部只能看到标题栏。

2. 相当相似的方法 - 将原始对话框 div 的高度更改为 0。允许对话框可拖动，以便用户可以移动它。但您可能需要将对话框偏移到视口的底部。这种方法ui-dialog-titlebar保持不变 - 您还可以动态更改对话框的宽度，以实现最小化效果。

3. 使用.animate或其他过渡（或缓动，例如easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/）

But the easiest approach that uses some of the methods above is:

但使用上述某些方法的最简单方法是：

What you need for the effect is to change is:

你需要改变的效果是：

• width of the window
• height of the window
• top position
• left position

• 窗口的宽度
• 窗户的高度
• 最高位置
• 左侧位置

like this:

像这样：

    $('#window').dialog({
    draggable: false,
    height: 200,
    buttons: [
    {
        text: "minimize",
        click: function() {
            $(this).parents('.ui-dialog').animate({
                height: '40px',
                top: $(window).height() - 40
            }, 200);            
        }
    }]


});

$('#open').click(function() {
   $('#window').parents('.ui-dialog').animate({
       //set the positioning to center the dialog - 200 is equal to height of dialog
       top: ($(window).height()-200)/2,
       //set the height again
       height: 200
            }, 200); 
});

What this does it set the height of the dialog to 0, and positions it at the bottom of the viewport. On maximise, it recalculates the center position, gives the dialog a height, and animates it back into view.

它的作用是将对话框的高度设置为0，并将其定位在视口的底部。在最大化时，它会重新计算中心位置，为对话框提供高度，并将其动画化回视图。

See example: http://jsfiddle.net/jasonday/ZSk6L/

参见示例：http: //jsfiddle.net/jasonday/ZSk6L/

Updated fiddle with minimize/maximize.

更新了最小化/最大化的小提琴。

回答by crab

You could use the jQuery DialogExtend plugin. It offer dialog maximize, minimize, and collapse features.

您可以使用 jQuery DialogExtend 插件。它提供对话框最大化、最小化和折叠功能。

回答by Thomas

I made a little plugin with the widget factory that extends the jquery ui dialog.

我用扩展 jquery ui 对话框的小部件工厂制作了一个小插件。

I use the jquery widget factory to add new functionnalities

我使用 jquery 小部件工厂添加新功能

$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);

In the Jquery UI dialog code, there is a _createTitlebar method. I override it and add a maximize and minimize button

在 Jquery UI 对话框代码中，有一个 _createTitlebar 方法。我覆盖它并添加一个最大化和最小化按钮

_createTitlebar: function () {
    this._super();
    // Add the new buttons
    ...        
    },

• jquery-extendeddialog
• sample page

• jquery-扩展对话框
• 示例页面

回答by franksitawa

jQuery DialogExtend plugin solves the problem though when using an iframe it keeps refreshing the iframe's content.

jQuery DialogExtend 插件解决了这个问题，但在使用 iframe 时它会不断刷新 iframe 的内容。