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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

图6-25 分组的按钮

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

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <div data-role="page"> <div data-role="header"> <h1>简单的QWER键盘</h1> </div> <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>