VeryOK建站教程

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 圖標參考手冊。

定位圖標

您也能夠規定圖標被放置的位置:上、右、下或左。

請使用 data-iconpos 屬性來規定位置:

圖標位置:

<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>

親自試一試

江西时时彩交易时间