📅 最后修改于: 2023-12-03 15:23:54.397000 🧑 作者: Mango
jQuery Mobile 是一个用于构建移动应用程序的框架，它提供了许多 UI 组件和主题。其中之一就是图标位置按钮，在按钮上放置一个图标，使得按钮更加醒目。
下面是使用 jQuery Mobile 制作图标位置按钮的步骤：
首先，需要使用 jQuery Mobile 的库文件和 CSS 文件：
<head>
<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>
</head>
在 HTML 文件中创建一个按钮，并为其添加 data-icon 和 data-iconpos 属性：
<a href="#" data-role="button" data-icon="star" data-iconpos="right">按钮</a>
其中，data-icon 属性指定图标的名称（以下为可用的所有图标名称），data-iconpos 属性指定图标的位置（以下为可用的所有位置）：
图标名称 | 中文名称 | 图标名称 | 中文名称 | 图标名称 | 中文名称 | 图标名称 | 中文名称
-|-|-|-|-|-|-|-
alert | 警告 | arrow-d | 向下箭头 | arrow-l | 向左箭头 | arrow-r | 向右箭头
arrow-u | 向上箭头 | audio | 音频 | bars | 条形图 | bullets | 圆点
calendar | 日历 | camera | 照相机 | carat-d | 向下大箭头 | carat-l | 向左大箭头
carat-r | 向右大箭头 | carat-u | 向上大箭头 | check | 勾选 | clock | 时钟
cloud | 云 | comment | 评论 | custom | 自定义 | delete | 删除
edit | 编辑 | eye | 眼睛 | forbidden | 禁止 | gear | 齿轮
grid | 网格 | heart | 心形 | home | 主页 | info | 信息
location | 定位 | lock | 锁 | mail | 邮件 | minus | 减号
navigation | 导航 | phone | 电话 | plus | 加号 | power | 电源
recycle | 回收 | refresh | 刷新 | search | 搜索 | shop | 商店
star | 星形 | tag | 标签 | user | 用户 | video | 视频
图标位置 | 描述
-|-
left | 图标在文本左侧
right | 图标在文本右侧
top | 图标在文本上方
bottom | 图标在文本下方
如果需要美化按钮的外观，可以使用 jQuery Mobile 的主题框架。例如，以下代码使用红色主题框架和圆角样式：
<a href="#" data-role="button" data-icon="star" data-iconpos="right" data-theme="b" class="ui-corner-all">按钮</a>
其中，data-theme 属性指定主题的名称，class 属性指定按钮的样式。
最后，可以为按钮添加事件处理程序。例如，以下代码在按钮被点击时弹出一个对话框：
<a href="#" data-role="button" data-icon="star" data-iconpos="right" data-theme="b" class="ui-corner-all" onclick="alert('Hello, world!')">按钮</a>
以上就是使用 jQuery Mobile 制作图标位置按钮的全部步骤。如果需要更深入的学习，可以参考 jQuery Mobile 的官方文档。