jQuery Mobile 按鈕圖標(biāo)

jQuery Mobile 按鈕圖標(biāo)

jQuery Mobile 提供了一套讓按鈕看起來更稱心如意的圖標(biāo)。使用這些圖標(biāo)，您可以很明確的知道該按鈕的作用。

添加圖標(biāo)到 jQuery Mobile 按鈕

如需添加圖標(biāo)到您的按鈕，請使用 data-icon 屬性：

提示：您也可以在 <button> 或 <input> 元素上使用 data-icon 屬性。

下面我們列出一些 jQuery Mobile 提供的可用圖標(biāo)：

屬性值	描述	圖標(biāo)	實(shí)例
data-icon="arrow-l"	左箭頭		嘗試一下
data-icon="arrow-r"	右箭頭		嘗試一下
data-icon="delete"	刪除		嘗試一下
data-icon="info"	信息		嘗試一下
data-icon="home"	首頁		嘗試一下
data-icon="back"	后退		嘗試一下
data-icon="search"	搜索		嘗試一下
data-icon="grid"	網(wǎng)格		嘗試一下

如需查看所有 jQuery Mobile 按鈕圖標(biāo)的完整參考手冊，請?jiān)L問我們的 jQuery Mobile 圖標(biāo)參考手冊。

定位圖標(biāo)

您也可以規(guī)定圖標(biāo)定位在按鈕的什么部位：頂部（top）、右側(cè)（right）、底部（bottom）、左側(cè)（left）。

請使用 data-iconpos 屬性來指定位置：

	默認(rèn)情況下，所有的按鈕圖標(biāo)被放置到左側(cè)。

只顯示圖標(biāo)

如果只想顯示圖標(biāo)，請?jiān)O(shè)置 data-iconpos 為 "notext"：

移除圓圈

你會發(fā)現(xiàn)，在默認(rèn)情況下，所有的jQuery Mobile按鈕圖標(biāo)都有一個(gè)灰色的圓圈。你可以使用 "ui-nodisc-icon" 類將它移除：