«

»

3月 29

pjaxのサンプル

このエントリーを含むはてなブックマークはてなブックマーク - pjaxのサンプル Googleブックマークに追加 このエントリをつぶやくこのWebページのtweets

pjaxの一番単純なサンプル

デモ

ソース
simple.html

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.0.js"></script>
    <script type="text/javascript" src="jquery.pjax.js"></script>
    <script type="text/javascript">
        $(document).pjax('a.link', {container:'#content', fragment:'#content'});
    </script>
</head>
<body>
<a href="simple.html" class="link">page1</a>
<a href="page2.html" class="link">page2</a>
<a href="page3.html" class="link">page3</a>
<div id="content">
    <h1>page1</h1>
</div>
</body>
</html>

page2.html

<html>
<head>
</head>
<body>
<div id="content">
    <h1>page2</h1>
</div>
</body>
</html>

page3.html

<html>
<head></head>
<body>
<div id="content">
    <h1>page3</h1>
</div>
</body>
</html>

ページ遷移時にエフェクトをつけたもの

デモ

index.html

<html>
<head>
    <script type="text/javascript" src="jquery-1.9.0.js"></script>
    <script type="text/javascript" src="jquery.pjax.js"></script>
    <script type="text/javascript">
        //リンククリック時
        $(document).on("click", "a.link", function(e){
                    e.preventDefault();
                    var href = $(this).attr("href");
                    //フェードアウト
                    $("#content").animate({opacity:0}, 'fast', function(){
                        $.pjax({url:href, container:"#content", fragment:"#content", timeout:1000});
                    });
                }
        );

        $(document).on('pjax:end', function() {
            $('#content').animate({
                opacity : 1
            }, 'fast');
        });
    </script>
</head>
<body>
<a href="index.html" class="link">page1</a>
<a href="page2.html" class="link">page2</a>
<a href="page3.html" class="link">page3</a>
<div id="content">
    <h1>page1</h1>
</div>
</body>
</html>

2 comments

  1. aaharu

    サーバー側のソースは載せないんです?

    1. aaharu

      よく見たらこれサーバーで何もしてませんでしたね。サーセン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次の HTMLタグおよび属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>