Question

所以，我正在整理一个Web应用程序的框架，允许人们在视图之间水平滑动。我正在寻找类似于ubersocial的布局，这是一款适用于Android的应用程序。在过去的几天里，我尝试了一些不同的框架（包括自定义框架的开始，由于不良溢出而无法工作：移动设备上的自动支持）。 JqMobi似乎让我最接近。

以下是一些代码：

<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 Kitchen Sink =（http://jqmobi.com/testdrive/#webslider）
jqMobi API Doc =（http://api.jqmobi.com/#jqUi）

但我真的很难找到我正在寻找的答案。使用记录的方法，我似乎无法到达任何地方。好像我可以在不打破旋转木马的情况下将一个可独立滚动的div放到一个.MainView元素中，我会很高兴。建议？

/ * ** * ** * ** * ** * **** 固定的 * ** * ** * ** * ** * **** /

在混乱和沮丧的混乱网络之后，我最终通过向.MainDiv元素添加第二个缓冲区来使其工作，以便滚动条不会影响轮播。

我还遇到了iOS 5的糟糕版本（你可能还记得以前曾经工作过），这可能只是通过简单地向.MainView元素添加overflow：auto并给它们一个固定的高度来修复。我首先尝试禁用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>

Answer 1

发布在appMobi的论坛 - 但我们是东部标准时区的美国公司 - 所以我们在你工作的时候睡着了......很高兴你写了以下内容：）

并非所有人都在乎

jqMobi - Scouseler里面的Scroller div？

1 个答案: