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 | 鎖 / 掛鎖 | ||
| 郵件 / 信封 | |||
| minus | 符號、減號 | ||
| navigation | 導航 | ||
| phone | 電話 | ||
| power | 開關 (On/off) | ||
| plus | 加號 | ||
| recycle | 回收 | ||
| refresh | 刷新 | ||
| search | 搜索 | ||
| shop | 商店、錢包、手提袋 | ||
| star | 星號 | ||
| tag | 標籤 | ||
| user | 用戶 | ||
| video | 攝像機 |
