动态滚动框

我试图实现动态滚动框在http://demo.webdeveloperplus.com/dynamic-scrollbox/动态滚动框

发现，但它具有保持遍地得到相同的列表的问题。所以我只想查看我的aa.html文件中的项目。

我aa.html文件有以下几点：

<p>Item1</p> 
<p>Item2</p> 
<p>Item3</p> 
<p>Item4</p> 
<p>Item5</p> 
<p>Item6</p> 
<p>Item7</p> 
<p>Item8</p>

和我的执行脚本是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> 
<head profile="http://gmpg.org/xfn/11"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Scrolling Dynamic Content box</title> 
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script> 
<script type="text/javascript"> 
$('document').ready(function(){ 
    updatestatus(); 

}); 
function updatestatus(){ 
    //Show number of loaded items 
    var totalItems=$('#content p').length; 
    $('#status').text('Loaded '+totalItems+' Items'); 
    $.get('aa.html', function(data) { 
     var dom = $('<div/>').append(data); 
     var tnoi = dom.find('p').length; 
     alert("Total number of items = " + tnoi + ", Items of Current file = " + totalItems); 
      if(totalItems < tnoi) 
       scrollalert(); 

}); 

} 
function scrollalert(){ 
    var scrolltop=$('#scrollbox').attr('scrollTop'); 
    var scrollheight=$('#scrollbox').attr('scrollHeight'); 
    var windowheight=$('#scrollbox').attr('clientHeight'); 
    var scrolloffset=20; 
    if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) 
    { 
     //fetch new items 
     $('#status').text('Loading more items...'); 
     $.get('aa.html', '', function(newitems){ 
      $('#content').append(newitems); 
      updatestatus(); 
     }); 
    } 
    setTimeout('scrollalert();', 1500); 
} 
</script> 

<style type="text/css" > 
    #container{ width:400px; margin:0px auto; padding:40px 0; } 
    #scrollbox{ width:400px; height:300px; overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; } 
    #container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;} 
</style> 
</head> 
<body> 
    <div id="container"> 
    <div id="scrollbox" > 
     <div id="content" > 

     </div> 
    </div> 
    <p><span id="status" ></span></p> 
</div> 

<hr /> 
<p> 
Demo Provided By: <a href="http://webdeveloperplus.com" title="Web Developer Plus - Ultimate Web Development & Design Resource" >Web 
Developer Plus</a></p> 
</body> 
</html>

来源

2012-11-28 A Zakaria

的问题是，你总是从同一个静态的HTML网址$.get()。您需要执行以下任一操作：

使用指向某个动态URL的URL，其中服务器返回每个GET的连续批次项目。（尽管这有点问题，因为它需要服务器跟踪客户端状态。）

在JavaScript端保留一个计数器，每增加一个$.get()使用计数器每次构建一个不同的URL。例如

var batch=0; //at outer scope, or the top of your namespace 
... 
    batch += 1 
    $.get('aa'+batch+'.html', '', function(newitems){

然后，你可以有一组静态文件：aa1.html，aa2.html，aa3.html，包含连续的批次。或者你可以有一个动态的脚本，需要一批参数基于评论

 $.get('aa?batch='+batch, '', function(newitems){

更新：

这听起来像你所需要的全部内容，只是加载到滚动框一次。

如果你简化你的脚本一些简单的东西，如：

<script type="text/javascript"> 
    $('document').ready(function(){ 
     $.get('aa.html', function(data) { 
      $('<div/>').append(data); 
     }); 
    }); 
</script>

来源

2012-11-28 07:57:20

但两项建议不适合我！因为我打算让我们的管理员助理插入新闻的单个html页面。好的，如果这不起作用，任何人都可以建议一个类似的脚本？所有我需要的是在一个页面中创建两个滚动框，每个框将从单独的HTML文件中读取新项目。任何替代方法（HTML，Java，PHP，Flash ...）都被接受。谢谢！ –

查看更新回答 –

谢谢Eamonn。我最终创建了一个带有表格的容器，并且我会要求助手手动编辑表格以添加新项目（当然使用cms）..所以感谢您的努力..我会将您的回答标记为答案。 –

回答

相关问题