简单按钮
创建一个简单的按钮，只需在 <a> 或 <button> 元素中添加 data-role="button" 属性即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Buttons</title>
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 jQuery Mobile 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery Mobile 脚本文件 -->
<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>Button Examples</h1>
</div>
<div data-role="content">
<a href="#" data-role="button">Simple Button</a>
<button data-role="button">Another Button</button>
</div>
</div>
</body>
</html>
主题化按钮
jQuery Mobile 允许你使用不同的主题为按钮添加样式。通过添加 data-theme 属性，你可以指定按钮使用的主题。主题通常有"a"、"b"、"c"等，你可以根据需要选择：
<a href="#" data-role="button" data-theme="a">Button with Theme A</a>
<a href="#" data-role="button" data-theme="b">Button with Theme B</a>
<a href="#" data-role="button" data-theme="c">Button with Theme C</a>
图标按钮
你还可以将图标添加到按钮上。使用 data-icon 属性指定图标的名称，如 "home"、"info" 等。同时，你可以使用 data-iconpos 属性指定图标的位置（"left"、"right"、"top"、"bottom"）：
<a href="#" data-role="button" data-icon="home" data-iconpos="left">Home</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="right">Info</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">Up</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">Down</a>
这只是 jQuery Mobile 按钮的基本用法示例。你可以根据实际需求，使用其他选项和组件来创建更丰富和交互性的按钮。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/buttons/)中找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/9419/jQuery Mobile