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

Question

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

我想要做的就是尽量减少对话框元素就像在操作系统或类似的东西。像（“ - ”）这样的小图标可以最大限度地减少我的对话框，并且当按（*）时会关闭对话框，但保持视频在后台运行。

这里是我的代码

//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; 

}); 

其中var标签等于

<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> 

Answer 1

有扩展的jQuery UI的对话框，名为 “DialogExtend”，允许你添加一个最大化，最小化和还原按钮：

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

完美地工作。

Answer 2

有一对夫妇，你可以尝试的方法。

1. 引入一个新的最小化按钮，并追加到ui-dialog-titlebar并单击更改对话框将position: fixed和定位，以便只有标题栏是在屏幕的底部可见。

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

3. 使用.animate或其他转换（或缓解，如easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/）

但是，使用了一些上面的方法是最简单的方法：

你需要的效果是什么是改变是：窗口

高度的

• 宽度窗口
• 顶部位置
• 左侧位置

这样的：

$('#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); 
}); 

这里做的事情它设置对话框的高度0，并在视口的底部位置它。在最大化之后，它会重新计算中心位置，给对话框一个高度，并将其重新设置为视图。

见例如：http://jsfiddle.net/jasonday/ZSk6L/

更新拨弄最小化/最大化。

Answer 3

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

Answer 4

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

Answer 5

我做了一个插件，它扩展了jQuery UI对话框。

我使用了jQuery插件工厂增加新functionnalities

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

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

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

• jquery-extendeddialog
• sample page