最新的Web開發教程
 

jQuery Mobile圖標

❮上一頁 下一頁章❯

jQuery的圖標

要將圖標添加到您的<a>和<button>在jQuery Mobile的元素，使用的圖標類，如下圖所示的圖標位置（唯一的例外是在navbars，功能的按鈕，顯示進一步下跌）：

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</a> Try it

<button class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</button> Try it

要將圖標添加到您<input>按鈕，使用data-icon的屬性：

<input type="button" value="Refresh page" data-icon="refresh" > Try it

要將圖標添加到您的導航欄按鈕，使用數據圖標的屬性：

<a href="#anylink" data-icon="refresh" >Refresh Page</a> Try it

要將圖標添加到您的列表按鈕，請使用數據圖標屬性<li>

<li data-icon="refresh" ><a href="#">Click me</a></li> Try it

下面我們列出了jQuery Mobile的提供了所有可用的圖標：

值 描述 圖標 例
action 行動（順時針箭頭指出了一個箱子） 嘗試一下
alertalert 嘗試一下
audio 音頻/聲音/揚聲器 嘗試一下
arrow-d-l 箭頭向下指向左側 嘗試一下
arrow-d-r 箭頭向下指向右側 嘗試一下
arrow-u-l 箭頭向上指向左側 嘗試一下
arrow-u-r 箭頭向上指向右側 嘗試一下
arrow-l 箭頭指向左邊 嘗試一下
arrow-r 箭頭指向右邊 嘗試一下
arrow-u 箭頭朝上 嘗試一下
arrow-d 向下箭頭 嘗試一下
back 返回（彎曲箭頭指向向上逆時針） 嘗試一下
bars 酒吧（在每個其他三個水平條） 嘗試一下
bullets 子彈（超過對方三橫子彈） 嘗試一下
calendarcalendar 嘗試一下
cameracamera 嘗試一下
carat-d 克拉朝下 嘗試一下
carat-l 克拉指向左邊 嘗試一下
carat-r 克拉指向右側 嘗試一下
carat-u 克拉朝上 嘗試一下
check 複選標記 嘗試一下
clockclock 嘗試一下
cloudcloud 嘗試一下
commentcomment 嘗試一下
delete 刪除（X） 嘗試一下
edit 編輯/鉛筆 嘗試一下
eyeeye 嘗試一下
forbidden 禁止符號 嘗試一下
forwardforward 嘗試一下
geargear 嘗試一下
gridgrid 嘗試一下
heart 心臟/愛的象徵 嘗試一下
homehome 嘗試一下
info 信息 嘗試一下
location 定位/ GPS 嘗試一下
lock 鎖/掛鎖 嘗試一下
mail 郵件/信 嘗試一下
minusminus 嘗試一下
navigationnavigation 嘗試一下
phone 電話 嘗試一下
power 功率（開/關） 嘗試一下
plusplus 嘗試一下
recyclerecycle 嘗試一下
refreshrefresh 嘗試一下
searchsearch 嘗試一下
shop 商店/帕格/錢包 嘗試一下
starstar 嘗試一下
tagtag 嘗試一下
user 用戶/人 嘗試一下
video 錄影機 嘗試一下


❮上一頁 下一頁章❯