web-dev-qa-db-ja.com

jQueryダイアログを最小化/最大化する方法は？

jQuery UI Dialog を使用してビデオを表示しています。ビデオは正常に機能しています。

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

これが私のコードです

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

});

ここで、vartabは

<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>
javascriptjqueryjquery-uivideo-streamingjquery-dialog
7
Fawad Ghafoor

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

完璧に動作します。

23
Diana

試すことができるアプローチがいくつかあります。

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

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

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

最小化/最大化でフィドルを更新しました。

6
Jason

JQueryDialogExtendプラグインを使用できます。ダイアログの最大化、最小化、および折りたたみ機能を提供します。

1
crab

Jqueryuiダイアログを拡張するウィジェットファクトリを使用して小さなプラグインを作成しました。

Jqueryウィジェットファクトリを使用して新しい機能を追加します

$.widget('fq-ui.extendeddialog', $.ui.dialog, {
...
})(jQuery);

Jquery UIダイアログコードには、_createTitlebarメソッドがあります。私はそれを上書きし、最大化と最小化のボタンを追加します

_createTitlebar: function () {
    this._super();
    // Add the new buttons
    ...        
    },
1
Thomas

jQuery DialogExtendプラグインは問題を解決しますが、iframeを使用すると、iframeのコンテンツが更新され続けます。

0
franksitawa