2010年01月23日

jQueryでページング。

jQueryを用いてスムーズなページングをします。
メインHTML、id="content"の部分に"data1.html"のid="content"内の内容を読み込みます。

サンプルは近々公開します。


○スクリプト部分

$(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;
    })

○メインのHTML

<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>

data1.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>HALLO</h2>
                    <ul>
                        <li>日付 : 2009/11/06</li>
                        <li>名前 : 佐藤タロウ</li>
                        <li>年齢 : 25歳</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>


○css部分

#container{
}

p.loading{
    text-align:center;
    margin:10px;
}
ul.pager{
    text-align:center;
    padding: 0 10px 0 10px;
}
ul.pager li{
    display:inline;
}
ul.pager li a{
    border:1px solid #666666;;
    color:#666666;;
    font-weight:bold;
    margin:2px;
    padding:5px;
    text-decoration:none;
}
ul.pager li a.selected{
    background:#EEEEEE;
}

    • 0 Comment |
    • 0 Trackback |
    • Edit

この記事へのトラックバックURL

 

トラックバックはまだありません。

コメントはまだありません。

コメントする。

絵文字
 
星  顔