Come minimizzare/ingrandire la finestra di dialogo jQuery?

Question

Sto usando jQuery UI Dialog per mostrare un video. Il video sta funzionando bene.

Quello che voglio fare è minimizzare l'elemento Dialog come in un SO o qualcosa del genere. Una piccola icona come ("-") che ridurrebbe al minimo la mia finestra di dialogo e quando premo (*) chiuderà la finestra di dialogo ma manterrà il video in esecuzione in background.

Ecco il mio codice

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

}); 

cui scheda var è uguale 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

V'è un'estensione per il dialogo jQuery UI, denominato "DialogExtend" che permette di aggiungere una massimizzare, minimizzare e ripristinare i pulsanti:

• Codice: https://github.com/ROMB/jquery-dialogextend
• Demo: http://jsbin.com/ehagoy/154

Funziona perfettamente.

Answer 2

Ci sono un paio di approcci che si potrebbe provare.

1. introdurre un nuovo pulsante di minimizzare e aggiungerlo alla ui-dialog-titlebar e sul cambiamento click finestra di dialogo per un position: fixed e posizionarlo in modo che solo la barra del titolo è visibile nella parte inferiore dello schermo.

2. Approccio abbastanza simile: modifica l'altezza del div della finestra di dialogo originale su 0. Consentire al trascinamento della finestra di dialogo, in modo che l'utente possa spostarlo. ma probabilmente dovresti spostare la finestra di dialogo in fondo alla finestra. Questo approccio lascia intatto lo ui-dialog-titlebar - è anche possibile modificare la larghezza della finestra di dialogo al volo, per minimizzare l'effetto.

3. Usa .animate o altre transizioni (o allentamento, come easeInExpo - http://ralphwhitbeck.com/demos/jqueryui/effects/easing/)

ma l'approccio più semplice che utilizza alcuni dei metodi di cui sopra è:

Quello che vi serve per l'effetto è cambiare è:

• larghezza della finestra
• altezza la finestra
• posizione superiore
• posizione sinistra

come questo:

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

Quello che fa è impostare l'altezza della finestra di dialogo per 0, e lo posiziona sul fondo della finestra . Al massimo, ricalcola la posizione centrale, dà un'altezza al dialogo e lo riattiva alla vista.

vedi esempio: http://jsfiddle.net/jasonday/ZSk6L/

violino Aggiornato con minimizzare/massimizzare.

Answer 3

È possibile utilizzare il plug-in jQuery DialogExtend. Offre finestre di dialogo per ingrandire, ridurre a icona e ridurre le funzionalità.

Answer 4

jQuery Il plug-in DialogExtend risolve il problema anche se quando si utilizza un iframe continua ad aggiornare il contenuto dell'iframe.

Answer 5

Ho creato un piccolo plug-in con la fabbrica di widget che estende la finestra di dialogo ui jquery.

Io uso il widget di jQuery fabbrica per aggiungere nuovi functionnalities

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

Nel codice di dialogo jQuery UI, c'è un metodo _createTitlebar. sovrascrivo e aggiungere un pulsante di ingrandire e ridurre

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

• jquery-extendeddialog
• sample page