Crea applicazioni con jQuery Mobile

jQuery Mobile è un plugin del jQuery originale e richiede che quest'ultimo sia precedentemente installato poter funzionare.
Una volta attivo, jQuery Mobile fa due cose:

Innanzitutto, ottimizza le funzioni native per migliorarne le prestazioni sui dispositivi mobili.
In secondo luogo, modifica l'HTML e genera un layout con una serie di elementi grafici predefiniti che accelera notevolmente la velocità di produzione.

Installa jQuery Mobile
Sebbene sia possibile e una tecnica molto comune sui siti Web installare jQuery Mobile collegandosi direttamente ai file archiviati nel cloud, si consiglia vivamente di non applicare tale tecnica per le applicazioni PhoneGap. Molto spesso la tua applicazione verrà utilizzata senza alcuna connessione Internet o con una connessione intermittente. Se i file jQuery sono collegati a documenti cloud, l'applicazione potrebbe diventare inutilizzabile.
Per installare questo framework, la prima cosa da fare è scaricare jQuery dalla sua pagina ufficiale:

http://docs.jQuery.com/Downloading_jQuery#Current_Release

Una volta scaricato jQuery, devi scaricare il plug-in jQuery Mobile dal suo sito Web ufficiale:

http://jquerymobile.com/download/

Inizieremo un esempio che ci permetta di comprendere la programmazione e la struttura dell'applicazione.
Creeremo un file html con il seguente codice

 Applicazione mobile JQuery 

jQuery Mobile ci consente di creare interfacce ottimizzate per dispositivi mobili molto rapidamente e con uno sforzo relativamente ridotto.
Il funzionamento consiste nel riscrivere il codice originale del documento e generarne uno nuovo, più complesso, secondo le caratteristiche e gli argomenti richiesti.
Una caratteristica interessante di jQuery Mobile è che, a differenza di un sito web, che passa da un documento HTML all'altro per visualizzare informazioni, le pagine o le schermate di un'applicazione vengono gestite da un unico documento HTML.
Le pagine o schermate sono in un unico file, jQuery Mobile le gestisce per mostrare solo la parte del documento corrispondente a ciascuna schermata mentre il resto rimane nascosto. In questo modo il caricamento delle pagine è notevolmente accelerato, inoltre permette di gestire eventi e animazioni tra una schermata e l'altra.
jQuery Mobile sfrutta appieno i nuovi elementi HTML5 e fa un uso massiccio di attributi personalizzati definiti con il prefisso "data-"
Ad esempio ruolo-dati, uno degli attributi più utilizzati in jQuery Mobile, consente di definire il ruolo a livello di funzionalità e aspetto dell'elemento che lo contiene. Definendo il ruolo di un elemento, questo attributo consente di creare pagine, pulsanti, menu e molti altri elementi.
Inserendo l'attributo data-role in qualsiasi tag lo rendiamo un elemento di interfaccia. Non è necessario aggiungere alcun codice aggiuntivo jQuery aggiungi tutti gli elementi grafici, le classi e persino le animazioni necessarie per il funzionamento di quel particolare elemento.
Ad esempio, per creare una pagina si utilizza l'attributo ruolo-dati = "pagina" così:

Schermo 1
Schermo 2

Ritornare

Il collegamento di esempio non solo ti consente di andare alla schermata 2, jQuery Mobile ha incluso automaticamente un'animazione di transizione per dargli un aspetto simile a quello di un'applicazione nativa.
Prendiamo il collegamento che abbiamo appena creato e aggiungiamo l'attributo jQuery Mobile data-role = "pulsante" in modo che questo collegamento si comporti come un pulsante:
Per tornare alla pagina principale, puoi applicare la tecnica precedente di linkare un link all'id della pagina principale, o ancora più semplice, puoi usare l'attributo data-rel = ”back” che riporta l'applicazione alla schermata immediatamente precedente .Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo