分享我在BlogJava博客中加入Ajax动态效果的方法. --BlogJava是我见过国内最自由的BSP了!

分享我在BlogJava博客中加入Ajax动态效果的方法. --BlogJava是我见过国内最自由的BSP了!

 

其实一直都知道可以在BlogJava后台设置中添加页首和页脚部分的html代码来实现访问统计之类的效果,
今天在看JQuery的书的时候突然想到BlogJava是不是允许自己写JavaScript代码呢,于是就试了一下,

折腾了一个中午的成果就是,现在我的博客主页实现了Ajax动态载入文章,
只要点击"阅读全文"的链接,就会直接在当前页面加载文章的全文.

欢迎点击到我的首页去试试效果: http://www.blogjava.net/jayslong/

加在页脚的代码如下:

 1 <!--  直接在首页显示文章  -->
 2 < script type = " text/javascript " >
 3 $(document).ready( function () {
 4  $("a:contains('阅读全文')").click(function(e){
 5    e.preventDefault();
 6    $(e.target).hide();
 7    var url = e.target.href;
 8    $(e.target).next().remove();
 9    $(e.target).after("<div>loading</div>");
10    $(e.target).next().after("<div></div>");
11    $(e.target).next().next().hide();
12    $(e.target).next().next().load(url+" .post", function(){
13      $(e.target).next().remove();
14      $(e.target).next().slideDown(5000);
15    });
16  });
17} );
18 </ script >
19 <!--  直接在首页显示文章 (结束)  -->

另外还有一个前提是要应用JQuery的包,我随便找了个加载速度挺快的包, 加到页首去了:

< script src = " http://tuan.hao123.com/static/public/js/jquery-1.4.2.min.js " ></ script >

不知道现在才用到这个功能在这里是不是算out了..
欢迎大家分享有意思的可以用在Blogjava上的JS代码哈.

2011-03-28 22:01 编辑:
在第13行代码的前面加了一句

$( " div a[href=#Post] " ).attr( " href " ,url + " #Post " );

解决了原来日志页面是相对链接,导致在首页点击回复按钮无效的问题.
另外为今天早些时候页面js代码的失效表示抱歉,昨晚在改的时候睡着了,改了一半导致代码中有错无法执行..