如何最小化/最大化 jQuery 对话框? [英] How to Minimize/Maximize jQuery Dialog?

查看:28
本文介绍了如何最小化/最大化 jQuery 对话框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 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 等于

<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="你的文件名.mpeg"自动启动=假"对齐=中间"宽度=500"高度=300"defaultframe="rightFrame"showstatusbar="true"></嵌入>

解决方案

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆