Question

请耐心等待我，因为我是初学者：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模拟器获得的：

enter image description here

来自浏览器模拟器：

enter image description here

正如您所看到的，页脚不在脚下，Android Simulator中的内容变得非常大。（然而，我在上面提供的链接中的内容是正确的，所以一定有问题）

我该怎么办？

任何帮助都表示赞赏，如果您需要别的东西，请告诉我。非常感谢：D

Answer 1

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

DEMO 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/

jQuery Mobile UI无法与IBM Worklight一起正常运行

1 个答案: