pulsante "riduci a icona" nella finestra modale

pulsante "riduci a icona" nella finestra modale postato il 23/02/2015 00:09:43 nel forum programmazione, open source e hosting

Salve a tutti! Sto provando ad inserire un pulsante per ridurre ad icona la finestra modale presente in gdrcd 5.3.
Il dialog di jquery ha infatti solo un tasto per la chiusura. I tasti per ingrandire o ridurre la finestra mancano. Cercando su internet, ho visto che effettivamente mancano nel codice di jquery ui.

Una mezza soluzione a dirla tutta l'ho trovata: questa piccola aggiunta permette di inserire sia il tasto per ridurre ad icona la finestra modale che quello per ingrandirla a pagina intera https://github.com/fieryprophet/jQuery-UI-Dialog-MinMax ↗
Però non la trovo come una soluzione ottimale, il codice forse crea qualche piccolo contrasto perché ho notato che a tratti la finestra modale si blocca e bisogna aprirla e richiuderla. Per farlo funzionare ho dovuto anche aggiustare i link all'interno del file .js (c'era un # di troppo).

Ma c'è un modo per aggiungere ad un dialog i tasti (o almeno quello per ridurre la finestra modale ad icona, che è l'unico che m'interessa) direttamente nello script che si trova in footer.inc.php?

23/02/2015 22:35:06

Pulsanti aggiuntivi possono essere aggiunti nativamente alla finestra modale di jquery UI però in una barra sotto la finestra.

Se e i tasti ti vanno bene anche sotto il codice per aggiungere due tasti per minimizzare e aprire di nuovo la finestra modale è questo:

$('#dialog-'+name).dialog(
"option",
"buttons",
{
"hide": function() {
$('#dialog-'+name).dialog(
{
width: 200,
}
);
$(this).hide();
},

"show": function() {
$(this).show();
$('#dialog-'+name).dialog(
{
width: width,
height: height,

}
);
},
}
);

e va aggiunto proprio sotto questo codice nel footer:

// Ok, adesso siamo pronti per lanciare la modale!
$('#dialog-'+name).dialog(
{
width: width,
height: height,

}
);

qui ci sono due screen della modale aperta e minimizzata.

Modale aperta http://dyrr.altervista.org/modal_01.jpg ↗
Modale miniizzata http://dyrr.altervista.org/modal_02.jpg ↗

Volendo controllando lo stato di della finestra è possibile anche visualizzare un unico pulsante che cambia il nome e funzione in base allo stato di minimizzato o meno della finestra, se la soluzione piace magari ci lavoro un po'.

23/02/2015 22:35:32

Lasciando perdere il tasto per ingrandire, ma a che ti serve il tasto per ridurre a icona una finestra modale? Le finestre modali si chiamo in questo modo da "fermare" quello che si stava facendo per richiedere l'inserimento di qualche dato da parte dell'utente.

Spiega magari meglio il tuo problema fin dall'inizio.

23/02/2015 22:53:30

Per finestra modale intendeva un popup creato con il widget dialog di jQuery UI per simulare un popup;

Il ridurla ad icona probabilmente gli serve per minimizzarla e riaprirla (vedi esempio scheda) senza ricaricare 8per economia di risorse) di nuovo la scheda visto che attualmente come è implementata nel gdrcd, quando la chiudi e la riapri, ricarica completamente il contenuto del dialog.

girando un po' in internet ho trovato questa estensione del dialog, che dalla demo mi sembra fatta funzionare bene ed essere steticamente megliod ella mia soluzione

https://github.com/ROMB/jquery-dialogextend ↗

23/02/2015 23:50:48

Grazie per le risposte e per le dritte. Dyrr hai centrato in pieno quello che mi serviva, e complimenti per la tua soluzione.
Il plugin che hai postato è perfetto, ma non capisco bene come integrarlo (il javascript non è il mio forte). Ci smanetterò su.

Tuttoweb, in pratica l'utilità tecnica della riduzione del dialog l'ha già spiegata Dyrr, ma c'è anche un'utilità pratica: a volte mentre si gioca è comodo e pratico tenere aperta sottomano una finestra con della documentazione o con una scheda. Con una scheda modale che puoi ridurre e spostare è più pratico, perché così nella stessa scheda puoi fare più cose (per fare qualche esempio puoi azionare e copiare pezzi di un messaggio o di una documentazione, oppure leggere schede e inviare messaggi tenendo sempre sott'occhio la chat, e tutto questo evitando di aprire altre pagine al posto della chat o senza dover aprire altre schede).

24/02/2015 00:28:49

Ho risolto con il plugin suggerito da Dyrr. Ed è stato incredibilmente facile!

Scrivo la soluzione per chi fosse interessato:
1. Scaricare jquery-dialogextend https://github.com/ROMB/jquery-dialogextend ↗
2. Inserirlo in includes e richiamarlo nel file header.inc.php
3. Aggiungere un po' di codice nello script del footer dopo il classico .dialog() (nel mio caso specifico, visto che volevo solo il tasto per rimpicciolire ho aggiunto .dialogExtend({"minimizable" : true}) e basta).

Il mio footer è diventato così (la parte sottolineata in grassetto è l'aggiunta):

<script type="text/javascript">

function modalWindow(name, title, url, width, height) {
// per width ed height imposto dei valori di default così non occorre specificarli in ogni occasione
width = typeof width === 'undefined'? 800 : width;
height = typeof height === 'undefined'? 600 : height;

// verifichiamo se nel body non esiste il sorgente per la dialog
if ($('#dialog-'+name).length == 0) {

// in questo caso lo creiamo:
$('body').append('<div id="dialog-'+name+'" title="'+title+'" style="padding:0;"><iframe src="'+ url +'" frameborder="no" style="position:absolute;width:100%;height:100%;" scrolling="yes"></div>');

} else {

// se il sorgente invece esiste già assegnamo la nuova url all'iframe:
$('#dialog-'+name).attr('title', title);
$('#dialog-'+name+' iframe').attr('src', url);
}

// Ok, adesso siamo pronti per lanciare la modale!
$('#dialog-'+name).dialog({width: width, height: height}).dialogExtend({"minimizable" : true});
}

</script>

Grazie mille, Dyrr

04/03/2015 16:29:35

Si, c'è un modo: bisogna implementare il codice presente sul 5.3 nel 5.2 (questa discussione ti sarà utile: https://www.gdr-online.com/readforum.asp?id=190562&pag=3 ↗).

In pratica dovresti prendere i files "corefunction.js" "popupchoise.js" "tooltip.js" dalla cartella "includes" del 5.3 e sostituirli a quelli del 5.2, aggiungere lo script nel file "footer.inc.php" (aggiungendo la piccola modifica che ho spiegato in questa discussione per poter ridurre o ingrandire la finestra), richiamare jquery e jquery.ui nel file "header.inc.php", creare il file "popup.php", richiamarlo con un link da dove vuoi richiamarlo.

C'è una cosa che però ho verificato di persona: i file .js da sostituire eliminano l'incompatibilità con jquery. Per questo se hai usato già jquery ed avevi utilizzato il no conflict per annullare l'incompatibilità, puoi trovare qualche problemino (funzionavano gli script con no conflict ma non funzionava l'apertura della finestra modale).