1

我有主要的html：

<!DOCTYPE html>     
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>Home</title>
    <link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    <link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />

    <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">

    <div data-role="page" id="homePage">
        <div data-role="header"><div class="ui-title">Home</div></div>
        <div data-role="content" style="text-align: center">
            <a data-role="button" id="login" class="fullWidth">Login</a>
        </div>
    </div>

    <script src="js/initOptions.js"></script>
    <script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/messages.js"></script>

</body>

然后在 Home.js 中：

// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;

function wlCommonInit(){
    // Common initialization code goes here
}

$("#homePage").live('pagecreate', function(event,ui) {
    $('#login').click(function(){
        $.mobile.changePage($('#nextPage.html'));
    });
});

当我点击登录按钮时，它会$.mobile is undefined在这一行出现错误：

$.mobile.changePage($('#nextPage.html'));

有没有人可以洞察我的代码有什么问题？我相信我做正确的事？另外，我使用的是 5.0.2.407-developer-edition Worklight 版本。

4

2 回答 2

7

最后我通过以下方式解决了这个问题：

<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>

后来在js中：

jq.mobile.changePage("the.html");

代替

$.mobile.changePage("the.html");
于 2013-05-20T08:40:22.613 回答
0

Worklight 已经与 jQuery 捆绑在一起，因此您不应像在 HTML 底部那样再次添加它。另外，无论如何，您都不应该将其放在底部，而应放在 HEAD 中 - 删除该行。

此外，还将对 jQuery Mobile 的引用移动到 HEAD a。

使用Worklight 5.0.6.1（最新版本，你好像没用过）和jQuery Mobile 1.3.1，我新建了一个项目和应用，修改了HTML如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>testapp</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 rel="stylesheet" href="css/testapp.css">
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
    <script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
    <script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
    <div data-role="page">
    testapp

    </div>
    <script src="js/initOptions.js"></script>
    <script src="js/testapp.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>
  1. 我将缩小的 .css 和 .js 文件放在一个文件夹中，并在 HEAD 元素中引用它们。
  2. 我在 BODY 元素内部添加了。
  3. 全部构建并部署
  4. 通过 Worklight 控制台预览

工作...我建议您像上面那样从小处着手（包括使用最新版本的 Worklight 和 jQuery Mobile），并在该（工作）基础上构建）。

您可以从 Eclipse Marketplace 获得最新版本的 Worklight（在 Eclipse 中，查看帮助菜单 >> Marketplace）。

于 2013-05-16T03:10:53.670 回答