jQuery Mobile 自帶很多按鈕小圖標,如下圖所示:
有時候這些圖標無法滿足你的要求的時候,jQuery Mobile 允許你進行自定義圖標。
jQuery Mobile權威指南 PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90318.htm
一般我們在 jQuery Mobile 中定義個按鈕的方法如下:
<a href="/" data-role="button" data-icon="home">返回首頁</a>
data-icon 的值是 jQuery Mobile 預設好的,完整的列表請看這裡。
如果我們想使用自己的圖標,那麼可以指定一個其他的 data-icon 的值,例如
data-icon="send-msg"
然後我們可直接在 CSS 定義:
.ui-icon-send-msg {background:url('/images/mail2_16x16.gif') no-repeat 0 0;}
相當於 ui-icon- 加上你指定的 data-icon 就是對應的 css 的 class 值。
jQuery Mobile 的詳細介紹:請點這裡
jQuery Mobile 的下載地址:請點這裡