[GDRCD 5.1] jQuery UI, dialog e drag

[GDRCD 5.1] jQuery UI, dialog e drag postato il 30/01/2013 23:14:31 nel forum programmazione, open source e hosting

Buona sera a tutti! Vengo subito al dunque: sto lavorando da un po' di tempo sul GDRCD5.1 e grazie alla mia caparbietà sono riuscito ad imparare qualcosina di php, e da qualche giorno sto sbattendo la testa sulla questione finestre modali.
Sono riuscito ad aprirne una tramite la funzione dialog(), solo che la barra in alto stona con la grafica che ho montato attualmente. Creare un pulsante per la chiusura della finestra modale da inserire all'interno della finestra stessa non è stato un problema, tuttavia non so come sostituire la parte della barra per permettere lo spostamento della finestra. Finora sono riuscito solo a far spostare il div del contenuto, ma il div "padre" generato dalla funzione dialog(), che contiene sia il div della barra che il div del contenuto, rimane fisso. Come posso creare ovviare a questo problema?
Vi riporto qua sotto la parte di codice interessata:

<script>
$(function() {
$( "#presenti_estesi" ).dialog({
autoOpen: false,
resizable: false,
width: 500,
height: 655,
position: [0,15],
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 1000
}
});
$( "#sposta_presenti_estesi" ).click(function() {
$( "div.ui-dialog-content" ).draggable(
{handle: "#sposta_presenti_estesi" }
);
});
$( "#apri_presenti_estesi" ).click(function() {
$( "#presenti_estesi" ).dialog( "open" );
});
$( "#chiudi_presenti_estesi" ).click(function() {
$( "#presenti_estesi" ).dialog( "close" );
});
});
</script>

E quì la parte del div interessato:

<div id="presenti_estesi">
<a href="#" id="chiudi_presenti_estesi" style="position:absolute; top:50px; left:70px;">CHIUDI</a>
<div id="sposta_presenti_estesi" style="position:absolute; top:50px; left:270px; border: 1px solid red; width: 70px; height: 20px;"></div>
<iframe src="popup5.php?page=presenti_estesi" class="iframe_presenti_estesi" allowtransparency="true" frameborder="0"></iframe>
</div>

31/01/2013 00:26:42

Tuttavia quel div rimane mobile con la situazione del codice che ho postato sopra. Controllando la pagina con firebug vedo però che la struttura del div da spostare è leggermente diversa, qualcosa del tipo:

<div class="ui-dialog">
<div class="ui-dialog-titlebar">
[titolo della finestra modale e bottone di chisura]
</div>
<div class="ui-dialog-content" id="presenti_estesi">
[come nel mio primo post]
</div>
</div>

In pratica riesco a muovere solo il div presenti_estesi, ma non i due restanti div, che rimangono fissi e non posso interagire con ciò che c'è sotto di essi

31/01/2013 14:16:50

Il mio problema infatti è proprio quello: non posso/riesco ad associare al div che ha come classe css "ui-dialog" l'id che voglio, perchè quel div non lo inserisco io, bensì la funzione dialog(). Questo div con classe "ui-dialog" non fa parte del codice della pagina, in cui c'è solo il div avente l'id "presenti_estesi"

31/01/2013 18:48:36 e modificato da leoblacksoul il 31/01/2013 18:53:22

Il modo più semplice e pulito (e io ritengo anche più corretto) di fare quello che dici è semplicemente fare override del CSS di ui-dialog. Cioè semplicemente nel tuo CSS (che deve venire caricato DOPO il CSS di jquerui) ci metti una voce che da lo stile che vuoi tu alla classe ui-dialog

Se per qualche ragione non puoi fare override dell'intera classe ui-dialog (magari perchè vuoi che in base a cosa apri lo stile della dialog sia diverso) allora devi semplicemente usare l'opzione "dialogClass" dentro all'oggetto che usi per configurare la dialog inizialmente.

jQueryUI è un progetto documentatissimo, impariamo a usare la documentazione: http://api.jqueryui.com/dialog/#option-dialogClass ↗

P.S.: inoltre è sbagliato ricreare i tasti di apertura chiusura e l'handle di spostamento solo perchè li vuoi graficamente diversi. Ti basta usare le apposite opzioni di configurazione che dialog già offre. L'opzione dialogClass dovrebbe esserti sufficiente anche per rifare completamente lo stile di tutti i bottoni della dialog

31/01/2013 23:43:14

Sono riuscito a risolvere tutto grazie al dialogClass, grazie per il suggerimento! Una volta assegnata la classe al div "padre" è stato semplice modificare anche la barra per il drag e il pulsante di chiusura! :)

01/02/2013 23:17:38

Buonasera, nuovamente. Uso ancora questa discussione poichè si tratta sempre dell'utilizzo della funzione dialog() di jQuery-ui.
Il mio passo successivo alla sistemazione della finestra modale in GDRCD5.1 dovrebbe essere quello di implementare una finestra modale per i messaggi privati, il cui link di apertura è all'interno di un iframe. Come posso permettere l'apertura di tale finestra modale nel main.php invece che all'interno dell'iframe?

01/02/2013 23:52:00

Usa l'opzione appendTo delle opzioni di dialog http://api.jqueryui.com/dialog/#option-appendTo ↗
credo che dovresti essere in grado di passargli una cosa tipo window.body o direttamente l'oggetto window

02/02/2013 00:49:32

La soluzione più easy è quella di utilizzare ajax quando si clicca sul link. Ti fai restituire il codice html del messaggio da visualizzare che inietterai nel dialog subito prima di farlo visualizzare.