jqMobi - 旋轉木馬內的Scroller div？

所以，我正在組建一個Web應用程序框架，允許用戶在視圖之間水平滑動。我正在尋找類似於ubersocial的應用程序的佈局。在過去的幾天中，我嘗試了幾個不同的框架（包括定製框架的開始，由於溢出不佳而導致無法工作：移動設備上的自動支持）。 JqMobi似乎讓我最接近。jqMobi - 旋轉木馬內的Scroller div？

下面是一些代碼：

<script> 
    //jqMobi & jqUI scripts omitted for brevity 
    var carousel; 
    var scroller; 
    function init_carousel() 
    { 
     carousel = $("#carousel").carousel({ 
      preventDefaults: false 
     }); 

     scroller = $('newContainer').scroller(); 
    } 
    window.addEventListener("load", init_carousel, false); 
</script> 

<div id="jQUi"> 
    <div id="header"></div> 
    <div id="content"> 
     <!--scrolling="no" because I don't want the whole carousel to move--> 
     <div title="Main" id="main" class="panel" data-tab="navbar_home" scrolling="no"> 
      <div id="carousel" style="height:100%;width:100%;"> 
      <div id="View1" class="MainView" style="background: yellow;"> 
        <div id="newContainer" style="width: 100%;height: 100%; overflow: auto;> 
         <!--Lots of Content--> 
        </div> 
       </div> 
       <div id="View2" class="MainView" style="background: green;"></div> 
       <div id="View3" class="MainView" style="background: blue;"></div> 
       <div id="View4" class="MainView" style="background: pink;"></div> 
       <div id="View5" class="MainView" style="background: orange;"></div> 
      </div> 
     </div> 
    </div> 
</div>

所以，我有我的傳送帶所有設備的工作，我能夠在IOS 5不過，Android獲得完美的功能（2.2，2.3，4.0 &）是沒有爲我的.MainView元素提供可滾動的div，也不是老的iOS設備。我能得到的最好的是滾動的面板上的旋轉木馬，但面板內的元素不會滾動到一起。這讓我想知道iOS 5的成功只是支持overflow：auto。

無論如何，我已經看了下面的文檔：

jqMobi的cheatsheet =（http://www.appmobi.com/amdocs/lib/jqMobi_Cheat.pdf?r=9170）
jqMobi廚房水槽=（http://jqmobi.com/testdrive/#webslider）
jqMobi API文檔=（http://api.jqmobi.com/#jqUi）

但我已經麻煩真的得到我正在尋找的答案。使用記錄的方法，我無法真正看到任何地方。看起來好像如果我可以在不破壞旋轉木馬的情況下將獨立可滾動的div放入.MainView元素中，我會很好。建議？

/* ** * ** * ** * ** * ****FIXED* ** * ** * ** * ** * ****/

經過混亂和沮喪的糾結網絡之後，我最終通過向.MainDiv元素添加第二個緩衝區以使滾動條不影響傳送帶來工作。

我也有一個與iOS 5（其中，你可能還記得，曾經工作過）的糟糕的磨合，這可能是通過簡單地將overflow：auto添加到.MainView元素並給它們固定的高度來解決的。我首先嚐試禁用nativeTouchScroll，而滾動實際上非常好，所以我會堅持使用，而不是添加瀏覽器檢測條件。

<script> 
//Native touch disabled or iOS 5 breaks. 
$.feat.nativeTouchScroll = false; 

var carousel; 
//var scroller; 
function init_carousel() 
{ 
    carousel = $("#carousel").carousel({ 
     preventDefaults: false 
    }); 
} 

$.ui.ready(init_carousel); 

var scroller; 
$.ui.ready(function() 
{ 
    //Fetch the scroller from cache 
    scroller = $("#containerContainer").scroller(); 
}); 
</script> 


<style> 
.MainView 
{ 
    height: 100%; 
    overflow: hidden; 
} 
</style> 


<div id="carousel" style="height:100%;width:100%;"> 
    <div id="View1" class="MainView" style="background: yellow;"> 
     <div id="containerContainer"><div id="newContainer"></div></div> 
     </div> 
    <div id="View2" class="MainView" style="background: green;"></div> 
    <div id="View3" class="MainView" style="background: blue;"></div> 
    <div id="View4" class="MainView" style="background: pink;"></div> 
    <div id="View5" class="MainView" style="background: orange;"></div> 
</div>

來源

2012-11-16 Dom Ramirez

發佈在論壇的appMobi - 但我們是一家美國公司在東部標準時區 - 所以我們都睡着了的時候在這方面的工作？很高興你寫了如下:)

不是說有人好象並不在意

來源

2012-11-16 13:12:01

這是一個公平的問題。我並不打算批評appMobi（或其他任何人）。「不是任何人似乎都在乎」是我自己扭曲的笑話（伴隨着長期的挫折感和睡眠剝奪）。如果有其他人穿過它，我會繼續並將其刪除以使其更有用。 –

jqMobi - 旋轉木馬內的Scroller div？

回答

相關問題