jQuery Mobile Data 属性学习笔记
什么是 jQuery Mobile Data 属性？
jQuery Mobile Data 属性是一种特殊的 HTML 属性，可以用于定义和配置 jQuery Mobile 插件的行为和外观。这些属性通常以 "data-" 前缀开头，例如 "data-role"、"data-theme" 等。
常用的 jQuery Mobile Data 属性
以下是一些常用的 jQuery Mobile Data 属性及其作用：
data-role
定义元素的角色或类型，例如将一个 div 元素定义为一个页面：<div data-role="page">
data-theme
定义元素的主题颜色，例如将一个按钮定义为主题 C 的按钮：<a href="#" data-role="button" data-theme="c">Button</a>
data-icon
定义元素的图标，例如将一个按钮定义为“加号”图标：<a href="#" data-role="button" data-icon="plus">Add</a>
data-inline
定义元素是否为内联元素，例如将两个按钮放在一行中排列：<a href="#" data-role="button" data-inline="true">Button 1</a> <a href="#" data-role="button" data-inline="true">Button 2</a>
data-position
定义元素的位置，例如将一个弹出框定义为居中显示：<div data-role="popup" data-position-to="window" data-transition="pop">...</div>
实例
以下是一个简单的示例，演示如何使用 jQuery Mobile Data 属性来定义一个页面和一个按钮：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Data 属性学习笔记</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<header data-role="header" data-theme="b">
<h1>jQuery Mobile Data 属性学习笔记</h1>
</header>
<div data-role="content">
<a href="#" data-role="button" data-theme="c">Click Me!</a>
</div>
<footer data-role="footer" data-theme="b">
<h4>Powered by jQuery Mobile</h4>
</footer>
</div>
</body>
</html>
这个示例定义了一个包含标题、内容和页脚的页面，并在内容区域添加了一个按钮，点击后没有任何反应。