Latest web development tutorials

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