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-dl | 左下角 | 嘗試一下 | |
arrow-dr | 右下角 | 嘗試一下 | |
arrow-ul | 左上角 | 嘗試一下 | |
arrow-ur | 右上角 | 嘗試一下 | |
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 | 攝像機 | 嘗試一下 |