2011-05-23 6 views
4

これはかなり面倒ですが、私はjQueryモバイルサイトを構築しています。しかし、私がaboutと呼ばれるページを持っているなら、私はこれをabout.htmlというファイルに入れます。私はこれを動作させることができましたが、突然私は別のページを開くためのリンクを取得できません。私はあらゆる種類のものを試しましたが、今は白いページがあります。ここでjQueryモバイルの複数のHTMLファイル

は、私はいじりされているテストコードです:

インデックス:

<div data-role="page" id="about" data-title="about"> 
    <div data-role="header"><h1>Page 2</h1></div> 
    <div data-role="content"><p id="deviceProperties">Loading device properties...</p></div> 
    <div data-role="footer"><h4>Footer</h4></div> 
</div> 

今、このすべてのでした:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Notification Example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
     <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script> 
     <script type="text/javascript" charset="utf-8"> 
      // Wait for PhoneGap to load 
      // 
      function onLoad() { 
       document.addEventListener("deviceready", onDeviceReady, false); 
      } 

      // PhoneGap is ready 
      // 
      function onDeviceReady() { 
       // Empty 
      } 

      $('#about').live('pagecreate',function(event){ AboutTest(); }); 
      $('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); }); 

      function AboutTest(){ 
       var element = document.getElementById('deviceProperties'); 

       element.innerHTML = 'Device Name: '  + device.name  + '<br />' + 
            'Device PhoneGap: ' + device.phonegap + '<br />' + 
            'Device Platform: ' + device.platform + '<br />' + 
            'Device UUID: '  + device.uuid  + '<br />' + 
            'Device Version: ' + device.version + '<br />'; 
      } 
     </script> 
    </head> 
    <body onload="onLoad()"> 
     <div data-role="page" id="home"> 
      <div data-role="header"><h2>Page 1</h2></div> 
      <div data-role="content"> 
       <a href="about.html" data-url="about.html">testing</a> 
      </div><!-- /content --> 
      <div data-role="footer"><h4>Footer</h4></div> 
     </div><!-- /page --> 
    </body> 
</html> 

ここでは、リンク先の私のテストページ、about.htmlですうまく動作し、JavaScriptコードが実行されました。そして、私は何かを変更しました。私は何が、私はそれを壊していると私の人生のために私はそれを見ることができないか分からない。 1ページ内のすべてのページの全体的なアイデアはとてもばかばかしくて気分が悪いようです。

答えて

4

コンテンツ内のリンクから"data-url='about.html'"を削除すると機能します。この属性はページdiv用です。

2番目のページ(about.html)は、本文に現在のテキストが含まれている限り、完全なHTMLページにすることができます。 jQuery Mobileは、ファイル全体をロードしてから、ページdivを抽出するので、うまく動作します。より合理的な場合は、複数のページを1つの方法でキャッシュする方法と考えることができます。 "外部ページ" にリンクする

0

「約」ページのコードをメインのインデックスページに別のdivとして含める必要があります。複数のページを持つ特別な理由がある場合を除きますか?これにより、ページの読み込み速度が向上します(同じページにすべてを保持)。

だから今持っているでしょうインデックス:

<div data-role="page" id="home"> 

    <div data-role="header"><h2>Page 1</h2></div> 

    <div data-role="content"></div> 

    <div data-role="footer"></div> 

</div> 

<div data-role="page" id="about" data-title="about"> 

    <div data-role="header"><h1>Page 2</h1></div> 

    <div data-role="content"><p id="deviceProperties">Loading device properties...</p>  </div> 

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

</div> 

ん意味をなさない?

また、jQueryをロードするプロセスが進行しているので、jQueryの組み込みDOMナビゲーションを使用してdivコンテンツを更新する必要があります。これはずっと簡単です。

外部ページ(OPが示すように)にページを読み込みたい場合は、「about」にrel = "external"を追加することもできます'リンク。

+0

あなたは私の記事を読んでも私はすでに私が別々のファイルで作業していたと言っていますが、これは1つのファイルではないことを私は何をしていますが、私は追加relタグを試し、効果がありましたが、それがうまく動作する前に、nid urlとdata urlとboomを設定してフローさせてから、私のページの周りにいくつかの変更が加えられ、もう機能しなくなりました。 – davethecoder

+0

あなたはあなたのキャッシュを空にして、ページを読み込むために*を*再試行しましたか?あなたがいくつかの変更を加えた場合は、最初にブラウザのキャッシュを空にする必要があります.... – tatlar

+0

ええ、キャッシュのことをやった、実際には今すぐ表示するすべてのhtmlを持って、ちょうどスタイリングとフックを失った???? bizzare私はdefoとしてこれは実行していたAboutTest()関数は、実際に別のファイルを読み込んだ後、マニュアルが言うように、それはajaxまたはハイジャックを使用してすべてのページを読み込む必要がありますか?それはちょうど停止した? – davethecoder

1

あなたのリンクは次の属性持っている必要があります。

<a href="about.html" data-url="about.html" rel="external">testing</a> 

rel="external" 

をあなたのリンクがどのように見えるようにするには、必要に応じてdata-ajax="false"

を追加することができますまたは

<a href="about.html" data-url="about.html" rel="external" data-ajax="false">testing</a> 
+2

なぜデータアイアックスを無効にしてそれを間違える必要があるのでしょうか?また、relを使用したときに、トランジション効果が消えてしまいました。 – Morano88