带有Ajax加载内容的无限可滚动Div？
9 html javascript css ajax gwt
我想在GWT中实现一种名为scrollable div的技术.我想要做的是以下内容.如果用户在我的页面上,他只能看到视口(图像中的绿色框).此视口中的所有DOM元素在页面加载时对用户可见.在页面加载页面加载后(图像中的蓝色框),尚未加载不在视口上的Alle DOM元素.
如果用户拖动并移动视口,则所有dom元素都将变为可见,这些元素将进入视口.如果它们在视口上,则将通过ajax加载.
用户可以放大和缩小视口,使其变得越来越大.此外,如果用户不可见且因此未加载的元素变得可见,则必须通过ajax加载并显示在视口上.
我如何用GWT实现这个？
如果用户加载页面,它看起来像下图:
用户可以将视口拖动到8个方向.这些是顶部,右上,右下,右下,底部,左下,左和左上.下图显示了向左移动.当视口移动时,新内容应该加载ajax.
视口也可以放大.在这种情况下,还应加载新内容.
视口也可以缩小.请注意,视口必须具有固定的尺寸.只有内容应该是可缩放的.
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_tbodyAJAX响应,例如:
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;
}
并且在这个元素内部div可以滚动的Bigger .
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>
另外不要忘记为元素的所有边设置滚动控件,例如我只有底线控件,如:
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);
}
我没有对此进行测试,无论如何你将不得不玩这个.希望我能指出你正确的方向.
| 归档时间： |
|
| 查看次数： |
1273 次 |
| 最近记录： |