欢迎光临
梦想从学习开始!

jQuery Mobile 图标 | 小熊教程

jQuery Mobile 图标

Tips:您正在学习的是jQuery Mobile 图标 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=9836 ,您可通过标签查询系列课程。祝您学习愉快!

我们可以使用图标类在 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 锁 / 挂锁 尝试一下
mail 邮件 / 信封 尝试一下
minus 符号、减号 尝试一下
navigation 导航 尝试一下
phone 电话 尝试一下
power 开关 (On/off) 尝试一下
plus 加号 尝试一下
recycle 回收 尝试一下
refresh 刷新 尝试一下
search 搜索 尝试一下
shop 商店、钱包、手提袋 尝试一下
star 星号 尝试一下
tag 标签 尝试一下
user 用户 尝试一下
video 摄像机 尝试一下
赞(0) 打赏
未经允许不得转载:小熊分享邦 » jQuery Mobile 图标 | 小熊教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏