android - div要素を介したJquery Mobileスワイプイベント

Question

私は を使用してアプリに取り組んでphonegapおりjquery-mobile、そのレイアウトは単純に 2 行のデータとテーブル内の約 50 列です。各水平スワイプで次のそれぞれの列を表示し、各垂直スワイプで各 1 行目の列に接続されたそれぞれの 2 行目を表示します。

例：

divA1  divB1  divC1  divD1  divE1  divF1  divG1  divH1  divI1  divJ1
divA2  divB2  divC2  divD2  divE2  divF2  divG2  divH2  divI2  divJ2

各水平スワイプで次の div が表示され、垂直スワイプでその下の 2div が表示されます。

（ を使用して）ナビゲーションの形式として異なるページ間をスワイプする方法は理解していますdata-role="page"が、

divのリストを使用してこの同様の機能を実現しようとしていますが、これを実現する方法を説明するものはまだ見つかりません。

これを達成するために提供できるヘルプ、または利用可能なプラグイン ソリューションに感謝します。

Answer 1

検討すべき概念は、スプライト シートとして知られています。レイヤー/ページdivsの単一のコンテナーにすべてを配置する必要があります。div次に、動的に制御され.styleた変更を使用して、スワイプの方向に基づいてdiv、ビューポートを基準にしてコンテナーを再配置します。.offsetたとえば、個人divsがwidth:100pxそれぞれの場合、左スワイプ イベントは次のようになります。

var el=document.getElementById("divContainer");
el.style.cssText ='left:'+ (el.offsetLeft-100) + 'px';

右にスワイプすると、ポジショニングが追加されます。

(el.offsetLeft+100)

アップ/ダウンは同じロジックに従います。

el.style.cssText ='top:'+ (offset top +/- positioning) + 'px';