IBM Worklight 6.0 - jQuery Mobile页面链接无法在Android模拟器中运行

时间:2013-09-11 06:11:10

标签: android jquery-mobile ibm-mobilefirst

使用Worklight 6.0,我使用Android环境创建了一个应用程序,并使用jQuery Mobile。

通过Worklight Console预览应用程序的公共环境时,页面链接非常有效。但它不适用于Android模拟器。每当我点击提交按钮时,都会刷新同一页面。

继承我的代码:

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>SaskenV1</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link href="jqueryMobile/jquery.mobile-1.1.2.css" rel="stylesheet">
            <link rel="stylesheet" href="css/SaskenV1.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="js/jquery.js"></script>
            <script src="jqueryMobile/jquery.mobile-1.1.2.js"></script>
<link
    href="jqueryMobile/jquery.mobile-1.1.2.css"
    rel="stylesheet">


</head>
        <body id="content" style="display: none;">
            <div data-role="page" id="page1">
                <div data-role="content" style="padding: 15px">

            <div data-role="fieldcontain" id="fieldcontain">
                <label for="text">Username:</label><input type="text" name="text" id="name">
            </div>

            <div data-role="fieldcontain" id="fieldcontain0">
                <label for="text0">Password:</label><input type="text"
                    name="text0" id="pass">

            </div>

            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <a href="#" data-role="button" id="cancel">Cancel</a>
</div>
                <div class="ui-block-b">

                    <a href="#page2" data-role="button" id="submit">Submit</a>

                </div>

            </div>

        </div>
            </div>

            <div data-role="page" id="page2">
    <div data-role="header">
        <a href="SaskenV3.html" data-icon="home">Home</a>
        <h6>2nd Page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <a href="#page1">Return to Page 1</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>
    </div>
</div>

            <script src="js/initOptions.js"></script>

            <script src="js/SaskenV1.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

每当用户点击提交按钮时,我想转到#page2。不知道为什么它不起作用......

更新

现在,我发现我在html文件中所做的任何更改都不会影响Android项目。尽管我也是这样建造的。

1 个答案:

答案 0 :(得分:0)

这对我来说非常合适。
我在Worklight 6.0.0.1中完成了以下操作:

  1. 创建了一个新的Worklight项目
  2. 在创建应用程序期间,我选择添加jQuery Mobile。我使用过jQuery Mobile v1.3.1(至少我添加了images文件夹和jquery.mobile-1.3.1 CSS和JS文件)
  3. 添加了Android环境
  4. myProject\apps\myApp\common\myApp.html中,我已将BODY元素的内容替换为您的内容(当然,底部的3个脚本引用除外)
  5. 右键单击myApp文件夹,然后选择Run As > Build All and Deploy
  6. 右键单击生成的Android项目,然后选择Run As > Android application
  7. 该应用程序随后在Android模拟器中启动 输入一些文本并单击“提交”按钮后,页面将转换为第二页。

    确保您遵循上述规定。

    enter image description here