jQuery Mobile 主题学习笔记

什么是 jQuery Mobile

jQuery Mobile 是一个面向移动设备的 HTML5 Web 浏览器前端框架，它允许快速而轻松地开发具有良好用户体验的移动 Web 应用程序。jQuery Mobile 支持各种移动设备平台，包括 iOS、Android、Windows Phone、BlackBerry 等等。

主题定制

jQuery Mobile 提供了一个主题定制框架，您可以利用它来创建自己的个性化主题。该框架提供了一套默认主题，您可以在此基础上进行修改或者从头开始创建。

定制工具

jQuery Mobile 提供了一套在线主题定制工具 ThemeRoller，您可以通过简单地拖动和调整不同的元素样式来创建自己的主题。

样式类

jQuery Mobile 的主题样式类非常丰富，您可以根据自己的需要使用这些样式类对不同的元素进行样式定制。

以下是一些常用的样式类：

ui-bar：用于定义顶部和底部栏的样式
ui-header：用于定义页面头部的样式
ui-footer：用于定义页面底部的样式
ui-btn：用于定义按钮的样式
ui-shadow：用于定义阴影的样式
ui-body：用于定义页面主体的样式

示例

以下是一个简单的 jQuery Mobile 页面示例，包括一个顶部栏、一个底部栏和一个按钮：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>My Page</title>
	<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-1.11.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" data-position="fixed">
			<h1>My Header</h1>
		</div>

		<div data-role="content" class="ui-content">
			<p>Hello, world!</p>
		</div>

		<div data-role="footer" data-position="fixed">
			<h4>My Footer</h4>
		</div>
	</div>

	<a href="#" class="ui-btn">Click Me</a>
</body>
</html>

此页面使用了默认的 jQuery Mobile 主题。如果您想要进行主题定制，可以通过添加自定义 CSS 样式来实现。