* ハッシュチェンジ [#z1ed0c56]
ハッシュチェンジによるページング例。
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.min.js" type="text/javascript"></script>
<script src="http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js" type="text/javascript"></script>
</head>
<body>
<dl id="list">
<dt>no</dt><dd>n/a</dd>
<dt>name</dt><dd>n/a</dd>
<dt>age</dt><dd>n/a</dd>
</dl>
<hr />
<div id="pager">
<a href="http://localhost/1">page 1</a>
<a href="http://localhost/2">page 1</a>
</div>
<script>
$(function () {
//
function goPage(num) {
console.log('called goPage(): ' + num);
$.ajax({
type : 'GET',
url : './' + num + '.json',
datatype : 'json',
success : function (data) {
var dl = $('#list');
dl.children().remove();
for ( k in data ) {
var dt = $('<dt></dt>');
var dd = $('<dd></dd>');
dt.append(k);
dd.append(data[k]);
console.log(dt);
dl.append(dt);
dl.append(dd);
}
},
error : function (xhr, message) {
console.log('ERROR: ' + message);
}
});
}
//
$(window).hashchange(function (){
var hash = decodeURIComponent(location.hash);
var num = hash.replace('#page', '') || 1;
if (isNaN(num)) num = 1;
goPage(num);
});
//
$(window).hashchange();
//
$('#pager').find('a').each(function(){
var hash = $(this).attr('href').replace('http://localhost/', '#page');
$(this).attr({ href : hash });
});
});
</script>
</body>
</html>