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

浏览数：19 / 时间：2015年06月11日

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