Cómo minimizar/maximizar el diálogo de jQuery?

Question

Estoy usando jQuery UI Dialog para mostrar un video. El video está funcionando bien.

Lo que quiero hacer es minimizar el elemento de diálogo como en un sistema operativo o algo así. Un ícono pequeño como ("-") que minimizaría mi diálogo y cuando presiono (*) cerraría el diálogo pero mantendría el video funcionando en segundo plano.

Aquí está mi código

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

}); 

donde pestaña var es igual a

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

Answer 1

Hay una extensión de diálogo jQuery UI, llamada "DialogExtend" que le permite añadir un maximizar, minimizar y restaurar botones:

• Código: https://github.com/ROMB/jquery-dialogextend
• Demostración: http://jsbin.com/ehagoy/154

Funciona a la perfección.

Answer 2

Hay un par de enfoques que usted podría intentar.

1. introducir un nuevo botón de minimizar y añadirlo al ui-dialog-titlebar y sobre el cambio Haga clic en el cuadro de diálogo para un position: fixed y colocarlo de manera única la barra de título es visible en la parte inferior de la pantalla.

2. Método bastante similar: cambie la altura del diálogo div original a 0. Permita que el diálogo se pueda arrastrar, para que el usuario pueda moverlo. pero probablemente necesites desplazar el diálogo a la parte inferior de la ventana gráfica. Este enfoque deja intacto el ui-dialog-titlebar; también puede cambiar el ancho del diálogo sobre la marcha, para minimizar el efecto.

3. Uso .animate u otras transiciones (o aliviar, como easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/)

Sin embargo, el método más sencillo que utiliza algunos de los métodos anteriores es:

Lo que se necesita para el efecto es cambiar es:

• ancho de la ventana
• altura de la ventana
• la primera posición
• posición izquierda

así:

$('#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); 
}); 

Lo que esto hace que ajusta la altura del diálogo para 0, y lo posiciona en la parte inferior de la ventana . Al máximo, vuelve a calcular la posición central, le da al cuadro de diálogo un alto y lo vuelve a visualizar.

Ver ejemplo: http://jsfiddle.net/jasonday/ZSk6L/

violín Actualizado con minimizar/maximizar.

Answer 3

Puede usar el complemento jQuery DialogExtend. Ofrece funciones de maximizar, minimizar y contraer el diálogo.

Answer 4

jQuery El plugin DialogExtend resuelve el problema, aunque cuando se utiliza un iframe, se mantiene actualizando el contenido del iframe.

Answer 5

He hecho un pequeño complemento con la fábrica de widgets que amplía el diálogo jquery ui.

utilizo la fábrica widget de jQuery para añadir nuevas funcionalidades

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

En el código de diálogo jQuery UI, hay un método _createTitlebar. puedo reemplazar y añadir un botón de maximizar y minimizar

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

• jquery-extendeddialog
• sample page