Il problema con jQuery Mobile

A molti di voi sarà capitato di dover realizzare una qualche interfaccia in jQuery Mobile, eccezionale soluzione per dare un appeal mobile alle vostre interfacce.
Il mio problema nasceva dal fatto che per alcuni contenuti particolarmente lunghi, dove non bastava lo spazio renderizzato in pagina, non potevo contare su un effetto Scroll On Tap, tipico dell’interfaccia sugli SmartPhone.

Alcune soluzioni esterne

Una delle soluzioni più usate è quella di usare iScroll 4, che trovate qui, realizzato Matteo Spinelli: la sua soluzione è molto usata, funziona bene e bisogna apporre qualche modifica agli stili CSS dei vari DIV che contengono i vostri dati.

La mia soluzione con Scrollview.js

Io ho risolto il mio problema utilizzando il plugin di Adobe jquery.mobile.scrollview.js.
Non ho avuto alcun bisogno di modificare le mie pagine e l’effetto è abbastanza fluido. Ad esser completamente sinceri, iScroll4 permette una maggiore fluidità di scroll ma il livello di  smooth raggiunto da scrollview.js raggiungeva lo scopo adeguatamente.

La libreria stessa è offerta con la seguente dicitura:
” Note: Code is in draft form and is subject to change “

Siccome ho effettuato numerose prove di funzionamento, ho raggiunto la ( mia personalissima ) conclusione che l’ordine di caricamento in pagina dei vari file .js dovrebbe essere il seguente:

        <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="jquery.mobile.scrollview.css" />
        <link rel="stylesheet" href="my.css" />

        <script src="jquery.min.js"></script>
        <script src="jquery.mobile-1.1.0.min.js"> </script>
        <script src="jquery.easing.1.3.js">
        </script>
        <script src="jquery.mobile.scrollview.js">
        </script>
        <script src="scrollview.js">
        </script>

Per praticità, vi posto i links diretti su demo.oneblackcat.it, ma tenete conto che potrebbero esserci delle versioni più aggiornate sul web, quindi il mio consiglio è quello di cercare su Google, non vi sarà difficile trovare le fonti ufficiali.

<link rel=”stylesheet” href=”jquery.mobile-1.1.0.min.css” />
<link rel=”stylesheet” href=”jquery.mobile.scrollview.css” />
<link rel=”stylesheet” href=”my.css” />

<script src=”jquery.min.js“></script>
<script src=”jquery.mobile-1.1.0.min.js“> </script>
<script src=”jquery.easing.1.3.js“></script>
<script src=”jquery.mobile.scrollview.js“></script>
<script src=”scrollview.js“></script>

E’ molto semplice attivare lo scrollview sul content di una pagina:

        <div data-role="page" id="page5">
            <div data-theme="b" data-role="header">
                <h3>
                   Titolo della pagina
                </h3>
            </div>
            <div data-role="content" class="ui-scrolllistview">
                <div style="" data-role="listview">
                	<div class="mydetail">
                    	Lorem ipsum...
                        </div>
                </div>
            </div>

        </div>

Aggiungete solamente, al DIV con data-role=content la classe ui.scrolllistview, mentre al DIV interno assegnate il ruolo di data-role=listview.