jQuery Mobile Elenchi a scorrimento indipendenti

Question

Sto creando un'applicazione Web mobile utilizzando il framework jQueryMobile che richiede 2 elenchi da mostrare all'utente fianco a fianco. Il problema qui è che mi piacerebbe che le liste si muovessero indipendentemente l'una dall'altra in modo che l'utente possa scegliere e posizionare dall'elenco a sinistra, e un altro dall'elenco a destra senza scorrere entrambi gli elenchi contemporaneamente.

Ho studiato il seguente plug-in per il mobile:

asyraf9.github.com/jquery-mobile/

che è una grande soluzione, ma è più di menu/pagina centrica, e vorrei piacerebbe che entrambi gli elementi fossero liste all'interno di una singola pagina.

Stavo pensando qualcosa sulla falsariga di:

<div class="ui-grid-a"> 
    <div class="ui-block-a" style="width:50%"> 
     <div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"> 
      <ul data-role="listview"> 
       <li><a href="a.html">Example A</a></li> 
       <li><a href="b.html">Example B</a></li> 
       <li><a href="c.html">Example C</a></li> 
       <li><a href="d.html">Example D</a></li> 
      </ul>                       
     </div> 
    </div> 
    <div class="ui-block-b" style="width:50%"> 
     <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;"> 
      <ul data-role="listview"> 
       <li><a href="a.html">Example A</a></li> 
       <li><a href="b.html">Example B</a></li> 
       <li><a href="c.html">Example C</a></li> 
       <li><a href="d.html">Example D</a></li> 
      </ul>                       
     </div> 
    </div> 
</div>  

Ha chiunque altro trovare una soluzione praticabile?

Grazie

Answer 1

dare un'occhiata a iScoll 4; potrebbe non essere jQuery, ma è un ottimo plugin JavaScript per Mobile Scrolling.

è necessario aggiungere un ID ad ogni UL e allegare un rotolo di ciascuno separatamente in questo modo:

Con il vostro esempio si sarebbe qualcosa in queste righe:

<script type="application/javascript" src="iscroll.js"></script> 
<script type="text/javascript"> 
    var scroller_1; 
    var scroller_2; 
    function loaded() { 
     scroller_1 = new iScroll('ul-1'); 
     scroller_2 = new iScroll('ul-2'); 
    } 
    document.addEventListener('DOMContentLoaded', loaded, false); 
</script> 

Spero che questo aiuta!

Answer 2

JqueryMobile roadmap http://jquerymobile.com/roadmap/ dice scolling indipendente dovrebbe arrivare in versione 1.7

Come soluzione mod magari aggiungendo i div tramite un iframe può offrire una soluzione goffa.