索引页面上显示的所有Cordova页面均无法导航

时间:2018-09-21 13:16:59

标签: cordova mobile jquery-mobile

我刚开始使用Cordova进行移动开发。我正在尝试创建一个项目,但遇到了两个问题。第一个问题,我将Jquery mobile用于UI控件,但未呈现我的按钮和UI元素,应如何确保我的依赖项脚本和样式表也以正确的顺序被引用(请参见下面的代码)。其次,我有两个页面,“ indexpage”和“ formspage”,这是我在启动应用程序时遇到的问题,两个页面都呈现在同一视图上,我不确定为什么会这样,请参见下面的代码。非常感谢您的帮助。

链接到图像:   https://ibb.co/bEeP1e

<!DOCTYPE html>
<html>
<head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>FISApp</title>
</head>
<body>
    <div data-role="page" id="indexpage">
        <div data-role="header">
            <h3>FISApp</h3>
        </div>
        <div class="ui-content">
            <a href="#formspage" class="ui-btn">Forms</a>
        </div>
    </div>

    <div data-role="page" id="formspage">
        <div data-role="header">
            <h3>Forms</h3>
        </div>
        <div class="ui-content">
            <ul data-role="listview">
                <li><a href="#">Acura</a></li>
                <li><a href="#">Audi</a></li>
                <li><a href="#">BMW</a></li>
                <li><a href="#">Cadillac</a></li>
                <li><a href="#">Ferrari</a></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

似乎我已经找到解决问题的方法。最新稳定版本的Jquery,Jquery Mobile和Jquery UI似乎存在兼容性问题。所以我降级到jquery-1.12.4.js,jquery.mobile-1.4.5.min.js,jquery-ui.min.js。并可以进行引用和样式设置。