jqMobi - скроллер div внутри карусели?

Question

Итак, я собираю фреймворк для веб-приложения, которое позволяет людям проводить пальцем по горизонтали между представлениями. Я ищу макет, похожий на 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) не дает мне прокручиваемый div для моих элементов.MainView, и не старше устройства iOS. Лучшее, что я могу получить - это карусель на панели, которая прокручивается, но элементы внутри панели не будут прокручиваться вместе. Это заставляет меня задуматься о том, был ли у меня успех iOS 5 только с поддержкой переполнения: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 (который, как вы помните, работал раньше), который, вероятно, можно было бы исправить, просто добавив 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>

Answer 1

Опубликовано на форумах в appMobi - но мы являемся американской компанией в восточном стандартном часовом поясе - так что мы спали, пока вы работали над этим... рад, что вы написали следующее:)

Не то, чтобы кому-то это казалось