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