Question

我正在创建一个简单的应用程序，其中我有一个带有图像映射的图像，当我点击图像映射时，另一个页面加载。我正在使用标记中的href属性导航到新页面。所有这些都是在一个页面上完成的。

当我点击图像地图时，过渡应该是平滑的，第二页应该加载（这是自然行为应该是什么）但我得到的是页面过渡是不稳定的，第二页也是加载后，屏幕上不显示任何内容，只有在屏幕上点击几次后才会显示元素。

我尝试寻找解决方案但找不到任何东西。

我构建的早期应用程序从未出现过这样的问题，而且第二个应用程序突然出现了这个问题。

<!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>

Answer 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>

请在身体负荷之前添加这些线，即在'＆lt;头＆gt;'标记并从页面底部删除它们，然后再次尝试加载页面。应该在正文加载之前加载JS文件，以便可以应用函数。：）

Answer 2

尝试调试应用程序。出现错误的地方。就像@Gajotres说的那样。如果你的第二页没有加载，那么第二页可能会有一些问题，或者你可以使用jQM $.mobile.changePage('#secondPage',{transition:"none"});方法来解决这个问题。我遇到过类似的问题。但我已经从应用程序中删除了所有过渡。它工作得很棒。你可以试试。

phonegap页面转换问题

2 个答案: