Questo tutorial è molto interessante perché mostra delle funzionalità di jQuery come creare dei floating dialog, avvisi per l'utente o anche solo del contenuto per ricordare eventi, inviare email, inserire una opinione etc.

Prima di tutto abbiamo bisogno di alcune librerie esterne che non sono vitali concettualmente per il tutorial ma solo al fine di utilizzare o manipolare l'esempio, queste sono:

jQuery Form Plugin
jQuery Interface Plugin

Nell'esempio verrà spiegato come creare un form per salvare le preferenze.

Prima di tutto, dobbiamo creare il form per salvare le impostazioni. Associamo #layer1_form come attributo id del form (id = 'layer1_form') e creiamo una serie di componenti per simulare le preferenze:

<form id="layer1_form" method="post" action="save_settings.php"> 
    Display Settings<br /> 
    <input type="radio" name="display" checked="checked" 
value="Default" /> 
    Default<br /> 
    <input type="radio" name="display" value="Option A" /> 
    Option A<br /> 
    <input type="radio" name="display" value="Option B" /> 
    Option B<br /><br /> 
    Autosave settings<br /> 
    <input type="radio" name="autosave" checked="checked" 
value="Enabled" /> 
    Enabled<br /> 
    <input type="radio" name="autosave" value="Disabled" /> 
    Disabled<br /><br /> 
 
    <input type="submit" name="submit" value="Save" /> 
</form> 

nel nostro esempio abbiamo due impostazioni, una per visualizzare delle impostazioni e l'altra per eseguire l'auto salvataggio delle preferenze.

Comunque, visto che dobbiamo visualizzare il form in una dialog mobile dobbiamo identificare il layer che risulterà essere il contenitore spostabile ad esempio con #layer1 (questo vuol dire associare il suo id a 'layer1').

Bisogna a queso punto definire un handle delle finestra dove sarà possibile premere per eseguire lo spostamento, in modo analogo definiamo un id #layer1_handle.

Il passo successivo consiste nel rendere disponibile un pulsante per la chiusura, l'esempio mostra un testo però è facilmente modificabile con una immagine o con un pulsante. In questo caso il link viene marcato e identificato con #close.

Di seguito il codice per creare il form sopra descritto:

<div id="layer1"> 
    <div id="layer1_handle"> 
            <a href="#" id="close">[ x ]</a> 
            Preferences 
    </div> 
    <div id="layer1_content"> 
        <form id="layer1_form" method="post" action="save_settings.php"> 
            Display Settings<br /> 
            <input type="radio" name="display" checked="checked" 
value="Default" /> 
            Default<br /> 
            <input type="radio" name="display" value="Option A" /> 
            Option A<br /> 
            <input type="radio" name="display" value="Option B" /> 
            Option B<br /><br /> 
            Autosave settings<br /> 
            <input type="radio" name="autosave" checked="checked" 
value="Enabled" /> 
            Enabled<br /> 
            <input type="radio" name="autosave" value="Disabled" /> 
            Disabled<br /><br /> 
 
            <input type="submit" name="submit" value="Save" /> 
        </form> 
    </div> 
</div> 

Per verificarne il funzionamento lato server si è deciso di stampare semplicemente le impostazioni scelte tramite una semplice classe php, ossia save_settings.php:

<b>Preferences:</b><br /> 
Display Setting: 
<?php echo htmlspecialchars($_POST['display'], ENT_QUOTES); ?><br /> 
Autosave Setting: 
<?php echo htmlspecialchars($_POST['autosave'], ENT_QUOTES); ?><br />

Ora che abbiamo definito il form e la classe server, che riceve i dati, dobbiamo definire l'uscita alla chiamata Ajax che mostrerà la risposta. Per questo motivo viene creato un nuovo container identificato con #content.

Inizialmente conterrà un pulsante per impostare le preferenze e quando il form verrà eseguito correttamente verrà sostituito proprio con la risposta Ajax:

<div id="content"><input type="button" id="preferences" 
value="Edit Preferences" /></div> 

A questo punto bisogna implementare le funzioni jQuery e agganciare i plugin.
Prima di tutto, dobbiamo importare le librerie inserendelo nel tag head del nostro documento:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="interface.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 

Una parte importante, spesso sottovalutata, è quelal di caricare le funzioni e il codice jQuery dop oaver definito tutta la parte DOM soprattutto dopo il rendering così da avere tutti i componenti disponibili e funzionali, questo è facilmente assicurato se si usa la funzione $(document).ready( ... ) come nell'esempio seguente:

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
        //jQuery events go here 
    } 
<script> 

Viene definito un wrapper con id #layer1 del nostro form coem una finestra draggabile con alcune impostazioni (fra le quali uno z-index di 20 e uan opacità di 0.7 che corrisponde al 70%):

$('#layer1').Draggable( 
        { 
            zIndex:    20, 
            ghosting:false, 
            opacity: 0.7, 
            handle:    '#layer1_handle' 
        } 
    ); 

per nascondere la finestra basta nascondere proprio questo wrapper:

$("#layer1").hide(); 

menter per visualizzare la finestra quando viene premuto il pulsante associato:

$('#preferences').click(function() 
{ 
    $("#layer1").show(); 
}); 

come vedete risulta molto semplice il codice di controllo, a questo punto in modo analogo per nascondere il form quando si preme sul link #close (o come dicevamo immagine / pulsante) viene nascosto il form con questa istruzione:

$('#close').click(function() 
{ 
    $("#layer1").hide(); 
}); 

Ecco questo è tutta la parte che bisogna inserire per controllare la dialog, non resta che processare la risposta Ajax e se la richiesta viene eseguita correttamente chiudere la dialog, che nel nostro caso significa:

$('#layer1_form').ajaxForm({ 
    target: '#content', 
    success: function() 
    { 
        $("#layer1").hide();
        // se vuoi, fai qualcosa al termine della operazione
        // ....
    } 
}); 

Nei collegamenti esterni qui sotto trovate il link alla demo e la possibilità di scaricare i sorgenti completi. Questo è quanto!

Collegamenti esterni: jQuery | Form Plugin | Interface Plugin| demo | download source