Jquery Mobile通过div元素滑动事件

时间:2013-03-08 05:23:19

标签: android android-layout cordova jquery-mobile

我正在使用phonegapjquery-mobile处理一个应用,其布局只有两行数据,表格中约有50列。 我希望每个水平滑动显示下一个相应的列和每个垂直滑动以显示与每个第一行列相关联的相应第二行。

示例:

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列表实现这个类似的功能,我还没有找到解释如何实现这一点的任何东西。

感谢您提供的任何帮助或可用的插件解决方案来实现此目的。

1 个答案:

答案 0 :(得分:0)

您应该探索的概念称为精灵表。您应该将所有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';