我正在使用phonegap
和jquery-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列表实现这个类似的功能,我还没有找到解释如何实现这一点的任何东西。
感谢您提供的任何帮助或可用的插件解决方案来实现此目的。
答案 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';