如何最小化/最大化jQuery对话框
How to Minimize/Maximize jQuery Dialog?
我正在使用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选项卡等于
<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>
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 ui对话框。
我使用jquery窗口小部件工厂添加新的功能
$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);
在Jquery UI对话框代码中,有一个_createTitlebar方法。我覆盖它并添加一个最大化和最小化按钮
_createTitlebar: function () {
this._super();
// Add the new buttons
...
},
- jquery扩展对话框
- 示例页
您可以使用jQuery DialogExtend插件。它提供对话框最大化、最小化和折叠功能。
- 使用jquery对话框中的箭头键
- 获取打开jquery对话框的button的id
- 我怎么能让jQuery对话框表现得像Javascript警报
- 无法在其他调用上设置jQuery对话框选项
- 如何在jQuery对话框标题栏中添加额外的按钮
- 从jquery对话框恢复原始数据,脚本不起作用
- Jquery对话框('打开')不工作
- 通过Rails中的自定义Jquery对话框处理链接的确认
- 阻止Jquery对话框内容的CSS应用于主窗口
- jquery对话框内容仅针对第一个请求进行对齐
- 在鼠标悬停时保持 JQuery 对话框打开
- 带有 iframe 的 jquery 对话框
- 单击函数生成的 jQuery 对话框中的元素
- 在jquery对话框中加载html页面
- JQuery对话框中的Bootstrap Pills
- JQUERY对话框未捕获错误:初始化之前无法调用对话框上的方法
- Jquery对话框的大小调整只发生在它的第一次's已打开
- 打开对话框后,JQuery对话框的条件调整大小为内容高度
- jquery对话框会记住以前的输入
- Jquery.对话框未从表中的图像输入打开