1

タグを使用してページをナビゲートする Web ページを作成しています -

<a href="#mymenutag">Menu</a>
...
<nav id="mymenutag">
<ul>
 <li class="first"><a href="index.html">Index</a></li>
 <li><a href="happy.html">Happy</a></li>
 <li class="last"><a href="nowhere.html">Nowhere</a></li>
</ul>
/nav>

これは、スクリプト参照も含める場合を除いて、通常は正常に機能します-

<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

その後、ナビゲーションが機能しなくなります。他にも多数の jquery モバイル スクリプトが読み込まれていますが、これはナビゲーションを壊すものです。まだ機能する ID セレクターは他にもいくつかありますが、それらは jquery mobile を介して処理されると思います。これはそうではありません。同じページの新しい場所に移動するだけです。

ここにあるgithubで実際の例をセットアップしました：

https://github.com/hypnoboy/jqmobile_breaks_html5_navt

この動作は、ページをクリックすることで確認できます。おまけとして、見やすくするために、お気に入りの「WTF」ソフトウェアのインストールの瞬間の jpg 写真を追加しました。

問題が発生する可能性のある完全なサンプル Web ページを次に示します。

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <head>
        <!--begin entries for jquerymobile-->        
        <link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
        <script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>        

        <!--end entries for jquerymobile-->
   </head>

    <body>
        <!-- start of navigation -->
         <a href="#mymenutag">Menu</a>
         <!-- end of navigation -->
           <script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>  
  <!--    causes href navigation in the page to fail -->

            <header><div class=main_heading>
                <h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
            </header>

   <p>This is some sample text
    </p>
                    <a href="#mymenutag">Menu</a>
             <a href="#mymenutag" data-role="button" data-transition="slide">Menu</a>
     <img   id="front"   src="WP_000241.jpg"/>
           <!--start of navigation-->   
     <nav id="mymenutag">
    <ul>
     <li class="first"><a href="index.html">Index</a></li>
      <li><a href="happy.html">Happy</a></li>
      <li class="last"><a href="nowhere.html">Nowhere</a></li>
    </ul>
    </nav>
             <!-- /end of navigation -->  



        <script src="js/vendor/jquery-2.0.2.min.js"></script>
        <script src="js/helper.js"></script>
        <script src="js/main.js"></script>
        <script src="libs/app.js" type="text/javascript"></script>
        <script src="pages.js" type="text/javascript"></script>

      <footer data-role="footer" data-position="fixed">
    <h1>Footer</h1>
  </footer>

    </body>
</html>

任意の支援をいただければ幸いです。

4

1 に答える 1

0

JQuery Mobile の特徴の 1 つは、一度に 2 つのページを DOM にロードして、1 つだけを表示することです。これは JQM ajax 機能の一部です。複数のページに読み込まれるマスター ページまたはパーツで ID を使用した場合、実行時にソースを検査すると、ID が重複していることに気付くでしょう。

ajax機能をオフにしてポストバックを実行することは回避策であるか、クラスを使用します

問題を示す画像 (pluralsight コースのビデオからの画像)

問題を示す画像

于 2013-08-05T17:41:52.620 に答える