如何最小化/最大化jQuery对话框？
我正在使用jQuery UI Dialog来显示video。 video工作正常。
我想要做的是最小化Dialog元素，就像在操作系统或类似的东西。 像（“ – ”）这样的小图标可以最小化我的对话框，当我按（*）它会关闭对话框但保持video在后台运行。
这是我的代码
//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 = $('', { title: translator['Watch Video'] }).dialog({ autoOpen: false, modal: true, width: 600, height: 500 }); var tab = '
'; $('').html(tab).appendTo($dialog); $dialog.dialog('open'); return false; });
var tab等于
jQuery UI对话框有一个扩展名，名为“DialogExtend”，允许您添加最大化，最小化和恢复按钮：
- 代码： https ： //github.com/ROMB/jquery-dialogextend
- 演示： http ： //jsbin.com/ehagoy/154
完美的工作。
您可以尝试几种方法。
-
引入一个新的最小化按钮并将其附加到ui-dialog-titlebar ，然后单击将对话框更改为一个position: fixed并定位它，以便只在屏幕底部显示标题栏。
-
相似的方法 – 将原始对话框div的高度更改为0.允许对话框可拖动，以便用户可以移动它。 但您可能需要将对话框偏移到视口底部。 这种方法使ui-dialog-titlebar完好无损 – 您还可以动态更改对话框的宽度，以实现最小化效果。
-
使用.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/
最小化/最大化的小提琴。
您可以使用jQuery DialogExtend插件。 它提供对话框最大化，最小化和折叠function。
我使用扩展jquery ui对话框的widget工具制作了一个小插件。
我使用jquery小部件工厂来添加新的function
$.widget('fq-ui.extendeddialog', $.ui.dialog, { ... })(jQuery);
在Jquery UI对话框代码中，有一个_createTitlebar方法。 我重写它并添加最大化和最小化按钮
_createTitlebar: function () { this._super(); // Add the new buttons ... },
- jQuery的extendeddialog
- 样本页面
jQuery DialogExtend插件解决了这个问题，但是在使用iframe时它会不断刷新iframe的内容。