Utilizzare i widget jQuery UI e Mobile in Dreamweaver

Ultimo aggiornamento il 30 apr 2026

Scoprite come aggiungere funzionalità simili ad app ai vostri progetti Web Dreamweaver utilizzando i widget jQuery UI e Mobile. Inserite pannelli a soffietto, schede, cursori e caselle di testo a compilazione automatica senza scrivere una sola riga di codice.

I widget sono piccole applicazioni Web, scritte in linguaggi come DHTML e JavaScript, che possono essere inserite ed eseguite in una pagina Web. Tra le altre cose, i widget Web consentono di simulare l'esperienza del desktop in una pagina Web.

Infatti, i widget di interfaccia utente jQuery quali Pannello a soffietto, Schede, Selettori di data, Cursore e Compilazione automatica, ricreano sul Web l'esperienza del desktop.

Ad esempio, il widget Schede può essere utilizzato per replicare le schede delle finestre di dialogo delle applicazioni desktop.

Dreamweaver include anche un insieme di widget jQuery Mobile che potete utilizzare per creare elementi di un modulo e altre funzioni utilizzate normalmente nelle Web app per dispositivi mobili. Ad esempio, puoi utilizzare il widget mobile jQuery per aggiungere elementi di modulo ottimizzati per dispositivi mobili, come aree di testo e caselle di controllo.

Inserire un widget jQuery

Quando inserite un widget jQuery, vengono aggiunti automaticamente al codice i seguenti elementi:

  • Riferimenti a tutti i file dipendenti
  • Script tag contenente l'API jQuery per il widget. Altri widget vengono aggiunti allo stesso tag script.

Per ulteriori informazioni sui widget jQuery, consulta http://jqueryui.com/demos/

Nota

per gli effetti jQuery, il riferimento esterno a jquery-1.8.24.min.js non viene aggiunto perché il file viene incluso automaticamente quando aggiungete un effetto.

Assicuratevi che il cursore si trovi nella posizione della pagina in cui desiderate inserire il widget.

Selezionate Inserisci > Interfaccia utente jQuery e scegliete il widget che desiderate inserire.

Se usate il pannello Inserisci, i widget sono disponibili nella sezione Interfaccia utente jQuery del pannello.

Quando selezionate un widget jQuery, le sue proprietà vengono visualizzate nel pannello Proprietà.

Potete visualizzare in anteprima i widget jQuery nella vista Dal vivo oppure in un browser che supporta i widget jQuery.

Modificare i widget jQuery

Selezionate il widget che desiderate modificare.

Nel pannello Proprietà, modificate le proprietà.

Ad esempio, per aggiungere un'ulteriore scheda al widget Schede, selezionate il widget e fate clic su "+" nel pannello Proprietà.

Inserire widget mobile jQuery

Prima di poter utilizzare qualsiasi widget mobile jQuery, devi definire una pagina jQuery Mobile selezionando Inserisci > jQuery Mobile > Pagina.

Si apre la finestra di dialogo File jQuery Mobile.

Finestra di dialogo File jQuery Mobile
Finestra di dialogo File jQuery Mobile

Modifica le impostazioni predefinite nella finestra di dialogo file jQuery Mobile o lasciale impostate sui percorsi predefiniti, quindi fai clic su OK.

Nella finestra di dialogo Pagina che si apre, digita un nome nel campo ID e seleziona o deseleziona le caselle di controllo accanto a Intestazione e Piè di pagina in base alla necessità di sezioni di intestazione e piè di pagina nella pagina mobile.

Finestra di dialogo Pagina
Finestra di dialogo Pagina

Nella pagina che si apre in Dreamweaver, sostituisci il testo Intestazione, Contenuto e Piè di pagina con testo, immagini e altri elementi desiderati per la pagina mobile.

Nota

Mantieni il testo breve e le immagini piccole per la visualizzazione su schermi mobili di piccole dimensioni.

Aggiungi altri widget jQuery Mobile secondo necessità.

Visualizza l'anteprima della pagina su un dispositivo.

Per ulteriori informazioni, consulta Anteprima delle pagine web Dreamweaver su più dispositivi.

Salva la pagina jQuery Mobile e tutti i file correlati.


Temi mobile jQuery non applicati con le versioni più recenti di jQuery 

Problema

I temi jQuery Mobile, inclusi campioni e pannelli, non vengono applicati quando si utilizzano versioni più recenti di jQuery, come jQuery 3.7.1. Di conseguenza, i temi jquery potrebbero non eseguire il rendering correttamente o comportarsi come previsto.

Causa

jQuery Mobile è stato deprecato e non viene più mantenuto attivamente. Non supporta le versioni jQuery 3.x, causando problemi di compatibilità con le versioni più recenti.

Risoluzione/Soluzione alternativa

Per continuare a utilizzare le funzionalità jQuery Mobile (temi, campioni e pannelli), utilizza una versione precedente compatibile di jQuery.

Versione consigliata: jQuery 1.11.1 (o altre versioni 1.x supportate)

Esempio

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

Aggiungi una versione jQuery supportata. Ad esempio, 1.11.1.

Assicurati che la libreria jQuery Mobile sia caricata dopo lo script jQuery.

Ricarica la pagina e verifica che temi, Campioni e pannelli eseguano il rendering correttamente.

Nota

Poiché jQuery Mobile è deprecato e non viene più aggiornato, continua a utilizzare una versione jQuery tradizionale compatibile per i progetti jQuery Mobile esistenti.