📅 最后修改于: 2023-12-03 14:51:57.306000 🧑 作者: Mango
jQuery Mobile 是一个基于 HTML5 的移动端前端开发框架，提供了丰富的组件和主题样式，可以轻松地制作出漂亮的移动应用界面。本文将介绍如何使用 jQuery Mobile 制作图标阴影按钮。
首先，在你的 HTML 文档中引入 jQuery Mobile 的库文件。可以选择下载到本地，或使用在线 CDN 引入：
<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.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
使用 <a> 标签创建一个图标按钮，并添加 data-role="button" 属性和 data-icon 属性来设置按钮样式和图标：
<a href="#" data-role="button" data-icon="shadow" data-iconpos="notext">按钮</a>
在上述代码中，data-icon="shadow" 用于指定按钮样式为阴影按钮，data-iconpos="notext" 则将按钮上的文本隐藏，只显示图标。
通过添加 data-icon 属性值来指定按钮图标，jQuery Mobile 内置了一套图标库可以使用。例如，如果想要添加一个放大的图标，可以将 data-icon 的值设置为 "plus"：
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">按钮</a>
可以通过添加自定义的 CSS 类来进一步定制按钮样式。比如，可以为按钮添加一个自定义的阴影效果：
<a href="#" data-role="button" data-icon="shadow" data-iconpos="notext" class="shadow-button">按钮</a>
.shadow-button {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
在上述代码中，通过添加 shadow-button 类来设置按钮阴影样式。
下面是一个使用 jQuery Mobile 制作图标阴影按钮的完整示例代码：
<!DOCTYPE html>
<html>
<head>
<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-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.shadow-button {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<a href="#" data-role="button" data-icon="shadow" data-iconpos="notext">按钮</a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext">按钮</a>
<a href="#" data-role="button" data-icon="shadow" data-iconpos="notext" class="shadow-button">按钮</a>
</body>
</html>
通过以上步骤，你就可以使用 jQuery Mobile 制作图标阴影按钮了。进一步的个性化样式和功能可以根据需求自行扩展。