8

jQuery UI ダイアログを使用し てビデオを表示しています。ビデオは正常に動作しています。

私がやりたいのは、OS などと同じようにダイアログ要素を最小化することです。(" - ") のような小さなアイコンはダイアログを最小化し、(*) を押すとダイアログは閉じますが、ビデオはバックグラウンドで実行されたままになります。

これが私のコードです

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

4

5 に答える 5

25

最大化、最小化、および復元ボタンを追加できる「DialogExtend」という名前の jQuery UI ダイアログの拡張機能があります。

完璧に動作します。

于 2013-01-25T10:50:52.023 に答える
6

いくつかの方法を試すことができます。

  1. 新しい最小化ボタンを導入して に追加し、ui-dialog-titlebarクリックするとダイアログを に変更してposition: fixed、画面の下部にタイトル バーだけが表示されるように配置します。

  2. かなり似たアプローチ - 元のダイアログ div の高さを 0 に変更します。ダイアログをドラッグ可能にして、ユーザーが移動できるようにします。ただし、おそらくダイアログをビューポートの下部にオフセットする必要があります。このアプローチではui-dialog-titlebarそのまま残ります。ダイアログの幅をオンザフライで変更して、効果を最小化することもできます。

  3. 使用.animateまたはその他のトランジション (または、easyInExpo などのイージング - 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 に答える