jQuery Mobile 教程学习笔记
简介
jQuery Mobile 是一个基于 jQuery 的开源移动 Web 应用程序框架，用于为移动设备（如智能手机、平板电脑、电视等）提供统一的用户界面。
安装
使用 jQuery Mobile 首先需要引入 jQuery 和 jQuery Mobile，可以从官网下载或使用如下 CDN 引入：
htmlCopy Code<script src="https://code.jquery.com/jquery-3.3.1.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>
页面结构
jQuery Mobile 使用固定的 HTML 结构来创建页面，通常包括以下几个部分：
- 头部：包含标题和导航栏等元素；
- 内容区域：显示页面的主要内容；
- 底部：包含页脚和导航按钮等元素。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 头部 -->
<div data-role="header">
<h1>jQuery Mobile 示例</h1>
<a href="#" data-icon="gear" class="ui-btn-right">设置</a>
</div>
<!-- 内容区域 -->
<div data-role="content">
<p>这是一个 jQuery Mobile 的示例页面。</p>
<ul data-role="listview" data-inset="true">
<li><a href="#">列表项 1</a></li>
<li><a href="#">列表项 2</a></li>
<li><a href="#">列表项 3</a></li>
</ul>
</div>
<!-- 底部 -->
<div data-role="footer">
<h4>版权所有 © 2023</h4>
</div>
</body>
</html>
页面导航
jQuery Mobile 提供了多种导航方式，包括按钮、链接、菜单等形式。以下是一个简单的页面导航实例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/jquery-3.3.1.min.js"></script>
<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="page1">
<div data-role="header">
<h1>第一页</h1>
</div>
<div data-role="content">
<p>这是第一页。点击下面的按钮跳转到第二页。</p>
<a href="#page2" class="ui-btn ui-btn-b ui-corner-all">第二页</a>
</div>
<div data-role="footer">
<h4>版权所有 © 2023</h4>
</div>
</div>
<!-- 第二页 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<p>这是第二页。点击下面的链接返回第一页。</p>
<a href="#page1">第一页</a>
</div>
<div data-role="footer">
<h4>版权所有 © 2023</h4>
</div>
</div>
</body>
</html>
表单
jQuery Mobile 提供了多种表单元素和样式，可以轻松创建漂亮的表单。
以下是一个简单的表单实例：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>表单示例</h1>
</div>
<div data-role="content">
<form>
<label for="name">姓名：</label>
<input type="text" name="name" id="name">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
<label for="password">密码：</label>
<input type="password" name="password" id="password">
<input type="submit" value="提交">
</form>
</div>
<div data-role="footer">
<h4>版权所有 © 2023</h4>
</div>
</div>
</body>
</html>
总结
jQuery Mobile 是一个非常方便的移动 Web 应用程序框架，通过简单的 HTML 结构和 CSS 样式就可以快速创建漂亮的移动 Web 界面。本文介绍了 jQuery Mobile 的一些基本用法，包括页面结构、页面导航、表单等，希望对你有所帮助。