jQuery Mobile獨立滾動列表

我使用jQueryMobile框架創建了一個移動Web應用程序，該框架需要向用戶並排顯示2個列表。這裏的要點是，我希望列表可以獨立移動，因此用戶可以從左側列表中選擇項目，並且可以從右側列表中選擇項目，而無需同時滾動兩個列表。jQuery Mobile獨立滾動列表

我已經調查了以下插件移動：

asyraf9.github.com/jquery-mobile/

這是一個很好的解決方案，但它更菜單/頁爲中心的，我會喜歡將這兩個元素都列爲單個頁面中的列表。

我想沿着線的東西：

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

有其他人拿出一個可行的解決方案？

謝謝

來源

2011-10-21 Matthew Merryfull

感興趣。任何解決方案呢？ – headkit

看看iScoll 4;它可能不是jQuery，但它是Mobile Scrolling的一個很棒的JavaScript插件。

你會一個ID添加到每個UL和附加滾動到每一個單獨像這樣：

你的榜樣，你會沿着這些路線的東西：

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

我希望這有助於！

來源

2011-10-21 02:51:17 dSquared

謝謝dSquared！我有一個玩弄周圍的實施，但不止一個滾動添加和UI變得非常緩慢。絕對是一個解決方案，但儘管對我而言不是一個可用的解決方案。 –

JqueryMobile路線圖http://jquerymobile.com/roadmap/說獨立scolling應在1.7版

到達作爲一個黑客攻擊的解決方法也許通過iframe添加的div可以提供一個笨拙的解決方案。

來源

2014-04-28 07:06:01 Gamemorize

jQuery Mobile獨立滾動列表

回答

相關問題