jquery mobile 自定義圖標

Jquery Mobile框架包含了一組最經常使用的移動應用程序所需的圖標，爲了減小下載的大小，Jquery Mobile包含的是的白色的圖標sprite圖片，並自動在圖標後添加一個半透明的黑圈以確保在任何背景色下圖片都可以清晰顯示。

給連接添加data-icon 屬性，能夠添加按鈕的圖標

html代碼

<a href=」index.html」 data-role=」button」 data-icon=」delete」>Delete</a>

帶有圖標的按鈕：

圖標 Icon set

---

data-icon屬性能夠被用來建立以下所示的圖標

左箭頭 data-icon=」arrow-l」

右箭頭 data-icon=」arrow-r」

上箭頭 data-icon=」arrow-u」

下箭頭 data-icon=」arrow-d」

刪除　 data-icon=」delete」

添加　 data-icon=」Plus」

減小　 data-icon=」minus」

檢查　 data-icon=」Check」

齒輪　 data-icon=」gear」

前進　 data-icon=」Forward」

後退　 data-icon=」Back」

網格　 data-icon=」Grid」

五角星 data-icon=」Star」

警告　 data-icon=」Alert」

信息　 data-icon=」info」

首頁　 data-icon=」home」

搜索　 data-icon=」Search」

圖標組 Icon set

---

默認狀況下，全部按鈕圖標出如今按鈕的文本的左側。

能夠經過data-iconpos=」top」 / 「bottom」 屬性來覆蓋此默認

<a href=」index.html」 data-role=」button」 data-icon=」delete」 data-iconpos=」right」>Delete</a>

一個圖標在右邊的按鈕：

也能夠用 data-iconpos=」top」建立圖標在文本上方的按鈕

一個圖標在文字上方的按鈕：

也能夠用 data-iconpos=」bottom」建立圖標在文本下方的按鈕

一個圖標在文字下方的按鈕：

你能夠經過data-iconpos=」notext」建立一個只有圖標的按鈕。button插件會在屏幕上隱藏文本，可是會把文本做爲 title屬性做爲screen readers的問容和支持小提示的瀏覽器， 例如，把前例中的 data-iconpos=」right」替換爲data-iconpos=」notext」

<a href=」index.html」 data-role=」button」 data-icon=」delete」 data-iconpos=」notext」>Delete</a>

一個只有圖標的按鈕

自定義圖標 Custom Icons

要使用自定義圖標，指定一個惟一的data-icon 值（好比data-icon=「myapp-email 」）?Jquery Mobile的button插件會生成一個class值添加上去，該值由ui-icon-與data-icon的值組合而成（ui-icon- myapp-email ），而後在css中指定這個類的背景圖片地址。爲了保持視覺效果的一致，請使用png-8格式的白色8*18的透明圖標

圖標和地址 Icons and themes

在白色圖標後的半透明的黑色圓圈確保了在任何背景色下圖片都可以清晰顯示，也使它能很好的工做在Jquery Mobile主題系統中。如下是一些在不一樣主題樣式下圖標按鈕的例子

「A」主題下的圖標按鈕

「B」主題下的圖標按鈕

「C」主題下的圖標按鈕

==================================可愛的分隔線======================================

不少時候，系統圖標不能知足咱們的要求，那麼如何自定義導航圖標？查找了不少相關資料、google、百度一番以後，發現經過id來定義是個不錯的選擇，看一下作好的效果，不錯吧！

Css Code:

1	.footer .ui-btn .ui-btn-inner{ padding-top:60px; }

2	.footer .ui-btn .ui-icon{width:60px;height:60px;}

3	#btn-about .ui-icon{background:url(../images/icon.png) no-repeat 0 50%;background-size:300px 60px;}

4	#btn-value .ui-icon{background:url(../images/icon.png) no-repeat -60px 50%;background-size:300px 60px;}

5	#btn-technology .ui-icon{background:url(../images/icon.png) no-repeat -120px 50%;background-size:300px 60px;}

6	#btn-case .ui-icon{background:url(../images/icon.png) no-repeat -180px 50%;background-size:300px 60px;}

7	#btn-contactus .ui-icon{background:url(../images/icon.png) no-repeat -240px 50%;background-size:300px 60px;}

Html Code:

查看源代碼 打印 幫助

1	<div class="footer" data-theme="a" data-role="footer" data-position="fixed">

2	<div data-role="navbar">

3

<ul>

4	<li><a id="btn-about" href="#page1" data-icon="custom" data-transition="slide">關於</a></li>

5	<li><a id="btn-value" href="#page2" data-icon="custom" data-transition="slide">價值</a></li>

6	<li><a id="btn-technology" href="#page3" data-icon="custom" data-transition="slide">技術</a></li>

7	<li><a id="btn-case" href="#page4" data-icon="custom" data-transition="slide">案例</a></li>

8	<li><a id="btn-contactus" class="ui-btn-active" href="#page5" data-icon="custom" data-transition="slide">聯繫</a></li>

9

</ul>

10

</div>

11

</div>