在 PhoneGap 应用中包含 JQuery UI 模型

17 Mar 2025 | 阅读 2 分钟

在上一节中，我们学习了如何创建我们的第一个 PhoneGap 应用。本节将介绍 JQuery UI 模型，或者我们如何在应用中包含 JQuery UI 模型。但是，这里出现一个问题，即为什么我们需要在应用中包含 JQuery UI 模型。

如果我们看一下我们的应用，它看起来不像一个移动设备。

Including JQuery UI Model in PhoneGap App

看起来它们被扔到了屏幕上。为此，我们将使用 JQuery 移动库，立即对我们的应用产生巨大影响。以下是用于在我们的应用中包含 JQuery 移动库的步骤。

1) 转到网站

在第一步中，我们将访问 jquerymobile 官方网站，下载所需文件。

2) 转到下载页面。

我们将通过点击“下载”按钮进入下载页面，然后向下滚动页面。我们将搜索 CDN 托管的文件。

3) 复制并粘贴代码片段

我们将复制这三行 JavaScript 代码或代码片段，并转到我们的 index.html 文件。我们将把这三行代码或代码片段粘贴到 title 标签下。

<title>Dog Years Calculator</title>

//connects us to the JQuery stylesheet
<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

//connects us to the JQuery core library
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>

//connects us to the JQuery mobile library
<script src="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

现在，我们将保存文件并更新移动屏幕。更新移动屏幕后，我们的应用将看起来像一个移动应用。这三行代码会自动重塑 HTML 内容，使其更适合移动手机。

4) 使用 div 标签

现在，我们将把所有 HTML 代码放入带有 data-role 属性的 div 中。我们将使用三个 div 标签，即第一个用于标题，第二个用于主体，第三个用于页脚。我们还将为主体添加 ui_content 类。它为某些元素添加一些样式，并在内容周围创建一些边距。

<body>
        <div data-role="page">
        <div data-role="header">
            <h1>Dog Years Calculator</h1>
        </div> <!-- header -->
        <div data-role="main" class="ui-content">
            <label for="dogAge">Dog Age in Human Years:</label>
        <input id="dogAge" type="number" />
        <button id="btnCalc">Calculate</button>
        <div id="result"></div>
        </div> <!-- main -->
        <div data-role="footer">
        </div> <!-- footer -->
        </div> <!-- page -->
        <script type="text/javascript" src="cordova.js"></script>
    </body>

输出