Brainleaf
Web Resources

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”.


Per una trattazione più approfondita dell’argomento consiglio vivamente la lettura della pagina specifica della documentazione originale di JQuery Mobile all’url
http://jquerymobile.com/demos/1.1.1/docs/buttons/index.html

Per prima cosa, al fine di comprendere bene il valore del tag data-role=”button”, faremo una prova pratica creando un link con il comune tag html a href per poi ripeterlo invece con il tag data-role=”button”

Rimettendo in gioco il file sul quale stiamo già lavorando (clicca qui per scaricare il file in formato txt)  andremo a modificare soltanto il link che troviamo all’interno del contenuto della seconda pagina

Ecco la parte di codice interessata:

<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
<div data-role="content">
   <h2>JQuery Mobile Tutorial</h2>
   <p>Questa &egrave; la <strong>Seconda Pagina</strong> del tutorial JQuery Mobile by BRAINLEAF Communication<br> In questa pagina il footer non è "fixed"</p>
<p>
<!-- LINK BOTTONE -->
<a href="#home" data-role="button">Torna alla HomePage</a></p>
</div>
<!-- CHIUDO CONTENT -->



Come è possibile vedere, il tag data-role=”button” restituisce, a differenza di un comune link, un pulsante facilmente cliccabile sui display dei dispositivi mobili ed è anche un risultato molto più gradevole da un punto di vista estetico. Ora le nostre due pagine contenute nel file disporranno di deu diversi tipi di link: nella prima pagina è presenti infatti un comune link, mentre nella seconda lo stesso viene proposto sotto forma di bottone.

Ma possiamo fare di più, ovvero inserire delle icone nei nostri bottoni. Per questa funzione ci vengono incontro due particolari aspetti di JQuery Mobile che sono appunto la disponibilità nativa del framework di usare alcune icone standard e un tag apposito per richiamarle dove serve.
Nel caso di un bottone sarà sufficiente inserire nel tag che genera il link un ulteriore attributo: data-icon=”nome dell’icona”  che nello specifico del nostro caso sarà data-icon=”home”

Per un elenco completo delle icone disponibili consiglio la consultazione di questa pagina:
http://jquerymobile.com/demos/1.1.1/docs/buttons/buttons-icons.html

Ecco il codice del nuovo bottone completo di icona

<!-- APRO IL CONTENT DELLA SECONDA PAGINA -->
<div data-role="content">
  <h2>JQuery Mobile Tutorial</h2>
  <p>Questa &egrave; la <strong>Seconda Pagina</strong> del tutorial JQuery Mobile by BRAINLEAF Communication<br> In questa pagina il footer non è "fixed"</p>
  <p>
<!-- BOTTONE CON ICONA -->
  <a href="#home" data-role="button" data-icon="home">Torna alla HomePage</a>
  </p>
</div>
<!-- CHIUDO CONTENT -->


CLICCA QUI PER VEDERE UN ESEMPIO LIVE DELLA PAGINA

Joomla SEF URLs by Artio