二 15

永不终止的blog

2009-02-15 21:34 , 7 Comments »

载入前截图

载入后截图，黄色部分为下一页的文章

主要功能：

1.当滚动到当前页面的底部时，自动载入下一页的文章，并无缝插入到本页适当位置。

2.新载入的文章内会以黄色标记，然后渐变为白色。

2.因利用ajax技术，所以完全无需刷新页面。

个人说明：

《精通JavaScript》里面有一节讲到的“永不终止的blog”，感觉很有趣，就像google阅读器那种无需翻页自动加载更多文章的效果。所以写了这个脚本，利用ajax在blogbus实现了这种效果。

区别主要有三点

1.用于blogbus

2.没有利用jquery库。

3.请求的不是RSS的xml文件。

此脚本是向服务器请求下一页的html，然后利用正则表达式对返回的responseText进行处理，如果利用原书中RSS格式的XML文件就更简单些，毕竟DOM遍历来得容易，但因暂时还没弄清楚如何向服务器请求含有更多的文章的XML，所以也只有用正则表达式这种死办法来完成了。

版权说明：

/**
* @fileoverview 此脚本用于博客大巴（blogbus），主要功能为利用AJAX技术实现无需翻页自动加载更多文章
* JavaScript.
*
* @author Will,Blog:http://lds2008.blogbus.com
* @version 1.0
*
*/
适用范围：
/**
* 主要说明：
* 本脚本基本适用于blogbus的大部分官方模板，以及在官方模板基础上修改而成的自定义模板。
* 判断是否适用的标准是：
* 查看模板代码,其中的主体日志结构（index部分）大致为：

*┌─ ul id="posts"
*│
*├─ li
*│   │  ┌ div class="postHeader"
*│   └─┤ div class="postBody"
*│       └ div class="postFooter"
*├─ li
*│   │  ┌ div class="postHeader"
*│   └─┤ div class="postBody"
*│       └ div class="postFooter"
*├─ li
*│   │  ┌ div class="postHeader"
*│   └─┤ div class="postBody"
*│       └ div class="postFooter"
*└─ /ul
*┌div class="pageNavi"
*└....

*/

其中概括起来就是有三个必要条件：

1.日志主体必须在<ul id=”posts”>里

2.</ul>后面必须有<div class=”pageNavi”>

3.每篇文章的<li>里面必须包含<div class=”postHeader”>

就这三个因素制约了这个脚本的适用范围和灵活性，如果今后找到好的办法，可能会改进这几点。

使用方法：

在自定义head里面加入以下代码：

Page 1 of 11