前幾節的例子已經介紹了一些按鈕控件的用法，但是筆者的同僚一緻反映，在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" target="_blank" rel="external nofollow" />
<!--引入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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >傳回</a>
<h1>音樂播放器</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">no air </a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">
<!--網上随意下載下傳的圖檔，将圖檔寬度設定為80%使兩邊留有空隙-->
<img src="1.jpg" style="width:80%;"/>
</a>
<!--這裡歌手和來源占用兩格可以使頁面更加和諧-->
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">jordin sparks</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">No Air </a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">後退</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">播放</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-role="button">暫停</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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，作者在這裡等你來哦。