《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）

在jQuery Mobile的布局中，控件大多都是单独占据页面中的一行，按钮自然也不例外，但是仍然有一些方法能够让多个按钮组成一行，比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中，如图6-24和图6-25所示。

图6-24 实现按钮分组的方法

图6-25 分组的按钮

而在上一节中也许有读者已经注意到，头部栏中的按钮并没有占据一整行，也没有与多个按钮一起成组存在，那么在页面的其他部分是否也可以让按钮以这样的形式出现呢？

【范例6-9 简单的QWER键盘】

点击(此处)折叠或打开

01 <!DOCTYPE html>
02 <html>
03 <head>
04 <meta http-equiv=\\\”Content-Type\\\” content=\\\”text/html; charset=utf-8\\\” />
05 <meta name=\\\”viewport\\\” content=\\\”width=device-width, initial-scale=1\\\”>
06 <link rel=\\\”stylesheet\\\” href=\\\”jquery.mobile.min.css\\\” />
07 <script src=\\\”jquery-1.7.1.min.js\\\”></script>
08 <script src=“jquery.mobile.min.js”></script>
09 </head>
10 <body>
11 <div data-role=\\\”page\\\”>
12 <div data-role=\\\”header\\\”>
13 <h1>简单的QWER键盘</h1>
14 </div>
15 <div data-role=\\\”content\\\”>
16 <a href=\\\”#\\\” data-role=\\\”button\\\” data-inline=\\\”true\\\”>Tab</a>
17 <!—此处省略若干按钮，请读者自行添加，用标签<br/>换行–>
18 <a href=\\\”#\\\” data-role=\\\”button\\\” data-inline=\\\”true\\\”>;</a>
19 <br/>
20 <a href=\\\”#\\\” data-role=\\\”button\\\” data-inline=\\\”true\\\”>Shift</a>
21 <!—此处省略若干按钮，请读者自行添加，用标签<br/>换行–>
22 <a href=\\\”#\\\” data-role=\\\”button\\\” data-inline=\\\”true\\\”>/</a>
23 </div>
24 <div data-role=\\\”footer\\\”>
25 <h1>排列的非常整齐</h1>
26 </div>
27 </div>
28 </body>
29 </html>