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

0

Worklight はすでに jQuery にバンドルされているため、HTML の下部で行ったように 2 回追加しないでください。また、とにかく一番下に配置するのではなく、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 Console によるプレビュー

うまくいく... 上記のように小さく始めて (Worklight と jQuery Mobile の最新バージョンの使用を含む)、その (動作する) 基盤の上に構築することをお勧めします。

Worklight の最新バージョンは、Eclipse Marketplace から入手できます (Eclipse では、[ヘルプ] メニュー >> [Marketplace] を参照してください)。

于 2013-05-16T03:10:53.670 に答える