jQuery Mobile UI 无法与 IBM Worklight 一起正常工作答案

【问题标题】：jQuery Mobile UI not working properly with IBM WorklightjQuery Mobile UI 无法与 IBM Worklight 一起正常工作
【发布时间】：2013-06-19 04:44:07
【问题描述】：

请多多包涵，因为我是初学者 :D

我尝试将 jQuery Mobile 框架添加到我的 Worklight 项目中。我遵循了这个link 说明（所以，我手动添加了 jQuery Mobile，就像在链接中一样）。

然后，我尝试运行这段代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>JakartaWikiMall</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/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="css/JakartaWikiMall.css">
    <script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none;">
    <!--application UI goes here-->
    <div data-role="page">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>

        <div data-role="content">
            <p>Page content goes here</p>
        </div>

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>

    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <script src="js/initOptions.js"></script>
    <script src="js/JakartaWikiMall.js"></script>
    <script src="js/messages.js"></script>
</body>
</html>

这就是我从 Android 模拟器中得到的：

来自浏览器模拟器：

如您所见，页脚不在脚下，并且在 Android 模拟器中内容变得非常大。（但是我在上面提供的链接中事情是正确的，所以肯定有问题）

我该怎么办？

感谢您的帮助，如果您需要其他帮助，请告诉我。非常感谢：D

【问题讨论】：

标签： android jquery jquery-mobile ibm-mobilefirst

【解决方案1】：

将data-position="fixed" 添加到您的页脚。

演示http://jsfiddle.net/yeyene/Rdfxs/

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

更多JQM DEMO和文档在这里http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/

【讨论】：

非常感谢您的帮助 :D IDK 为什么本教程不需要该代码