W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

jQuery Mobile 图标



jQuery 图标

我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标,并对图标进行定位,如下所示:

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</a> 尝试

<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Refresh Page</button> 尝试

在 <input> 按钮中添加图标,可以使用 data-icon 属性:

<input type="button" value="Refresh page" data-icon="refresh"> 尝试

我们可以使用 data-icon 属性在导航按钮上添加图标:

<a href="#anylink" data-icon="refresh">Refresh Page</a> 尝试

如果要在列表按钮中添加图标,可以在 <li> 中使用 data-icon 属性:

<li data-icon="refresh"><a href="#">Click me</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 锁 / 挂锁 尝试
mail 邮件 / 信封 尝试
minus 减号 尝试
navigation 导航 尝试
phone 电话 尝试
power 开关 (On/off) 尝试
plus 加号 尝试
recycle 回收 尝试
refresh 刷新 尝试
search 搜索 尝试
shop 商店 / 钱包 / 手提袋 尝试
star 星号 尝试
tag 标签 尝试
user 用户 / 人 尝试
video 摄像机 尝试