也無法直接給一個網址，就直接到某個AJAX動態產生的頁面內容。
當然，如果有經過其它處理，也是可以達到，
jQuery history plugin 就是這樣的一個 plugin。
官方網站：http://tkyk.github.com/jquery-history-plugin/
官方範例：http://www.serpere.info/jquery-history-plugin/samples/
這邊我也寫了個簡單的測試範例：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery history plugin 測試</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.history.js"></script>
<script type="text/javascript">
$(function(){
function loadCon(hash)
{
$('title').html(hash);
var con = '';
switch(hash){//為了方便測試，這邊直接將動態寫在這個頁面。實際應用時，可更換為AJAX request
case 'page1':default:
con = '第1頁內容';
break;
case 'page2':
con = '第2頁內容';
break;
case 'page3':
con = '第3頁內容';
break;
}
$('#con').html(con);
}
$.history.init(//初始化jQuery history plugin
loadCon,
{ unescape: ",/" }
);
$('a').click(function(){//此例中，href已設定錨點，所以可以省略$.history.load(url)
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
});
$('span').click(function(){
var url = $(this).attr('id');
$.history.load(url);//此例中，不可以省略$.history.load(url)
});
});
</script>
<style type="text/css">
span {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<a href="#page1">第1頁</a><br />
<a href="#page2">第2頁</a><br />
<a href="#page3">第3頁</a><br />
<br />
<span id="page1">第1頁</span><br />
<span id="page2">第2頁</span><br />
<span id="page3">第3頁</span><br />
<div id="con" style="margin-top:20px"></div>
</body>
</html>
程式說明：- jQuery.history.init(callback [, options])：初始化jQuery history plugin
callback：當網址的 hash 改變時，會呼叫執行的function
options：可設可不設，目前只有unescape可設定。 - jQuery.history.load(hash)：新增瀏覽記錄(上一頁、下一頁的記錄)。
hash：瞄點名稱。 - 34~37行：可不設jQuery.history.load，因為a標籤的href屬性已設定了瞄點。
- 39~42行：一定要設jQuery.history.load，因為點擊span標籤，不會自行產生瞄點瀏覽記錄，須靠jQuery.history.load產生。。
程式效果：
- 一開始的畫面。
- 依序點擊第1頁、第2頁、第3頁後，
可發現網址的瞄點跟著改面，
再查看上一頁的瀏覽記錄，都記錄下來了，如此便可以使用上一頁、下一頁的功能。
沒有留言:
張貼留言