前幾節的例子已經介紹了一些按鈕控件的用法，但是筆者的同事一致反映，在jQuery Mobile中按鈕只能以佔滿一行的形式平鋪顯得過於單調，正巧筆者在貼吧看到了一個學生設計的簡單播放器（如圖6-13），於是產生了靈感，決定用一組內聯的按鈕來實現一個簡單播放器的控制面板。
圖 6-13 簡單的音樂播放器
要實現的功能很簡單，就是選取頁面中的一行，使其中並排放置4個大小相同的按鈕，分別顯示爲播放、停止、前進和後退，可是這真的能實現嘛？
也許有讀者會說，可以重新設計按鈕的樣式文件對其CSS進行重寫，這當然是一種非常直接的方法，但是實在是過於麻煩了。因爲jQuery Mobile已經爲開發者準備了按鈕的內聯功能可以方便的實現筆者想要的效果。
【範例6-5 利用按鈕分組製作的播放器界面】
<!DOCTYPE html> <!--聲明HTML 5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>簡單的播放器</title> <!--頁面標題-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入jQuery Mobile樣式文件
<link rel="stylesheet" href="jquery.mobile.min.css" />
<!--引入jQuery支持庫
<script src="jquery-1.7.1.min.js"></script>
<!--引入jQuery Mobile所需的js文件
<script src=“jquery.mobile.min.js”></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<a href="#">返回</a>
<h1>音樂播放器</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="#" data-role="button">no air </a>
<a href="#" data-role="button">
<!--網上隨意下載的圖片，將圖片寬度設置爲80%使兩邊留有空隙-->
<img src="1.jpg" style="width:80%;"/>
</a>
<!--這裏歌手和來源佔用兩格可以使頁面更加和諧-->
<a href="#" data-role="button">jordin sparks</a>
<a href="#" data-role="button">No Air </a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<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>
<div data-role="footer">
<h1>暫無歌詞</h1>
</div>
</div>
</body>
</html>
運行結果如圖6-14所示。
除了操作面板之外，利用按鈕的分組功能又設計了一個簡單的音樂內容面板，其中包括了正在播放音樂的名稱、作者來源等消息，下面來介紹一下按鈕分組的方法。
首先是偏上部分的音樂內容面板，簡單地對4個按鈕分在了一組，在這一組按鈕的外面包了一個“div”標籤，其中將屬性data-role設置爲"controlgroup"。在頁面中可以清楚地看到4個按鈕被緊緊地鏈接在了一起，最外側的兩個面被加上了圓弧，看上去非常大氣。
接下來是操作面板，依然是將4個按鈕分在一組，不同的是這次要給外面的div標籤多設置一組屬性data-type="horizontal"，將排列方式設置成橫向。
提示：這裏還可以給某個按鈕設置主題，比如說播放鍵加上不同的顏色，使之更加醒目，更易於用戶操作。
圖6-14 音樂播放器界面
jQueryMobile可用度越來越高，入門門檻低，可以少寫代碼來生成移動設備友好的界面。《構建跨平臺APP：jQuery Mobile移動應用實戰》這本書採用實例驅動的方式介紹jQueryMobile下的APP開發，全書提供70餘個實戰案例教會讀者進行移動開發，最後還通過6個小型項目來複習和鞏固所學知識點。想和作者交流，加Q羣：348632872，作者在這裏等你來哦。
