1

私は AJAX と history.js がまったく初めてです。ナビゲーション項目がクリックされたときに AJAX を使用してコンテンツ領域を変更し、[戻る] ボタンの機能を保持し、ユーザーが mysite.com/page2 などの直接 URL を入力できるようにする基本的なサイトを作成して、それを使用したいと考えています。コンテンツ領域に page2 をロードします。

私は自分が何をしているのか分かりませんが、history.js (ここに見られるように) は私が必要としているもののように見えます. それを試してみると、ここからどこへ行くべきかわかりません。どんな助けでも大歓迎です！

--編集されたjQueryスクリプト

<html>
<head>
    <title>test page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <!-- jQuery ScrollTo Plugin -->
    <script defer src="http://balupton.github.com/jquery-scrollto/scripts/jquery.scrollto.min.js"></script>
    <!-- History.js --> 
    <script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
    <!-- This Gist -->
    <script defer src="http://gist.github.com/raw/854622/ajaxify-html5.js"></script>  

    <script type="text/javascript">
        $(window).bind("statechange", function(e) {
            var State = window.History.getState();
            if (window.console && window.console.log) {
                console.log("popstate", State, window.location.href);
            }
            $("#changehere").text(typeof State.data.changehere !== 'undefined' ? State.data.changehere : State.url);
            $('.nav').click(function() {
                alert(this);
                window.History.pushState({changehere:this}, this + 'title', '?' + this);
            })
        })
    </script>
    <style type="text/css">
        #one {
            height: 300px;
            width: 1000px;
            background: #a0a0a0;
        }
    </style>
</head>

<body>

    <div id="one">
        <a href="xml/first.html" id="first">change1</a>
        <a href="xml/second.html" id="second">change2</a>
        <a href="xml/third.html" id="third">change3</a>
    </div>
    <div id="changehere">
        start
    </div>

</body>

4

1 に答える 1

0

相対リンクのすべてのクリックをインターセプトし、クリックごとに History.pushState を呼び出す必要があります。https://github.com/browserstate/ajaxifyを参照してください。

関連する部分は次のとおりです。

    $.fn.ajaxify = function(){
        // Prepare
        var $this = $(this);

        // Ajaxify
        $this.find('a:internal:not(.no-ajaxy)').click(function(event){

            // Prepare
            var
                $this = $(this),
                url = $this.attr('href'),
                title = $this.attr('title')||null;

            // Continue as normal for cmd clicks etc
            if ( event.which == 2 || event.metaKey ) { return true; }

            // Ajaxify this link
            History.pushState(null,title,url);
            event.preventDefault();
            return false;
        });

        // Chain
        return $this;
    };
于 2013-06-11T10:43:28.423 に答える