Danh sách cuộn độc lập của jQuery Mobile

Question

Tôi đang tạo Ứng dụng web dành cho thiết bị di động bằng cách sử dụng khung công tác jQueryMobile yêu cầu 2 danh sách được hiển thị cho người dùng cạnh nhau. Việc bắt giữ ở đây là tôi muốn danh sách di chuyển độc lập với nhau để người dùng có thể chọn và mục từ danh sách bên trái và một danh sách khác từ danh sách tay phải mà không cần cuộn cả hai danh sách cùng một lúc.

Tôi đã điều tra các plugin sau cho điện thoại di động:

asyraf9.github.com/jquery-mobile/

mà là một giải pháp tuyệt vời, nhưng nó là nhiều đơn/trang trung tâm, và tôi sẽ muốn có cả hai phần tử để liệt kê trong một trang.

Tôi đã suy nghĩ một cái gì đó dọc theo dòng:

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

Đã có người khác đưa ra một giải pháp khả thi?

Cảm ơn

Answer 1

Hãy xem iScoll 4; nó có thể không phải là jQuery, nhưng nó là một plugin JavaScript tuyệt vời cho Mobile Scrolling.

Bạn sẽ thêm một ID để mỗi UL và đính kèm một cuộn để mỗi người riêng rẽ như thế này:

Với ví dụ của bạn, bạn sẽ là một cái gì đó dọc theo những dòng:

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

Tôi hy vọng điều này sẽ giúp!

Answer 2

JqueryMobile lộ trình http://jquerymobile.com/roadmap/ nói scolling độc lập sẽ đến phiên bản 1.7

Là một hack workaround có thể thêm divs qua một khung nội tuyến có thể cung cấp một giải pháp vụng về.