jQuery Mobile 按鈕圖標(biāo)
jQuery Mobile 提供的一套圖標(biāo)可令您的按鈕更具吸引力。
為 jQuery Mobile 按鈕添加圖標(biāo)
如需向您的按鈕添加圖標(biāo)，請使用 data-icon 屬性：
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
提示：您也可以在 <button> 或 <input> 元素中使用 data-icon 屬性。
下面我們列出了 jQuery Mobile 提供的一些可用圖標(biāo)：
| 屬性值 | 描述 | 圖標(biāo) | 實例 |
|---|---|---|---|
| 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)格 | 測試 |
如需關(guān)于 jQuery Mobile 按鈕圖標(biāo)的完整信息，請訪問我們的 jQuery Mobile 圖標(biāo)參考手冊。
定位圖標(biāo)
您也能夠規(guī)定圖標(biāo)被放置的位置：上、右、下或左。
請使用 data-iconpos 屬性來規(guī)定位置：
圖標(biāo)位置：
<a href="#link" data-role="button" data-icon="search"data-iconpos="top">上</a> <a href="#link" data-role="button" data-icon="search"data-iconpos="right">右</a> <a href="#link" data-role="button" data-icon="search"data-iconpos="bottom">下</a> <a href="#link" data-role="button" data-icon="search"data-iconpos="left">左</a>
提示：默認地，所有按鈕中的圖標(biāo)靠左放置。
只顯示圖標(biāo)
如果只需顯示圖標(biāo)，請將 data-iconpos 設(shè)置為 "notext"：
Back:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>