如何最小化/最大化 jQuery 对话框? [英] How to Minimize/Maximize jQuery Dialog?
问题描述
我正在使用 jQuery UI 对话框来显示视频.视频运行良好.
我想做的是最小化 Dialog 元素,就像在操作系统或类似的东西中一样.一个像 (" - ") 这样的小图标可以最小化我的对话框,当我按下 (*) 时它会关闭对话框但让视频在后台运行.
这是我的代码
//观看视频$(".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 = $('', {标题:翻译['观看视频']}).对话({自动打开:假,模态:真,宽度:600,高度: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="加载 Microsoft® Windows® 媒体播放器组件..." type="application/x-oleobject" align="middle"><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('打开');返回假;});其中 var tab 等于
解决方案 jQuery UI 对话框有一个扩展,名为DialogExtend",允许您添加最大化、最小化和恢复按钮:
完美运行.
I am using jQuery UI Dialog to show a video. The video is working fine.
What I want to do is minimize the Dialog-element just like in an OS or something like that. A small icon like (" - ") that would minimize my dialog and when I press (*) it would close the dialog but keep the video running in the background.
Here's my code
//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;
});
where var tab is equal to
<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>
解决方案 There is an extension for jQuery UI dialog, named "DialogExtend" that allows you to add a maximize, minimize and restore buttons:
Works perfectly.
这篇关于如何最小化/最大化 jQuery 对话框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文