jquery mobile

Introduzione a Sencha touch

Sencha touche è uno die vari framework disponibili per la creazione app mobile (compatibile solo con browser basati su Webkit come Safari e Chrome).

A mio avviso è anche una delle migliori, ma ha una curva di apprendimento abbastanza ripida in quanto non è basata su HTML, ma è Javascript-driven.

Questo vuol dire che tutta l'applicazione sarà scritta dentro un file js.

Iniziamo con lo scaricare il tutto da qua; io ho scaricato la versione Open Source.

Dopo di che creiamo una cartella js e mettiamo il tutto la dentro.

Dentro la cartella js creiamo anche un file app.js; questo sarà il file dove andremo a scrivere tutta l'applicazione.

Nella root creiamo un semplice file index.html con questa roba dentro:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="js/touch/resources/css/sencha-touch.css" type="text/css" />
        <script type="text/javascript" src="js/touch/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
    </body>
</html>

Come vedete questo file si limita a caricare il foglio di stile predefinito, la libreria sencha e il nostro file app.js.

Dentro al body non c'è nulla!

06/06/2012

Impostare le icone in jQuery Mobile Navbar

In un articolo precedente avevo mostrato come usare Navbar per creare un menu a tab in una pagina con jQuery Mobile.

Oggi vediamo come sia semplice impostare le icone e anche come usare quelle personalizzate piuttosto che quelle standard.

Senza ricominciare da capo, partiamo direttamente da un normale footer con navbar:

<div data-role="footer" data-position="fixed">

<div data-role="navbar">

   <ul>

    <li><a href="#home">Home</a></li>

    <li><a href="#adv">Advertising</a></li>

   </ul>

</div>

</div>

Per le icone abbiamo due impostazioni:

la posizione
l'icona

Di default la posizione è impostata su TOP, ma possiamo cambiarla così:

<div data-role="navbar" data-iconpos="bottom">

Per impostare l'icona invece:

<li><a href="#home" data-icon="home">Home</a></li>

<li><a href="#adv" data-icon="grid">Advertising</a></li>

Usiamo data-icon indicando un'icona.

Qui la lista di quelle standard.

Se invece vogliamo usarne una personale dobbiamo fare un pò di lavoro in più.

Create un nuovo file CSS e includetelo nell'header.

16/04/2012

Un menu a tab con jQuery Mobile

jQuery Mobile id default no nprevede componenti per creare menu a tab (al contrario ad esempio di Sencha Touch).

E' possibile, però, facilmente ovviare al problema.

Supponiamo di avere due pagine e di voler mettere il menu in basso e in maniera fissa.

13/04/2012

Una galleria con jQuery Mobile e PhotoSwipe

Ad oggi è sempre più indispensabile avere gallerire fotografiche sul web sensibili al touch.

In giro già si trovano diverse gallerie in grado di farlo.

Io mi sono buttato su PhotoSwipe.

La galleria l'ho poi integrata con jQuery Mobile in modo da avere il tutto in una singola applicazione e in modo che la galleria posso interagire con altre pagine.

La libreria PhotoSwipe è abbastanza semplice da usare ed ha parecchie opzioni al suo interno.

Prima di tutto creiamo una pagina in stile jQuery Mobile:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link type="text/css" rel="stylesheet" href="css/style_collection.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/photoswipe.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div data-role="page" id="adv" data-theme="a" data-add-back-btn="true" class="gallery-page">
<div data-role="header" data-position="fixed">
<h1>Gallery</h1>
</div>
<div data-role="content">
LE FOTO
</div>
</div>

Ci sono tre fogli di stile, di cui il primo è quello di JQM e gli altri di due della galleria (che avete scaricato nella pagina insieme ai file JS).

Poi ho incluso cinque file JS:

jQuery
jQuery Mobile
klass e photoswipe per la galleria
script dove ci sono i miei script personali (potete mettere il codice anche nell'head della pagina, a vostra preferenza)

Poi ho messo una singola pagina, preparata però per essere messa in una struttura multi-page.

12/04/2012

Introduzione a jQuery Mobile

Come si può evincere dal nome jQuery Mobile è un framewrok basato su jQuery indirizzato al mobile.

Molto semplice da usare, ha già a disposizione alcuni temi che comunque possiamo modificare.

Le pagine sono scritte in semplice HTML.

Per cominciare scaricate jQuery e la relativa libreria mobile.

La pagina base è questa:

<!DOCTYPE html>

<html>

<head>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>jQuery Mobile Docs - Anatomy of a Page</title>

<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />

<script src="/jquery-1.7.1.js"></script>

<script src="jquery.mobile-1.0.min.js"></script>

</head>

<body>

<div data-role="page">

   <div data-role="header">...</div>

   <div data-role="content">...</div>

   <div data-role="footer">...</div>

</div>
</body>
</html>

Questa è una struttura base; come vedete quello che cambia rispetto a una pagina classica sono gli attirbuti specifi dei vari div.

Il data-role page è obbligatorio; gli altri no in quanto se non vi servono header e footer potete anche ometterli.

Una cosa bella è che una semplice pagina può contenere più pagine navigabili.

16/01/2012

Galleria in jQuery e jQuery UI Slider

Sono sincero: amo jQuery!!

Ha tantissime cose utili, è facile da apprendere con la sua sintassi chiara e pulita ed è molto supportato.

Oggi vi spiego come creare una galleria di immagini usando jQuery, jQuery UI e la sua funzione slider.

jQuery UI è un'estensione di jQuery specifico per la costruzione delle User Interface.

Potete scarocare il pacchetto anche dei temi già fatti (in quel caso dovrete caricare sul sito anche il relativo css).

Qui trovate varie demo; a noi interessa slider.

Per prima cosa dovete scaricare sia jquery.js che jquery ui.js.

Per quest'ultimo potete scegliere i componenti che volete e un tema.

Io vi consiglio di integrare tutti i componenti; per il tema fate vobis, io ho scelto UI darkness.

Una volta scaricati i due file js dovete integrarli nell'head della pagina:

<script src="../js/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

Io ho una versione un pò "vecchia" di jQuery.

Fatto ciò iniziamo a vedere lo slider.

Per creare un slider base dovete fare solo questo:

<script>

$(function() {

$( "#slider" ).slider();

});

</script>

<div id="slider"></div>

Questo permette di creare un slider fine a stesso, nel senso che potete muovere il cursore ma dovete agganciarlo a qualcosa per renderlo operativo.

03/03/2011