JQuery Mobile swipe event через элементы div

Question

Я работаю над приложением, используя 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"), но,

Ищу для достижения этой схожей функциональности со списком дивы, и я до сих пор найти что-нибудь объяснить, как добиться этого.

Благодарим за любую помощь, которую вы можете предоставить или доступное решение для плагинов для достижения этой цели.

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';