Michele Mader on ottobre 11th, 2013 - Google

Scrivo questo mini tutorial perché ho trovato che in giro ci sono poche indicazioni per un Task tanto semplice e che può essere utile a tante persone.

Il principio su cui si basano tutti gli script che fanno infinite scrolling è che quando vedono che l’utente scrolla la pagina verso il basso iniziano a precaricare la pagina successiva in modo asincrono, prendono solo il contenuto scartando gli elementi esterni a questo (intestazioni, menu, footer, ecc.) e lo accodano al contenuto della prima pagina. Alcuni modificano anche l’url della pagina per far comparire le pagine successive alla prima nella history del browser.

La peculiarità di jQuery Mobile è che nel browser non viene visualizzato direttamente l’HTML generato dal server, ma una sua versione rielaborata da javascript.Questo comporta che alcuni moduli di Drupal che già prevedono l’infinite scrolling o script ampiamente utilizzati per i siti non “jQuery Mobile” tipo IAS non possono essere utilizzati.

Per jQuery Mobile ho trovato un utilissimo script: jQuery Mobile Infinite Scroll Library che non presenta tutti i fronzoli di altri scripts, però funziona perfettamente, quindi va più che bene, e poi è anche più semplice da leggere, quindi ancora meglio.

Come suggerimento, posso consigliare di modificare il modo in cui viene reso il pager di drupal modificando il file pager.php all’interno del tema mobile_jquery/includes/modules ad esempio commentando la funzione mobile_jquery_pager, che peraltro anche se non causa disastri, è comunque scritta pessimamente, in modo da utilizzare il pager di default di Drupal che assegna delle classi che identificano facilmente il pager ed il link “next”.

Per includere il plugin, consiglio di copiarlo in una cartella js all’interno o del modulo che state sviluppando o del tema, e di accodare anche la parte di codice che serve per configurare lo script, ad esempio:

jQuery(document).ready(function() {
jQuery('#listing').infinitescroll({
// required options
navElement: '.pager-next a',
itemsToLoad: '#listing li'
}, function(){
// optional callback function
jQuery('#listing').listview('refresh');
});
});

per includere lo script nella pagina, invece è sufficiente aggiungere la seguente riga di codice:

drupal_add_js(drupal_get_path('module', 'my_mobile') . '/js/jqm_infinitescroll.js', array('group' => 99999, 'weight' => 9999));

Il group e il weight sono per essere sicuri che lo script venga caricato ed eseguito dopo tutti gli script per jQuery mobile.

Se volete altri consigli/indicazioni potete chiedermele nei commenti qui sotto.

Per il momento non ci sono post correlati.

Tags: , ,

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>