jQuery Mobile listas independientes de desplazamiento

Question

Estoy creando una aplicación web móvil usando el marco jQueryMobile que requiere 2 listas para mostrar al usuario una al lado de la otra. La clave aquí es que me gustaría que las listas se muevan de forma independiente para que el usuario pueda elegir un ítem de la lista de la mano izquierda y otro de la lista de la derecha sin desplazar ambas listas al mismo tiempo.

He investigado el siguiente plug-in para el móvil:

asyraf9.github.com/jquery-mobile/

que es una gran solución, pero es más menú/página centrada, y me gustaría tener ambos elementos para ser listas dentro de una sola página.

estaba pensando algo en la línea de:

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

nadie ha llegado con una solución viable?

Gracias

Answer 1

miren iScoll 4; puede no ser jQuery, pero es un gran complemento de JavaScript para desplazamiento móvil.

deberá añadir un identificador a cada UL y adjuntar un desplazamiento para cada uno por separado como esto:

Con tu ejemplo sería algo como lo siguiente:

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

espero que esto ayude!

Answer 2

jquery mobile hoja de ruta http://jquerymobile.com/roadmap/ dice scolling independiente debe llegar en la versión 1.7

Como solución truco tal vez la adición de los divs a través de un iframe puede ofrecer una solución torpe.