Бесконечное прокручиваемое Div с загруженным содержимым Ajax?

Я хочу реализовать метод под названием прокручиваемый div в GWT. Я пытаюсь сделать следующее. Если пользователь находится на моей странице, он может видеть только окно просмотра (зеленый квадрат на изображении). Все элементы DOM, которые находятся в этом окне просмотра, видны пользователю при загрузке страницы. Все элементы DOM, которые не находятся в окне просмотра, не были загружены после загрузки страницы на загрузку страницы (синие поля на изображении).Бесконечное прокручиваемое Div с загруженным содержимым Ajax?

Если пользователь перетаскивает и перемещает область просмотра, все элементы dom становятся видимыми, которые попадают в область просмотра. Если они находятся в окне просмотра, они будут загружены через ajax.

Пользователь может увеличивать и уменьшать видимость, чтобы сделать его больше и меньше. Кроме того, если элементы, невидимые для пользователя и, таким образом, не загруженные, становятся видимыми, они должны быть загружены через ajax и отображены в окне просмотра.

Как мне реализовать это с помощью GWT?

Если пользователь загружает страницу он выглядит следующим изображением:

enter image description here

Пользователь может перетаскивать и перемещать окно просмотра в 8 направлениях. Это верхний, верхний правый, правый, правый нижний, нижний, нижний левый, левый и верхний левый. На следующем изображении показано движение влево. Когда перемещение в окне просмотра нового содержимого должно быть загружено с помощью ajax.

enter image description here

Окно просмотра также может быть увеличено. В этом случае новый контент должен быть загружен также.

enter image description here

Окно просмотра также может быть увеличено из. Обратите внимание, что окно просмотра должно иметь фиксированные размеры. Только контент должен быть масштабируемым.

enter image description here

источник

2013-10-14 Anonymous

Действительно ли мой ответ работает на вас? –

@ dr.dimitru не пропустил много. –

в любом случае после того, как вы сделали - пожалуйста, оставите ссылку здесь, мы хотели бы видеть результат –

UPD: jsfiddle Пример: http://jsfiddle.net/hv57s/9/

UPD: jsfiddle с увеличения/уменьшения масштаба кнопок функциональностью: http://jsfiddle.net/hv57s/11/

ответ, основанный на этом примере: Indira.js Inifinite Scroll

<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')"> 
<table> 
    ... 
    <tbody id="scrollable_tbody"> 
    <tr> 
    ... 
    </tr> 
    </tbody> 
    <button id="load_button" onclick="load_more(page_number)">Show more</button> 
</div> 
<script> 
var scroll_el_id = 'scrollableDiv'; 
var element = $('#scrollableDiv'); 

$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){ 

    var scrollBottom = $(window).scrollTop() + $(window).height(); 
    var elementBottom = element[0].scrollHeight + element.offset().top; 

    if(scrollBottom >= elementBottom){ 
    eval($(element).attr('data-scroll-callback')); 
    $(window).unbind('scroll.' + scroll_el_id); 
    } 
}); 
</script>

Далее вы просто добавить к #scrollable_tbody AJAX-ответ, как:

function load_more(page){ 

    $.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,}) 
     .done(function(html) { 

      $('#scrollable_tbody').append(html); 
     }); 
}

UPD: Я думаю, вы должны установить большой размер для html,body как:

html, body{ 
    min-width: 8192px; 
    width: 8192px; 
    min-height: 8192px; 
    height: 8192px; 
}

И установите видовое окно в нужном размере.

Но, возможно, это будет проще, если вы будете установить некоторые обертку div сразу после body тег с

div.wrap{ 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
/*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/ 
    max-height: your_viewport_height; 
    min-height:your_viewport_height; 
    height:your_viewport_height; 
    max-width: your_viewport_width; 
    min-height:your_viewport_width; 
    height:your_viewport_width; 
}

и внутри этого элемента Bigger div который будет прокручивать.

div.huge{ 
    min-width: 8192px; 
    width: 8192px; 
    min-height: 8192px; 
    height: 8192px; 
}

HTML:

<html> 
<head> 
... 
</head> 
<body> 
    <div class="wrap"> 
    <div class="huge"> 
     ... 
    </div> 
    </div> 
</body> 
</html>

Также не забудьте установить прокрутки управления для всех сторон элементов, в примере я только Bottom контроль линии, что-то вроде:

var scrollBottom = $(window).scrollTop() + $(window).height(); 
    var elementBottom = element[0].scrollHeight + element.offset().top; 

    var scrollTop = $(window).scrollTop(); 
    var elementTop = element.offset().top; 

    var scrollRight = $(window).scrollLeft() + $(window).width(); 
    var elementRight = element[0].scrollWidth - element.offset().left; 

    var scrollLeft = $(window).scrollLeft(); 
    var elementLeft = element.offset().left; 

    if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){ 
    eval($(element).attr('data-scroll-callback')); 
    $(window).unbind('scroll.' + scroll_el_id); 
    }

Я не тестировал это, и в любом случае вам придется поиграть с этим. Надеюсь, я нахожу вас в правильном направлении.

источник

2013-10-15 01:08:02

Как мне установить размеры фона div, чтобы сделать его размер бесконечным во всех направлениях? –

Я думаю, что вы должны установить большой размер для html, body: –

@ stephan1001 См. Мой ответ update –

Бесконечное прокручиваемое Div с загруженным содержимым Ajax?

ответ

Смежные вопросы