Multipages與Phonegap /科爾多瓦2.2.0

我正在嘗試跨平臺框架phonegap和有一些問題與乘法。Multipages與Phonegap /科爾多瓦2.2.0

我要的是以下幾點：

第1頁：靜態內容
第2頁：列表視圖

我使用的代碼：

第1頁：index.html的

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/default.css" /> 

    <title>Page 1</title> 

    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" /> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script> 

</head> 
<body> 
    <div id="static" data-role="page"> 

     <div data-role="header" data-position="fixed"> 
      <h1 id="header-text">Page 1</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div id="static-content"></div> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <div data-role="navbar"> 
       <ul class="navbar"> 
        <li><a href="index.html" class="ui-btn-active" data-transition="none">Static</a></li> 
        <li><a href="list.html" data-transition="none">Listview</a></li> 
       </ul> 
      </div><!-- /navbar --> 
     </div><!-- /footer --> 
    </div><!-- /page --> 

    <script type="text/javascript" src="cordova-2.2.0.js"></script> 
    <script type="text/javascript"> 
     document.addEventListener('deviceready', onDeviceReady, false); 

     function onDeviceReady() { 

      $('static-content').html('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'); 

     } 
    </script> 
</body>

和第2頁：list.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/default.css" /> 

    <title>Page 2</title> 

    <link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" /> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script> 

</head> 
<body> 
    <div id="listview" data-role="page"> 

     <div data-role="header" data-position="fixed"> 
      <h1 id="header-text">Page 2</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div id="list-container"> 
       <ul> 
        <li>item 1</li> 
        <li>item 2</li> 
        <li>item 3</li> 
       </ul> 
      </div> 
     </div><!-- /content --> 

     <div data-role="footer"> 
      <div data-role="navbar"> 
       <ul class="navbar"> 
        <li><a href="index.html" data-transition="none">Static</a></li> 
        <li><a href="list.html" class="ui-btn-active" data-transition="none">Listview</a></li> 
       </ul> 
      </div><!-- /navbar --> 
     </div><!-- /footer --> 
    </div><!-- /page --> 

    <script type="text/javascript" src="cordova-2.2.0.js"></script> 
    <script type="text/javascript"> 
     document.addEventListener('deviceready', onDeviceReady, false); 

     function onDeviceReady() { 
      console.log('deviceready'); 

     } 
    </script> 
</body>

我想在不同的文件內容只是爲了更好的結構分開。該方法jQuery Mobile的處理就像使用一個索引頁的作品，但不是首選...;）

我嘗試了導航欄鏈接如下解決方案：

與A HREF：相對=「外部」
與A HREF：數據阿賈克斯=「假」
與A HREF：相對=「外部」和數據阿賈克斯=「假」

每次我這樣做是與外部的聯繫，我得到出現以下錯誤：

Exception building cordova JS globals: TypeError: Cannot redefine property: connection for key "connection"

它似乎cordova/phonegap框架被加載兩次，但我認爲使用此鏈接觸發一個完整的頁面重新加載，所以應該加載兩次？

或者我對乘法的使用有一個普遍的誤解？應該可以將不同文件中的內容分開，或者？

任何幫助真的很棒。

來源

2012-11-20 user617965

您需要將腳本放在head部分，jquery mobile會在ajax加載的頁面上忽略它。

第二頁加載時，身體內的任何東西都會被插入到DOM中，這就是科爾多瓦試圖運行兩次的原因。

來源

2012-11-20 11:44:13

工作，謝謝... :) – user617965

Multipages與Phonegap /科爾多瓦2.2.0

回答

相關問題