Dialog Widget

Ogni pagina può essere presentata come un dialogo modale aggiungendo l’attributo data-rel="dialog" al link di ancoraggio della pagina. Quando l’attributo “dialog” viene applicato, il framework aggiunge stili per aggiungere angoli arrotondati, margini intorno alla pagina e uno sfondo scuro per far sembrare che il “dialogo” sia sospeso sopra la pagina.

È possibile aprire un dialogo programmaticamente chiamando il metodo $.mobile.changePage:

Transitions

Di default, il dialogo si aprirà con una transizione ‘pop’. Come tutte le pagine, puoi specificare qualsiasi transizione di pagina che vuoi sulla finestra di dialogo aggiungendo l’attributo data-transition al collegamento. Per renderlo più simile a un dialogo, raccomandiamo di specificare una transizione “pop”, “slidedown” o “flip”.
I valori possibili includono: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.

Chiusura delle finestre di dialogo

Quando un qualsiasi link viene cliccato all’interno di una finestra, il framework chiude automaticamente la finestra e passa alla pagina richiesta, proprio come se la finestra fosse una pagina normale. Tuttavia, le finestre di dialogo possono anche essere concatenate, come spiegato di seguito in “Concatenamento delle finestre di dialogo”. Allo stesso modo, un link che apre un popup lascerà anche la finestra di dialogo al suo posto.

Se la finestra ha un’intestazione il framework aggiungerà un pulsante di chiusura sul lato sinistro dell’intestazione. Puoi cambiare la posizione aggiungendo data-close-btn="right" al contenitore della finestra di dialogo. Se non vuoi un pulsante di chiusura nell’intestazione o aggiungi un pulsante di chiusura personalizzato, puoi usare data-close-btn="none".

Per creare un pulsante “annulla” in una finestra di dialogo, basta collegarsi alla pagina che ha fatto aprire la finestra di dialogo e aggiungere l’attributo data-rel="back" al tuo collegamento. Questo modello di collegamento alla pagina precedente è utilizzabile anche in dispositivi non JS.

Per i collegamenti generati da JavaScript, puoi semplicemente impostare l’attributo href a “#” e usare l’attributo data-rel="back". Puoi anche chiamare il metodo close() della finestra di dialogo per chiudere programmaticamente le finestre di dialogo, per esempio: $( ".ui-dialog" ).dialog( "close" ).

Impostazione del testo del pulsante di chiusura

Proprio come il plugin di pagina, è possibile impostare il testo del pulsante di chiusura di una finestra di dialogo attraverso un’opzione o un attributo di dati. L’opzione può essere configurata per tutte le finestre di dialogo legandosi all’evento mobileinit e impostando la proprietà $.mobile.dialog.prototype.options.closeBtnText a una stringa di tua scelta, oppure puoi inserire l’attributo dati data-close-btn-text per configurare il testo dal tuo markup.

Storia & Comportamento del pulsante Indietro

Siccome le finestre di dialogo sono tipicamente usate per supportare azioni all’interno di una pagina, il framework non include le finestre di dialogo nel monitoraggio della storia dello stato dell’hash. Questo significa che le finestre di dialogo non appariranno nella cronologia della cronologia di navigazione quando il pulsante Indietro viene cliccato. Per esempio, se sei su una pagina, fai clic su un link per aprire una finestra di dialogo, chiudi la finestra e poi passi a un’altra pagina, se dovessi fare clic sul pulsante Indietro del browser a quel punto torneresti alla prima pagina, non alla finestra di dialogo.

Catenamento delle finestre di dialogo

Nota bene: se una finestra di dialogo apre un’altra finestra di dialogo (concatenamento), chiudendo l’ultima con un link di tipo data-rel="back" si passerà sempre alla finestra precedente finché non si raggiunge la pagina principale di tipo data-role="page". Questo garantisce una navigazione coerente tra le finestre di dialogo.

Styling & theming

Le finestre di dialogo possono essere stilizzate con diversi temi, proprio come qualsiasi pagina, aggiungendo gli attributi data-theme ai contenitori header, content o footer.

Di default le finestre hanno angoli arrotondati. L’opzione angoli può essere impostata su false aggiungendo data-corners="false" al contenitore delle finestre di dialogo:

Le finestre di dialogo sembrano galleggiare sopra un livello di overlay. Questa sovrapposizione adotta il colore del contenuto swatch ‘a’ per impostazione predefinita, ma l’attributo data-overlay-theme può essere aggiunto al wrapper della pagina per impostare la sovrapposizione a qualsiasi lettera swatch.

Le finestre di dialogo possono anche essere usate più come un foglio di controllo per offrire pulsanti multipli se si rimuove semplicemente il margine superiore dall’elemento contenitore interno della finestra. Per esempio, se la tua pagina di dialogo avesse una classe di my-dialog, potresti aggiungere questo CSS per bloccare la finestra di dialogo in alto: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, o potresti semplicemente applicare questo stile a tutte le finestre di dialogo con .ui-dialog .ui-dialog-contain { margin-top: 0 }.

Larghezza e margini delle finestre di dialogo

Per amore della leggibilità, le finestre di dialogo hanno un width predefinito del 92,5% e un max-width di 500 pixel. C’è anche un 10% in alto margin per dare alle finestre di dialogo un margine superiore più ampio su schermi più grandi, ma che collassa a un piccolo margine sugli smartphone. Il contenitore interno della finestra è spostato verso il top di 15px per nascondere lo stile dell’angolo se la finestra è usata come foglio di controllo (vedi sopra). Per sovrascrivere questi stili, aggiungi la seguente regola di sovrascrittura CSS al tuo foglio di stile e modifica come necessario: