http://go.ascii.jp/?jq13
--------------------------------------------------------------------
フロント側html
--------------------------------------------------------------------
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").load($("ul.pager li a:first").attr("href")+" #content");
$("ul.pager li a:first").addClass("selected");
$("ul.pager li a").click(function(){
$("#content").html('<p class="loading"><img src="images/loading.gif" alt="" /></p>');
$("#content").data("file",$(this).attr("href"));
$('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
$("#content").load($("#content").data("file")+" #content");
})
$("ul.pager li a").removeClass("selected");
$(this).addClass("selected");
return false;
});
});
</script>
<style type="text/css">
#container{
width:500px;
margin:20px auto;
}
div.colmun{
width:500px;
border-bottom:1px solid #CCC;
}
div.colmun:after{
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
}
div.colmun div.img{
float:left;
width:60px;
border:1px solid #ccc;
padding:5px;
margin:5px;
display:inline;
}
div.colmun div.img img{
border:0;
}
div.colmun div.info{
float:left;
padding:5px;
width:400px;
}
div.colmun div.info h2{
margin:0;
color:#009AFF;
font-size:small;
}
div.colmun div.info ul{
margin:0;
padding:15px 0 0 15px;
}
div.colmun div.info li{
margin:0;
font-size:small;
}
p.loading{
text-align:center;
margin:10px;
}
ul.pager{
text-align:center;
padding:10px;
}
ul.pager li{
display:inline;
}
ul.pager li a{
border:1px solid #009AFF;;
color:#009AFF;;
font-weight:bold;
margin:2px;
padding:5px;
text-decoration:none;
}
ul.pager li a.selected{
background:#73C7FF;
}
</style>
</head>
<body>
<div id="container">
<h1><img src="images/header.jpg" alt="新着書籍" /></h1>
<div id="content">
<p class="loading"><img src="images/loading.gif" alt="" /></p>
</div>
<ul class="pager">
<li><a href="data1.html">1</a></li>
<li><a href="data2.html">2</a></li>
<li><a href="data3.html">3</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------
データのHTML
--------------------------------------------------------------------
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>data1</title>
</head>
<body>
<div id="content">
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868064-6">
<img height="80" width="56" alt="" src="./images/978-4-04-868064-6s.jpg"/>
</a>
</div>
<div class="info">
<h2>雲の世界の向こうをつかむクラウドの技術</h2>
<ul>
<li>発売日 ： 2009/11/06</li>
<li>定価 ： 1,890円</li>
<li>ISBN ： 978-4-04-868064-6</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868174-2">
<img height="80" width="56" alt="" src="./images/978-4-04-868174-2s.jpg"/>
</a>
</div>
<div class="info">
<h2>完全合格 ORACLE MASTER Silver DBA 11g 問題集</h2>
<ul>
<li>著者 ： 津田竜賜、有里恵、飯塚美香、伊藤尚子、ほか</li>
<li>発売日 ： 2009/11/10</li>
<li>定価 ： 3,129円</li>
<li>ISBN ： 978-4-04-868174-2</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868180-3">
<img height="80" width="56" alt="" src="./images/978-4-04-868180-3s.jpg"/>
</a>
</div>
<div class="info">
<h2>すぐわかる Excel2007 Windows7／Vista／XP 全対応</h2>
<ul>
<li>著者 ： 尾崎裕子</li>
<li>発売日 ： 2009/11/27</li>
<li>定価 ： 1,344円</li>
<li>ISBN ： 978-4-04-868180-3</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868181-0">
<img height="80" width="56" alt="" src="./images/978-4-04-868181-0s.jpg"/>
</a>
</div>
<div class="info">
<h2>すぐわかる Windows7</h2>
<ul>
<li>著者 ： 小野均</li>
<li>発売日 ： 2009/11/27</li>
<li>定価 ： 1,344円</li>
<li>ISBN ： 978-4-04-868181-0</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868293-0">
<img height="80" width="56" alt="" src="./images/978-4-04-868293-0s.jpg"/>
</a>
</div>
<div class="info">
<h2>Macを買ったら最初に読む本 Mac OS X v10.6 Snow Leopard 版</h2>
<ul>
<li>発売日 ： 2009/11/30</li>
<li>定価 ： 1,344円</li>
<li>ISBN ： 978-4-04-868293-0</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868252-7">
<img height="80" width="56" alt="" src="./images/978-4-04-868252-7s.jpg"/>
</a>
</div>
<div class="info">
<h2>Microsoftのクラウドコンピューティング Windows Azure入門</h2>
<ul>
<li>著者 ： 砂金信一郎、遠藤大樹、酒井達明、藤田昭人</li>
<li>発売日 ： 2009/11/30</li>
<li>定価 ： 2.730円</li>
<li>ISBN ： 978-4-04-868252-7</li>
</ul>
</div>
</div>
</div>
</body>
</html>
最終更新：2012年05月25日 23:40
