jquery Mobile應用第2課《構建跨平臺APP：jQuery Mobile移動應用實戰》連載二（簡單的QWER鍵盤）

善良的粉紅桃桃發表於2014-07-22
jQueryAPP
在jQuery Mobile的佈局中，控制元件大多都是單獨佔據頁面中的一行，按鈕自然也不例外，但是仍然有一些方法能夠讓多個按鈕組成一行，比如說在範例6-5中就利用按鈕分組的方法使4個按鈕並列在一行中，如圖6-24和圖6-25所示。

請輸入圖片描述
圖6-24 實現按鈕分組的方法

請輸入圖片描述
圖6-25 分組的按鈕

而在上一節中也許有讀者已經注意到，頭部欄中的按鈕並沒有佔據一整行，也沒有與多個按鈕一起成組存在，那麼在頁面的其他部分是否也可以讓按鈕以這樣的形式出現呢？

【範例6-9 簡單的QWER鍵盤】
<!DOCTYPE html>
<html>
<head>


<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>

簡單的QWER鍵盤

<div data-role="content">
<a href="#" data-role="button" data-inline="true">Tab</a>
<!—此處省略若干按鈕，請讀者自行新增，用標籤<br/>換行-->
<a href="#" data-role="button" data-inline="true">;</a>
<br/>
<a href="#" data-role="button" data-inline="true">Shift</a>
<!—此處省略若干按鈕，請讀者自行新增，用標籤<br/>換行-->
<a href="#" data-role="button" data-inline="true">/</a>
</div>
<div data-role="footer">
    <h1>排列的非常整齊</h1>
</div>
</div>

</body>
</html>
執行結果如圖6-26所示。

請輸入圖片描述
圖6-26 利用jQuery Mobile實現的QWER鍵盤
觀察程式碼可以發現，每個按鈕都增加了一個新的屬性data-inline="true"，它可以使按鈕的寬度變得僅包含按鈕中標題的內容，而不是佔據整整一行，但是這樣也會帶來一個缺點，就是jQuery Mobile中的元素將不知道該在何處換行，於是就有了第19行處的“
”。

另外就是在使用了該屬性之後，按鈕將不再適應螢幕的寬度，可以看到圖6-26的右側還有一定的空白，這是因為頁面的寬度超出了按鈕寬度的總和。而當頁面寬度不足以包含按鈕寬度時，則會出現如圖6-27所示的混亂結果。

請輸入圖片描述
圖6-27 鍵盤上的按鈕因寬度不夠而自動換行

這時候再看尾部欄中“排列的非常整齊”這幾個字就非常有諷刺意味了，這是因為在使用了屬性data-inline="true"之後，每個按鈕已經將本身的寬度壓縮到了最小，這時如果還要顯示全部內容就只好自動換行來顯示內容了。

提示：其實用jQuery Mobile中的分欄佈局功能要比這種方式好得多，但是由於分欄佈局只能產生規整的佈局，所以在實際使用時還要根據實際情況來決定具體用哪種方案比較合適。

如果您喜歡這些例子，強烈推薦這本適合沒有任何基礎的人來學習的APP開發入門書《構建跨平臺APP：jQuery Mobile移動應用實戰》

低門檻

淺閱讀

輕輕鬆鬆就能學會移動APP開發

不但能瞭解做什麼（What）與怎麼做（How）

更能清楚為什麼要這麼做（Why）
請輸入圖片描述

相關文章