0

html / css / javascriptでアプリをビルドし、phonegapを使用してビルドしています。

それで、私は最初にページ間のナビゲーションを単純にする必要がありました。私はこれを試しました：

索引：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        <a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>

test.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

結果：ボタンをクリックすると、test.htmlページの読み込みが非常に遅くなり、data-transition="slide"が無視されるようです。

動的ページのロードに関する記事を見つけました：https ：//www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1？lang = en

私は本当に得られません。HTMLファイルはローカルに保存されていませんか？では、なぜXMLHtppRequestを実行するのでしょうか。

私の質問は：どうすれば良いページ遷移を（速くそして効果を使って）得ることができますか？

4

2 に答える 2

3

リンクrel="external"から削除する必要があります。<a>

この属性rel="external"は、Ajaxナビゲーションを無効にし、トランジション効果をスキップして、ページを更新しますtest.html。

コードを削除してから試してください。

index.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">

        <!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
        <a data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>


test.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

結果を教えてください。

于 2012-10-15T09:42:26.753 に答える
1

PiotrWalczyszynによるこのソリューションを試してください。JquerymobileとPhonegapを一緒に使用する人に強くお勧めします。

于 2013-03-12T11:56:14.883 に答える