数据角色在 jqm 中不只显示一页

Question

我在 jquery 移动设备正常工作时遇到了一些问题。我正在使用 the anatomy of a page and this Whosebug example.

我期望的输出是 jqm 仅显示代码中第一个数据角色的内容。然而，实际发生的是在加载 jqm 之后，它将视图设置为浏览器的大小 window，但仍然显示第二个数据角色的内容及其下方的单词 "loading"。

我很确定我遗漏了一些非常简单的东西。任何帮助将不胜感激。

我正在使用 PhoneGap 和 RequireJS。

代码如下：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta 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, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <title>Student Picker</title>
</head>
<body>
    <div data-role="page" id="test1">
        <a href="#test2">Goto Test2</a>
    </div>
    <div data-role="page" id="test2">
        <a href="#test1">Goto Test1</a>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

require.config({

baseUrl: 'js',
paths: {

    'jquery': 'jquery',
    'jquery.mobile.config': 'jquery.mobile.config',
    'jquery.mobile': 'jquery.mobile',
    'app': 'app'
},
map: {

    '*': {'jquery': 'jquery-private'},
    'jquery-private': { 'jquery': 'jquery' }
},
shim: {

    'jquery.mobile.config': ['jquery'],
    'jquery.mobile': ['jquery', 'jquery.mobile.config']
}
});

require(['jquery', 'app', 'jquery.mobile'], function(jq, app) {

jq(function() {

    //app.initialize();
});
});

jquery.mobile.config

define(['jquery'], function (jq) {

jq(document).on("mobileinit", function () {

    jq.mobile.ajaxEnabled = false;
    jq.mobile.linkBindingEnabled = false;
    jq.mobile.hashListeningEnabled = false;
    jq.mobile.pushStateEnabled = false;
});
});

输出图片：

无论有没有 jqm 配置文件，结果都是一样的。如果您需要更多信息，请随时发表评论:)

Answer 1

CSS代码中缺少与 JQM 文件对应的文件。

添加 CSS 文件，它应该可以工作，因为 "data-role" 作为 CSS 选择器工作。

数据角色在 jqm 中不只显示一页

data-role not displaying only one page in jqm

javascript

jquery

jquery-mobile

requirejs