そこで、ビュー間で水平方向にスワイプできるようにする Web アプリのフレームワークをまとめています。Android向けアプリのubersocialに似たレイアウトを探しています。ここ数日で、いくつかの異なるフレームワークを試しました (モバイルでのオーバーフローが不十分であるために機能しないカスタム フレームワークの開始を含む)。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 チートシート = (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 要素に 2 番目のバッファーを追加して、スクローラーがカルーセルに影響を与えないようにすることで、最終的に機能するようになりました。
また、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>