其实一直都知道可以在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的包,我随便找了个加载速度挺快的包, 加到页首去了:
不知道现在才用到这个功能在这里是不是算out了..
欢迎大家分享有意思的可以用在Blogjava上的JS代码哈.
2011-03-28 22:01 编辑:
在第13行代码的前面加了一句
$("div a[href=#Post]").attr("href",url+"#Post");
解决了原来日志页面是相对链接,导致在首页点击回复按钮无效的问题.
另外为今天早些时候页面js代码的失效表示抱歉,昨晚在改的时候睡着了,改了一半导致代码中有错无法执行..
posted on 2011-03-25 15:22
ApolloDeng 阅读(2885)
评论(8) 编辑 收藏 所属分类:
分享 、
Js/JQuery/Ajax 、
Web