Я борюсь с ситуацией и решил опубликовать здесь проблему, чтобы посмотреть, сможет ли кто-нибудь понять, где я ошибаюсь.
Идея того, что я делаю, заключается в следующем:
У меня есть страница (на самом деле это и приложение для iPad), которая позволяет пользователю прокручивать влево и вправо, двигаясь вперед и назад. Каждый раз, когда пользователь проводит пальцем влево (движется вперед), мы хотим показать ему новую страницу шириной 768 пикселей. Поскольку каждый div имеет ширину 768 пикселей и у нас может быть более 50 div, идея заключалась в том, чтобы удалить начальную страницу.
Таким образом, у меня всегда на экране 4 элемента div, за раз отображается только 1 элемент div. Итак, при запуске у нас есть что-то вроде ниже.
<content>
<div id='wrapper_1'>content</div>
<div id='wrapper_2'>content</div>
<div id='wrapper_3'>content</div>
<div id='wrapper_4'>content</div>
</content>
Когда пользователь проводит пальцем вправо, я хочу удалить обертку_1, добавить обертку_5 и, в основном, правильно все переставить.
Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я удаляю ведущий div, мой контентный div явно меняет ширину, и я теряю страницу, на которую смотрю. Таким образом, очевидное «исправление», на мой взгляд, заключалось в том, чтобы изменить положение контента с учетом только что удаленного элемента div.
Однако я борюсь с методом смещения jquery. Либо я неправильно использую это, либо я что-то упускаю из виду.
$('#wrapper_'+this.pageArray[0]).remove();
this.pageArray.shift();
var n = pageIndex - 1;
var t = 768 * n;
$("#content").offset({ left: t})
Я отслеживаю, какие элементы div находятся на странице, сохраняя их в массиве. Каждый раз, когда я добавляю страницу, я в основном делаю remove() для div, а затем сдвигаю массив. Теперь проблема в том, что смещение не работает так, как я ожидал. В основном не похоже, что левые значения дают мне абсолютную позицию x.
Во-первых, кажется ли такой подход правильным? Во-вторых, мое понимание/реализация смещения неверно?
Редактировать:
Для всех, кто следит за темой, кажется, что моей самой большой проблемой было то, как я справлялся с жестикулированием. Похоже, что были некоторые конфликты событий, использование библиотеки жестов, безусловно, прояснило большую путаницу с моей стороны.
Ниже приведен мой обновленный код, который, похоже, работает хорошо. Не стесняйтесь критиковать подход.
<html>
<head>
<style>
.wrapper{
height: 200px;
width: 600px;
overflow: hidden;
}
.button_wrapper{
width: 600px;
}
#content{
background-color: #F00;
height: 200px;
width: 3000px;
}
.page{
width: 200px;
height: 200px;
float: left;
background-color: #FF0;
}
#wrapNext{
width: 100px;
height: 20px;
background-color: #FF0000;
float: right;
cursor: pointer;
}
#wrapPrev{
width: 100px;
height: 20px;
background-color: #FF0000;
float: left;
cursor: pointer;
}
.site_wrap > .slides_wrap {
margin-bottom: 1em;
margin-left: -8px;
margin-right: -8px;
}
.img_slides_wrap {
width: 784px;
border: 8px solid #333333;
background-color: #444444;
overflow: hidden;
}
.img_slide {
padding: 0;
}
.js .img_slide {
/* Overide template's height transitions. */
width: 100%;
height: auto;
}
.slide_buttons_index {
text-align: center;
}
.notransition,
.notransition .slide {
-webkit-transition-duration: 0 !important;
-moz-transition-duration: 0 !important;
-ms-transition-duration: 0 !important;
transition-duration: 0 !important;
-webkit-transition-delay: 0 !important;
-moz-transition-delay: 0 !important;
-ms-transition-delay: 0 !important;
transition-delay: 0 !important;
}
@media screen and (max-width: 640px) {
.img_slides_wrap {
width: 100%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
}
</style>
</head>
<body>
<div class='wrapper'>
<div id='content' class='img_slides_wrap slides_wrap wrap'>
<div id='page0' class='page'>Page 0</div>
<div id='page1' class='page'>Page 1</div>
<div id='page2' class='page'>Page 2</div>
<div id='page3' class='page'>Page 3</div>
</div>
</div>
<div class='button_wrapper'>
<div id='wrapPrev'>
<div id="prev">Previous</div>
</div>
<div id='wrapNext'>
<div id="next">Next</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.event.swipe.js"></script>
<script>
$(document).ready(function() {
var counter = 4;
var selectedPageIndex = 1;
var lastKnownX = 0;
var articleListLength = 10; // testing
$("#next").click(function() {
showNext();
});
$("#prev").click(function() {
showPrev();
});
function showNext(){
if (counter <= articleListLength + 1){
// first remove the leading div
var leadingDiv = $('#page'+(counter - 4));
leadingDiv.animate({ width: '0px' }, 250, function() {
$(this).remove();
});
var html = "<div id='page"+counter+"' class='page img_slide slide'>Page "+counter+"</div>";
$('#content').append(html);
counter ++;
selectedPageIndex ++;
}
}
function showPrev(){
if(counter >= 5){
var target = selectedPageIndex - 1;
var leadingDiv = $('#page'+(target));
var newLeadingDiv = $('#page'+(target - 1));
var html = "<div id='page"+(target-1)+"' class='page img_slide slide' style='width:0px'>Page "+(target-1)+"</div>";
$(html).insertBefore('#page'+(selectedPageIndex-1));
$('#page'+(target - 1)).animate({ width: '200px' }, 250, function() {
});
var removalTarget = $('#page'+(selectedPageIndex + 2));
removalTarget.remove();
counter --;
selectedPageIndex --;
}
}
var wrap = jQuery('.slides_wrap'),
width = wrap.width();
$('#content')
.on('swipeleft', function(e) {
showNext();
})
.on('swiperight', function(e) {
showPrev();
})
});
</script>
</html>
display:none) и переключать все видимости на касание/пролистывание/прокрутка/какое-либо событие? - person Nanne schedule 21.01.2013