0

因此，我正在为一个允许人们在视图之间水平滑动的 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 的成功是否只是对溢出：自动的支持。

无论如何，我查看了以下文档：

  • 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 元素中，我会很高兴。建议？

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

在纠结和沮丧之后，我最终通过向 .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>
4

1 回答 1

0

发布在 appMobi 的论坛上——但我们是一家位于美国东部标准时区的公司——所以我们在你做这个的时候睡着了......很高兴你写了以下内容:)

似乎没有人在乎

于 2012-11-16T13:12:01.027 回答