我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标,并对图标进行定位,如下所示:
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</a>尝试一下
<button class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</button>尝试一下
在 <input> 按钮中添加图标,可以使用 data-icon 属性:
<a href="#anylink" data-icon="refresh">刷新页面</a>尝试一下
我们可以使用 data-icon 属性在导航按钮上添加图标:
<a href="#anylink" data-icon="refresh">刷新页面</a>尝试一下
如果要在列表按钮中添加图标,可以在 <li> 中使用 data-icon 属性:
<li data-icon="refresh"><a href="#">点我</a></li>尝试一下
下面我们列出了 jQuery Mobile 提供的所有可用图标:
值 | 描述 | 图标 | 实例 |
---|---|---|---|
action | 动作 | 尝试一下 | |
alert | 警告 | 尝试一下 | |
audio | 视频 / 音频 / 扬声器 | 尝试一下 | |
arrow-d-l | 左下角 | 尝试一下 | |
arrow-d-r | 右下角 | 尝试一下 | |
arrow-u-l | 左上角 | 尝试一下 | |
arrow-u-r | 右上角 | 尝试一下 | |
arrow-l | 左箭头 | 尝试一下 | |
arrow-r | 右箭头 | 尝试一下 | |
arrow-u | 上箭头 | 尝试一下 | |
arrow-d | 下箭头 | 尝试一下 | |
back | 返回 | 尝试一下 | |
bars | 栏目 | 尝试一下 | |
bullets | 栅栏 | 尝试一下 | |
calendar | 日历 | 尝试一下 | |
camera | 照相机 | 尝试一下 | |
carat-d | 向下 | 尝试一下 | |
carat-l | 向左 | 尝试一下 | |
carat-r | 向右 | 尝试一下 | |
carat-u | 向上 | 尝试一下 | |
check | 验证标记 | 尝试一下 | |
clock | 时钟 | 尝试一下 | |
cloud | 云 | 尝试一下 | |
comment | 评论 | 尝试一下 | |
delete | 删除 (X) | 尝试一下 | |
edit | 编辑 / 铅笔 | 尝试一下 | |
eye | 眼睛 | 尝试一下 | |
forbidden | 静止标记 | 尝试一下 | |
forward | 前进 | 尝试一下 | |
gear | 齿轮 | 尝试一下 | |
grid | 网格 | 尝试一下 | |
heart | 心 / 爱 标志 | 尝试一下 | |
home | 家(主页) | 尝试一下 | |
info | 信息 | 尝试一下 | |
location | 定位 / GPS | 尝试一下 | |
lock | 锁 / 挂锁 | 尝试一下 | |
邮件 / 信封 | 尝试一下 | ||
minus | 符号、减号 | 尝试一下 | |
navigation | 导航 | 尝试一下 | |
phone | 电话 | 尝试一下 | |
power | 开关 (On/off) | 尝试一下 | |
plus | 加号 | 尝试一下 | |
recycle | 回收 | 尝试一下 | |
refresh | 刷新 | 尝试一下 | |
search | 搜索 | 尝试一下 | |
shop | 商店、钱包、手提袋 | 尝试一下 | |
star | 星号 | 尝试一下 | |
tag | 标签 | 尝试一下 | |
user | 用户 | 尝试一下 | |
video | 摄像机 | 尝试一下 |