1

jQuery MobileおよびPhonegapアプリにindex.htmlとabout.htmlの2つのページがあります

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    ... load jquery and jquery mobile...
</head> 

<body> 
    <div data-role="page" id="index">
    ...content goes here...
        <a href="about.html"  data-role="button">about</a>
    </div>
</body>
</html>

about.htmlにはページのデータロールのみがあります

<div data-role="page" id="about">
<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
...content goes here...

<a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
<div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
    <div data-role="content" data-theme="c">
        <a href="#page" data-role="button" data-theme="c" >Ok</a>
    </div>
</div>

</div>

私が抱えている問題は、aboutページをロードすると、ダイアログと戻るリンクが機能しないことです。

ポップアップhtmlを配置するindexと機能します。

また、新しいページが読み込まれると、スタイルがそこにあるため、jquery モバイルが読み込まれます。

この問題に関するアイデアはありますか？

ありがとう

4

1 に答える 1

0

私が見たところ、あなたのコードは問題なく動作します。

私はあなたのexample_からファイルにこれらを作成しました

index.html

<!DOCTYPE html>
<html>
  <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"/></script>    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"/></script>
  </head>
  <body>
        <div data-role="page" id="index">
        ...content goes here...
            <a href="about.html"  data-role="button">about</a>
        </div>  
  </body>
</html>

about.html

    <div data-role="page" id="about">
            <a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>
            ...content goes here...

            <a href="#dialog" id="form_dialog" data-rel="popup">qweqwe</a>
            <div data-role="popup" id="dialog" data-overlay-theme="a" data-position-to="window">
                <div data-role="content" data-theme="c">
                    <a href="#page" data-role="button" data-theme="c" >Ok</a>
                </div>
            </div>              
    </div>

上記のコードは問題なく動作します。jQuery Mobile と jQuery のバージョンの不一致に問題があるのではないでしょうか? コードの問題のある部分だけがこの戻るボタンでした:

<a href="index.html" data-rel="back" data-icon="back" data-transition="slide">Back</a>

data-rel="back" で href の場所を使用しないでください。data-rel="back" の方が優先度が高いため、エラーにはなりません。また、ポップアップが閉じられた後、この戻るボタンは正しく機能しません。ポップアップが閉じられた後にクリックすると、まず about.html に戻り、2 回目のクリックで index.html に戻ります。これはエラーではありません。ポップアップは別のページ アクションとしてカウントされます。

したがって、戻るボタンの場合は、data-rel="back" を削除してください。これにより、about.html ページで正しく動作するように修正されます。

于 2013-02-01T08:51:46.247 に答える