あいかわらずjQueryが楽しくて
前回の記事でフェード効果でページ内への読み込みをしました
今回はそれをちょっと改良
READMORE 変更点は, aタグでリンクできるところと, その他もろもろです
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>Load page sample</title>
<style type="text/css">
<!--
.loading{
background-image:url('loading.gif');
background-repeat:no-repeat;
background-position: center;
}
-->
</style>
<script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function() {
$('a.inline').click( function(){
var navi = $(this).attr("href");
$('#container').fadeOut("fast", function() {
$(this).empty().addClass('loading').show();
$(this).load(navi, function() {
$(this).removeClass('loading');
$(this).hide();
$(this).fadeIn("fast");
});
});
return false;
});
});
// -->
</script>
</head>
<body>
<a href="a.html" class="inline">aaa</a>
<a href="b.html" class="inline">bbb</a>
<div id="container" style="height:800px"></div>
</body>
</html>
htmlのソースでは普通にaタグでリンク先を指定しているだけです
しかしaタグのclickイベントを拾い, href属性を取得して, jQuery側でloadします
そしてclickイベントのコールバック内でfalseを返すことで, clickのイベントを親元に送りません
こうすることで, ブラウザ側でのロードを禁止できます
Thickboxなどが似たようなことをしているのでしょうかね
ソース見たことないけども