使用AJAX來存取資料後，常常會遇到上下頁沒有辦法記錄歷程。
以下是建議解決這個議題的各種套件。
以下是建議解決這個議題的各種套件。
- Asual: http://www.asual.com/jquery/address/
- AJAX SEO Demo http://lab.laukstein.com/ajax-seo/
- Events http://www.asual.com/jquery/address/samples/events/#contact
- API http://www.asual.com/jquery/address/samples/api/#
- jQuery BBQ: http://benalman.com/projects/jquery-bbq-plugin/
- History: http://plugins.jquery.com/project/history
- jQuery hashchange: http://benalman.com/projects/jquery-hashchange-plugin/
- ReallySimpleHistory: http://code.google.com/p/reallysimplehistory/
最後選擇Asual address套件:
範例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Address - Deep linking for the masses</title>
<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.address-1.4.js"></script>
<script>
$(function(){
$.address.change(function(event) {
// do something depending on the event.value property, e.g.
// $('#content').load(event.value + '.xml');
console.log("address.change" + event.value);
});
$('a').click(function() {
//record address
var link = $(this).attr('href').replace(/^#/,'');;
$.address.autoUpdate(false).value(link);
});
});
</script>
</head>
<body>
<a href="#a" >a</a>
<a href="#b">b</a>
<a href="#c" >c</a>
</body>
</html>
此元件提供三種Callback Event，分別為change,externalChange,internalChange。
觀看你的使用情況，主要是externalChange可能你區別出是改變瀏覽器網址觸發的事件，非常好用，不過目前測試情況要多偵測出externalChange事件需要綁定每個link元素的click事件後加入
沒有留言:
張貼留言
留個話吧:)