Tutorial JQuery Mobile

Jquery Mobile Tutorial

In questo articolo prenderemo in esame un framework molto usato ultimamente per la creazione di web app per samrtphone e tablets. Il framework in questione è JQuery Mobile e il sito di riferimento è www.jquerymobile.com
Non starò qui a fare le pulci a questo linguaggio, ognuno di voi potrà spulciarsi il sito di riferimento e capirne limiti e vantaggi, ma cercherò invece di esporvi un facile modo di prendere confidenza con questo ottimo strumento.
Questo tutori al vi guiderà nella creazione di una piccola web app di qualche pagina, adatta magari per piccole aziende.

Tutorial JQuery Mobile

Jquery Mobile

Dopo il primo articolo, dove abbiamo creato una prima pagina in JQuery Mobile, è il momento di sfruttare una caratteristica molto importante di questo framework, ovvero la possibilità di creare più pagine nello stesso file.
Durante la creazione del primo file, abbiamo incontrato il tag div data-role="page" all'interno del quale sono stati inseriti tutti i contenuti della pagina. Per poter quindi dare vita ad un numero maggiore di pagine non si dovrà far altro che ripetere questo tag per ogni nuova pagina che si intende creare.

Tutorial JQuery Mobile

Jquery Mobile

Fino ad ora ci siamo limitati a conoscere il modo di impostare una pagina basilare e abbiamo visto come poterne inserire più d'una all'interno dello stesso file. Abbiamo anche già incontrato alcuni elementi propri di Jquerymobile come l'header e il footer delle pagine, ma ci siamo limitati ad usarli in modo estremamente semplice ed elementare. In questo articolo vedremo invece come utilizzarli per ottenere una pagina che assomigli il più possibile a quelle di un'applicazione nativa.

Tutorial JQuery Mobile

Jquery Mobile

Siamo arrivati al punto di iniziare a creare qualcosa di più corposo rispetto ad una pagina bianca. Abbiamo già visto come  più pagine nello stesso file e come inserirvi un Header e Footer bloccati alle estremità della pagina al fine di dare al nostro prodotto l’aspetto di una app nativa.
Oggi vedremo anche come inserire, sempre all’interno di questi due elementi immancabili, alcuni bottoni cliccabili.

Tutorial JQuery Mobile

Jquery Mobile

Nell’articolo precedente abbiamo visto come inserire dei link/bottoni all’interno dell’header o del footer della pagina.
In questo articolo invece vedremo quali sono le potenzialità dei link e dei bottoni che JQuery Mobile ci mette a disposizione. Ciò su cui ci concentreremo sarà il tag data-role=”button”.

Tutorial JQuery Mobile

JQuery Mobile

Nel precedente articolo "JQuery Mobile - Gruppi di Bottoni (una prima struttura di WebApp)" abbiamo trattato l'implementazione dei gruppi di bottoni per creare dei menu. Ora vedremo come rendere più gradevole il passaggio da una pagina all'altra inserendovi degli effetti di transizione. Come avremo modo di vedere nel dettaglio gli effetti di transizione offerti da JQuery Mobile sono molti e non c'è che da scegliere quale, a seconda del nostro gusto, più ci aggrada. Nel corso di questo tutorial avremo modi di usarle praticamente tutte, così da vederle in azione una per una.

Tutorial JQuery Mobile

JQuery Mobile

Nel precedente articolo articolo abbiamo trattato l’uso dei tag data-role=”button” e data-role=”icon” che JQuery Mobile ci mette a disposizione. In questo articolo vedremo invece come creare dei gruppi di bottoni che possono rivelarsi estremanete utili ed efficaci per creare dei menu. Fino ad ora abbiamo visto come inserire bottoni nell’header e nel footer della pagina o come inserire dei link all’interno del contenuto della pagina.

Joomla SEF URLs by Artio