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 jQuery UI, ad esempio pannello a soffietto, schede, selettori di data, dispositivo di scorrimento e compilazione automatica, ricreano sul Web l'esperienza del desktop.

Ad esempio, il widget Tabs 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. Potete, ad esempio, utilizzare il widget jQuery Mobile per aggiungere degli elementi di un modulo adatti ai dispositivi mobili quali aree di testo e caselle di controllo.

Inserire un widget jQuery

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

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

Per ulteriori informazioni sui widget jQuery, vedete 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.

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

  2. Selezionate Inserisci > jQuery UI e scegliete il widget che desiderate inserire.

    Se usate il pannello Inserisci, i widget sono disponibili nella sezione jQuery UI 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

  1. Selezionate il widget che desiderate modificare.

  2. 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 i widget jQuery mobile

  1. Prima di poter utilizzare un qualsiasi widget jQuery Mobile, dovete prima definire una pagina jQuery Mobile selezionando Inserisci > jQuery Mobile > Pagina.

    La finestra di dialogo File jQuery Mobile viene visualizzata.

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

  2. Modificate le impostazioni predefinite nella finestra di dialogo File jQuery Mobile o lasciate i percorsi predefiniti, quindi fate clic su OK.

  3. Nella finestra di dialogo Pagina visualizzata, digitate un nome nel campo ID e selezionate o deselezionate le caselle di controllo accanto a Intestazione e Piè di pagina a seconda che vogliate le sezioni intestazione e piè di pagina nella pagina per dispositivi mobili.

    Finestra di dialogo Pagina
    Finestra di dialogo Pagina

  4. Nella pagina visualizzata in Dreamweaver, sostituite il testo dell'intestazione, del contenuto e del piè di pagina con testo, immagini e altri elementi che desiderate inserire nella vostra pagina per dispositivi mobili.

    Nota:

    dato che la pagina è visualizzata su schermi di dispositivi mobili, quindi di piccole dimensioni, mantenete il testo breve e utilizzate immagini di piccole dimensioni.

  5. Aggiungete altri widget jQuery Mobile secondo necessità.

  6. Visualizzate in anteprima la pagina in un dispositivo.

    Per ulteriori informazioni, consultate Visualizzare in anteprima le pagine Web di Dreamweaver su più dispositivi.

  7. Salvate la pagina jQuery Mobile e tutti i file correlati.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online