其實一直都知道可以在BlogJava后臺設置中添加頁首和頁腳部分的html代碼來實現(xiàn)訪問統(tǒng)計之類的效果,
今天在看JQuery的書的時候突然想到BlogJava是不是允許自己寫JavaScript代碼呢,于是就試了一下,
折騰了一個中午的成果就是,現(xiàn)在我的博客主頁實現(xiàn)了Ajax動態(tài)載入文章,
只要點擊"閱讀全文"的鏈接,就會直接在當前頁面加載文章的全文.
歡迎點擊到我的首頁去試試效果: http://m.tkk7.com/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的包,我隨便找了個加載速度挺快的包, 加到頁首去了:
不知道現(xiàn)在才用到這個功能在這里是不是算out了..
歡迎大家分享有意思的可以用在Blogjava上的JS代碼哈.
2011-03-28 22:01 編輯:
在第13行代碼的前面加了一句
$("div a[href=#Post]").attr("href",url+"#Post");
解決了原來日志頁面是相對鏈接,導致在首頁點擊回復按鈕無效的問題.
另外為今天早些時候頁面js代碼的失效表示抱歉,昨晚在改的時候睡著了,改了一半導致代碼中有錯無法執(zhí)行..
posted on 2011-03-25 15:22
ApolloDeng 閱讀(2903)
評論(8) 編輯 收藏 所屬分類:
分享 、
Js/JQuery/Ajax 、
Web