8

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

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

这是我的代码

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

4

5 回答 5

25

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

完美运行。

于 2013-01-25T10:50:52.023 回答
6

您可以尝试几种方法。

  1. 引入一个新的最小化按钮并将其附加到ui-dialog-titlebar单击时将对话框更改为 aposition: 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/

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

于 2012-07-19T13:02:39.213 回答
1

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

于 2012-08-11T13:22:58.710 回答
1

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

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

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

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

_createTitlebar: function () {
    this._super();
    // Add the new buttons
    ...        
    },
于 2014-10-21T18:33:08.363 回答
0

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

于 2014-03-03T10:29:20.203 回答