如何最小化/最大化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