2013-05-04 94 views
0

我正在做一個簡單的應用程序,其中我有一個圖像映像,當我點擊圖像映射另一個頁面加載。我正在使用標籤中的href屬性導航到新頁面。所有這些都是在一個頁面上完成的。phonegap頁面轉換問題

當我點擊圖像映射時,過渡應該平滑,第二頁應該被加載(這是自然行爲應該是這樣),但是我得到的是頁面轉換不連貫,第二頁沒有加載,屏幕上沒有顯示任何內容,只有在我點擊屏幕上的幾次後才顯示元素。

我試着尋找一個解決方案,但找不到任何東西。

我建立的早期應用程序從來沒有廣告過這樣的問題,突然間這個問題出現在第二個應用程序中。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>India Stats</title> 
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="listPage" data-role="page"> 
     <div data-role="header" data-position="fixed"> 
      Geo-spatial Analysis of Election Results in India 
     </div> 
     <div data-role="content"> 
      <div> 
       <img id="Image-Maps_8201304300944558" src="img/indiamap.png" usemap="#Image-Maps_8201304300944558" /> 
       <map id="_Image-Maps_8201304300944558" name="Image-Maps_8201304300944558"> 
       <area shape="poly" coords="60,255,78,258,94,262,106,281,120,294,124,301,117,304,117,313,110,317,108,325,108,334,106,343,99,343,97,351,87,347,88,338,86,329,85,319,85,311,81,305,79,315,78,324,68,329,54,337,46,337,43,333,33,325,29,316,21,310,20,303,17,299,28,298,36,296,43,293,43,288,34,288,25,290,17,285,14,279,14,272,14,265,23,258,36,262,45,262,50,258,58,263," href="#gujarat" /> 
       </map> 
      </div> 
     </div> 
     <div data-role="footer" data-position="fixed"> 
      Datanet Analytics &copy; Datanet India Pvt. Ltd. 
     </div> 
    </div> 
    <div id="gujarat" data-role="page"> 
     <div data-role="header" data-position="fixed"> 
      Geo-spatial Analysis of Election Results in Gujarat 
     </div> 
     <div data-role="content"> 
      <div> 
       <img id="ImageMap" src="img/gujarat.png" usemap="#ImageMaps"/> 
       <map id="ImageMaps" name="ImageMaps"> 
        <area shape="poly" coords="225,348,224,337,219,332,219,328,212,324,204,319,197,317,191,314,193,310,201,306,199,300,202,295,198,291,194,287,196,283,195,277,187,275,182,275,177,275,165,274,158,274,158,278,158,285,163,297,169,309,171,317,158,316,150,313,145,313,139,313,134,316,134,320,141,328,149,336,156,342,165,345,178,352,187,356,195,356,206,354,212,354,223,351" href="#junagadh"> 
       </map> 
      </div> 
     </div> 
     <div data-role="footer" data-position="fixed"> 
      Datanet Analytics &copy; Datanet India Pvt. Ltd. 
     </div> 
    </div> 
    <div id="junagadh" data-role="page"> 
     <div data-role="header" data-position="fixed"> 
      Geo-spatial Analysis of Election Results in Junagadh PC 2009 & ACs 2012 
     </div> 
     <div data-role="content"> 
     <img src="img/junagadh.png" /> 
     </div> 
     <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
     <ul> 
     <li style="font-size:30px"><a href="election.html">Analysis of Election Results</a></li> 
     <li style="font-size:30px"><a href="cr.html">Constituencies Result of Previous Years</a></li> 
     </ul> 
     </div> 
      Datanet Analytics &copy; Datanet India Pvt. Ltd. 
     </div> 
    </div> 
</body> 
<script src="cordova-2.7.0.js" type="text/javascript"></script> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script> 
</html> 
+0

我通常使用單個'index.html'文件和多個js文件來控制頁面。如果我有10頁,我將定義10個Div。我通過內部html(調用div id)管理內容。它效果不錯 – 2013-05-04 07:28:43

+0

@AnhSirkDasarp yes確實如此。當我們將一個HTML頁面導航到其他HTML頁面時,JavaScript對象會丟失。 – MSTdev 2013-05-04 07:31:27

+0

我也使用一個'index.html'文件,每個頁面都有一個div,並通過調用各個div的id來調用每個頁面。 但仍然存在這個問題。 – 2013-05-04 07:34:42

回答

0

嘗試調試應用程序。在那裏出現錯誤。就像@Gajotres所說的。如果你的第二頁沒有加載,那麼可能會有一些問題進入第二頁或者你可以使用jQM $.mobile.changePage('#secondPage',{transition:"none"});方法來解決這個問題。我遇到過類似的問題。但是我已經從應用程序中刪除了所有的轉換。它工作的很棒。你可以試試它。

1
<script src="cordova-2.7.0.js" type="text/javascript"></script> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script> 

請「<頭>」標籤補充身體負荷即之前這些線,並從頁面底部刪除它們,然後嘗試重新加載頁面。 JS文件應該在體加載之前加載,以便可以應用函數。 :)