在範例5-4所使用的導航欄中，已經爲按鈕加入了圖標的樣式，但是當時並沒有介紹按鈕的圖標究竟是怎麼一回事。下面截取範例5-4中導航欄部分的代碼：
<divdata-role="footer">
<div data-role="navbar"data-grid="c">
<ul>
<li><a id="chat" href="#"data-icon="custom">微信</a></li>
<li><a id="email" href="#"data-icon="custom">通訊錄</a></li>
<li><a id="skull" href="#"data-icon="custom">找朋友</a></li>
<li><a id="beer" href="#"data-icon="custom">設置</a></li>
</ul>
</div>
</div>導航欄部分的樣式如圖6-2所示。
圖6-2 導航欄的樣式
當時筆者提到這裏使用了按鈕的默認圖標，而這個圖標是通過屬性data-icon="custom"來決定的，custom是jQuery Mobile爲開發者準備的默認圖標之一。接下來就介紹怎樣通過data-icon屬性來控制頁面上按鈕的圖標。
【範例6-2 爲尾部欄的按鈕加入圖標】
<!DOCTYPE html> <!--聲明HTML 5-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src=“jquery.mobile.min.js”></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-fullscreen="true">
<a href="#">返回</a>
<h1>頭部欄</h1>
<a href="#">設置</a>
</div>
<div data-role="content">
<a href="#" data-role="button">這是一個按鈕</a>
<!--可以加入圖標，但是在此處先不對它們做任何修改-->
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
<a href="#" data-role="button">這是一個按鈕</a>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<div data-role="navbar">
<ul>
<li><a id="chat" href="#" data-icon="info">微信</a></li>
<!--在此處加入圖標 data-icon=”info”-->
<li><a id="email" href="#" data-icon="home">通訊錄</a></li>
<!--data-icon=”home”圖標樣式爲“主頁”-->
<li><a id="skull" href="#" data-icon="star">找朋友</a></li>
<!--data-icon=”star”圖標樣式爲“星星”-->
<li><a id="beer" href="#" data-icon="gear">設置</a></li>
<!--data-icon=”gear”圖標樣式爲“齒輪”-->
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
運行結果如圖6-3所示。
圖6-3 按鈕的圖標
雖然與微信經過精心設計的圖標還有很大的差距，但是卻比之前光禿禿的十字叉要好看了許多。這些圖標是在jQuery Mobile給出的多組圖表中選出的幾款最適合當前按鈕文字內容的圖標，除了這些圖標之外，jQuery Mobile還爲開發者準備了其他的圖標樣式共17種，筆者將它們整理在表6-1中。
jQueryMobile可用度越來越高，入門門檻低，可以少寫代碼來生成移動設備友好的界面。《構建跨平臺APP：jQuery Mobile移動應用實戰》這本書採用實例驅動的方式介紹jQueryMobile下的APP開發，全書提供70餘個實戰案例教會讀者進行移動開發，最後還通過6個小型項目來複習和鞏固所學知識點。想和作者交流，加Q羣：348632872，作者在這裏等你偶來。
