要开始使用 jQuery Mobile,你需要按照以下步骤进行安装:

1. 引入 jQuery 库: jQuery Mobile 是建立在 jQuery 库之上的,因此首先需要引入 jQuery 库。你可以在 jQuery 官方网站上下载最新版本,然后将其包含在你的项目中。通常,你可以在 HTML 文件的 <head> 部分添加如下代码:
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

   注意,这里使用的是 jQuery 3.6.4 的 CDN 地址,你也可以下载并使用本地的 jQuery 文件。

2. 引入 jQuery Mobile 库: 接下来,你需要引入 jQuery Mobile 库。同样,你可以在 jQuery Mobile 官方网站上下载最新版本,并将其包含在项目中。在 HTML 文件的 <head> 部分添加如下代码:
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

   这里使用的是 jQuery Mobile 1.4.5 的 CDN 地址,你可以根据需要选择不同的版本。

3. 基本结构: 创建你的 HTML 页面,并使用 jQuery Mobile 的页面结构。一个简单的示例可能如下:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>My jQuery Mobile App</title>
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Home</h1>
        </div>

        <div data-role="content">
            <p>Welcome to my jQuery Mobile App!</p>
        </div>

        <div data-role="footer">
            <h4>&copy; 2023 My App</h4>
        </div>
    </div>

    </body>
    </html>

   这是一个基本的 HTML 页面,使用了 jQuery 和 jQuery Mobile 库,并定义了一个简单的页面结构。

4. 运行应用: 将 HTML 文件在浏览器中打开,你应该能够看到一个简单的 jQuery Mobile 应用程序。可以根据需要添加更多的页面、组件和样式,以满足你的应用需求。

请注意,随着时间的推移,版本可能会有所更新,因此建议查看 jQuery 和 jQuery Mobile 的官方网站以获取最新版本和文档。


转载请注明出处:http://www.zyzy.cn/article/detail/14444/jQuery Mobile