0

jquery モバイル ナビゲーションを実装したいと思います。ただし、jquery load() 関数から独自のものを作成します。history.js を見てきましたが、理解するのがとても難しいです。アドレスバーにページの正しい URL が表示されると便利です。誰かが私を正しい方向に押し進めるのを手伝ってください。

4

1 に答える 1

0

簡単な History.js の例を次に示します。

私たちのマークアップ。

<!DOCTYPE HTML>
<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery.history.js"></script>
<title>History.js</title>
</head>
<body>

        <a href="page1.html">Page 1</a>
        <a href="Page2.html">Page 2</a>
     <div id="content">
        <p>Content within this box is replaced with content from
            supporting pages using javascript and AJAX.</p>
    </div>
</body>
</html>

ジャバスクリプト。

$(function() {

            // Note: We are using a capital H instead of a lower 'h'
            var History = window.History; 
            if (!History.enabled) {
                // History.js is disabled for this browser.
                // This is because we can optionally choose to support HTML4 browsers or not.
                return false;
            }

            // Bind to StateChange Event
            History.Adapter.bind(window, 'statechange', function(e) {
                // Note: We are using statechange instead of popstate
                var State = History.getState();
                $('#content').load(State.url + " #content").html();
            });

            $('a').on('click',function(evt) {
                evt.preventDefault();
                History.pushState(null, $(this).text(), $(this).attr('href'));
            });
        });

そのスクリプトを head タグまたはページの下部に挿入します。基本的に、pages1.html と page2.html には content と呼ばれる div を含める必要があり、load from メソッドを使用してコンテンツを返します。$('#content').load(State.url + " #content").html();

それだけです。

于 2013-02-21T10:07:49.573 に答える