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 攝像機