0

現在、jQuery モバイルでページを作成しています。カスタム JavaScript を 1 つのページにロードする必要があるため、pageInit関数を見つけました。ここに私が使用しているものの短い例があります:

page1.html:

<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page 1 Title</h1>
    </div>

    <div data-role="content">
        <a href="page2.html">go to page2</a>
        <p>Page 1 content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>Page 1 Footer</h4>
    </div>
</div>

page2.html:

<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Page 2 Title</h1>
    </div>

    <div data-role="content">
        <a href="page1.html">go to page1</a>
        <p id="addstuff">Page 2 content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>Page 2 Footer</h4>
    </div>
</div>

js.js

$(document).delegate('#page2', 'pageinit', function() {
    $('<div />', {
        html: 'Some text that was added via jQuery'
    }).appendTo('#addstuff');
});

そのため、page2.html で JavaScript を実行する必要があります。実際にはうまく機能します (div が作成され、テキストが表示されます)。しかし、リンクをクリックしてページを変更すると、jQuery が最初に URL のハッシュタグを呼び出していることがわかります。したがって、次のようになります。

example.org/page1.html#/page2.html

page1.html のリンクをクリックすると (ほんの数ミリ秒かもしれません)、次にリダイレクトされます

example.org/page2.html

IDが原因だと思います..しかし、pageInitにはこれが必要です（私の知る限り）。この動作は正常ですか? それとも私は何か間違ったことをしていますか？ハッシュタグを呼び出さないコマンドさえあるかもしれません。

4

1 に答える 1

1

どうぞ：

AJAX 経由で読み込まれたモバイル ページから、複数の内部ページを含むページにリンクする場合は、リンクに rel="external" または data-ajax="false" を追加する必要があることに注意してください。これは、URL の AJAX ハッシュを消去するために、フレームワークにページ全体のリロードを行うように指示します。AJAX ページはハッシュ (#) を使用して AJAX 履歴を追跡しますが、複数の内部ページはハッシュを使用して内部ページを示すため、これら 2 つのモード間でハッシュに競合が生じるため、これは重要です。

たとえば、複数の内部ページを含むページへのリンクは次のようになります。

< a href="multipage.html" rel="external">複数ページ リンク</a>

ソース: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument

于 2013-02-23T18:23:03.533 に答える