jQuery Mobile 圖示

我們可以使用圖示類在 jQuery Mobile 中 <a> 和 <button> 元素上新增圖示,並對圖示進行定位,如下所示:


<a href="https://www.itread01.com/jquerymobile/#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="https://www.itread01.com/jquerymobile/#anylink" data-icon="refresh">重新整理頁面</a> 嘗試一下

我們可以使用 data-icon 屬性在導航按鈕上新增圖示:


<a href="https://www.itread01.com/jquerymobile/#anylink" data-icon="refresh">重新整理頁面</a> 嘗試一下

如果要在列表按鈕中新增圖示,可以在 <li> 中使用 data-icon 屬性:


<li data-icon="refresh"><a href="https://www.itread01.com/jquerymobile/#">點我</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 攝像機 嘗試一下