標籤：遊戲 app 跨平台 jquery mobile
在範例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 導覽列的樣式
當時筆者提到這裡使用了按鈕的預設表徵圖，而這個表徵圖是通過屬性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行動裝置 App實戰》這本書採用執行個體驅動的方式介紹jQueryMobile下的APP開發，全書提供70餘個實戰案例教會讀者進行移動開發，最後還通過6個小型項目來複習和鞏固所學知識點。想和作者交流，加Q群：348632872，作者在這裡等你偶來。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
