YanoRyuichi.com/
Wiki
Blog
GitHub
Sandbox
開始行:
* ハッシュチェンジ [#z1ed0c56]
** ハッシュチェンジとは？ [#u2f776b3]
- Ajaxにより画面遷移しないでページ内容を書き換える事が可...
- その際にURLも一緒に変わらないと、一意なURLが作れない、...
- この問題を解決する為に、ページ内容を書き換えるリンクを...
** ハッシュチェンジによるページングの例 [#o1524299]
- ページャーである「page 1」「page 2」のリンクをクリック...
- その際、URLは「http://localhost/#page1」「http://localh...
- なお、ここではjQueryのハッシュチェンジイベントモジュー...
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jqu...
</script>
<script src="http://github.com/cowboy/jquery-hashchang...
type="text/javascript"></script>
</head>
<body>
<dl id="list"></dl>
<hr />
<div id="pager">
<a href="http://localhost/1">page 1</a> <a href="http:...
</div>
<script type="text/javascript">
$(function () {
// Ajaxによるページ内容書き換え ----------------------...
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>'), dd = $('<dd></dd>');
dt.append(k); dd.append(data[k]);
dl.append(dt); dl.append(dd);
}
},
error : function (xhr, message) { console.log('ERR...
});
}
// ハッシュチェンジ時のイベントハンドラーを登録 ------...
$(window).hashchange(function (){
var hash = decodeURIComponent(location.hash);
var num = hash.replace('#page', '') || 1;
if (isNaN(num)) num = 1;
goPage(num);
});
// ページロード時の初期化 ----------------------------...
$(window).hashchange();
// SEO対策のURLをハッシュに変更 ----------------------...
$('#pager').find('a').each(function(){
var hash = $(this).attr('href').replace('http://loca...
$(this).attr({ href : hash });
});
});
</script>
</body>
</html>
*** 説明 [#la669784]
- (2)でハッシュイベント時のイベントハンドラーとして、(1)...
- (3)でページロード時の初期化を行い、最初にこのページを開...
- (4)は（JavaScriptを認識しないクローラーがリンクを辿れる...
** 参考 [#nf2fd0fa]
:AJAXサイトをクローラブルにする - 検索エンジンフレンドリ...
:JQUERY HASHCHANGE EVENT | http://benalman.com/code/proje...
終了行:
* ハッシュチェンジ [#z1ed0c56]
** ハッシュチェンジとは？ [#u2f776b3]
- Ajaxにより画面遷移しないでページ内容を書き換える事が可...
- その際にURLも一緒に変わらないと、一意なURLが作れない、...
- この問題を解決する為に、ページ内容を書き換えるリンクを...
** ハッシュチェンジによるページングの例 [#o1524299]
- ページャーである「page 1」「page 2」のリンクをクリック...
- その際、URLは「http://localhost/#page1」「http://localh...
- なお、ここではjQueryのハッシュチェンジイベントモジュー...
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jqu...
</script>
<script src="http://github.com/cowboy/jquery-hashchang...
type="text/javascript"></script>
</head>
<body>
<dl id="list"></dl>
<hr />
<div id="pager">
<a href="http://localhost/1">page 1</a> <a href="http:...
</div>
<script type="text/javascript">
$(function () {
// Ajaxによるページ内容書き換え ----------------------...
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>'), dd = $('<dd></dd>');
dt.append(k); dd.append(data[k]);
dl.append(dt); dl.append(dd);
}
},
error : function (xhr, message) { console.log('ERR...
});
}
// ハッシュチェンジ時のイベントハンドラーを登録 ------...
$(window).hashchange(function (){
var hash = decodeURIComponent(location.hash);
var num = hash.replace('#page', '') || 1;
if (isNaN(num)) num = 1;
goPage(num);
});
// ページロード時の初期化 ----------------------------...
$(window).hashchange();
// SEO対策のURLをハッシュに変更 ----------------------...
$('#pager').find('a').each(function(){
var hash = $(this).attr('href').replace('http://loca...
$(this).attr({ href : hash });
});
});
</script>
</body>
</html>
*** 説明 [#la669784]
- (2)でハッシュイベント時のイベントハンドラーとして、(1)...
- (3)でページロード時の初期化を行い、最初にこのページを開...
- (4)は（JavaScriptを認識しないクローラーがリンクを辿れる...
** 参考 [#nf2fd0fa]
:AJAXサイトをクローラブルにする - 検索エンジンフレンドリ...
:JQUERY HASHCHANGE EVENT | http://benalman.com/code/proje...
ページ名:
