mobile

Mattepuffo's logo
jQuery Mobile Panel

jQuery Mobile Panel

Era da un bel pò che non usavo jQuery Mobile (che avevo sostituito con Sencha Touch) e sono rimasto sorpeso delle novità che trovato l'altra settimana.

Sia in termini di grafica, che di componenti migliorati / nuovi.

Uno di questi è il Panel, un componente che è nascosto di default e che si attiva al click su un bottone / link.

Oggi vediamo un semplice esempio; prima di tutto includiamo ciò che ci serve:

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Io ho preso tutto direttamente dal web.

10/06/2013
Leggi tutto
Mattepuffo's logo
Introduzione a Sencha touch

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
Leggi tutto
Mattepuffo's logo
Impostare le icone in jQuery Mobile Navbar

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
Leggi tutto
Mattepuffo's logo
Un menu a tab con jQuery Mobile

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
Leggi tutto
Mattepuffo's logo
Una galleria con jQuery Mobile e PhotoSwipe

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
Leggi tutto
Mattepuffo's logo
Introduzione a jQuery Mobile

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
Leggi tutto