阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      jQuery Mobile 图标

      jQuery Mobile 图标

      我们可以使用图标类在 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 | 摄像机 | | 查看效果 |

      目录
      目录