歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery Mobile 自定義按鈕圖標

jQuery Mobile 自定義按鈕圖標

日期:2017/3/1 9:43:33   编辑:Linux編程

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 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved