9.17 技巧：使用多个列
到目前为止，已经见过了page、header、footer和theme。有时候在页面中需要使用多个列。尤其是当与平板终端打交道时，可能屏幕上会多出很多有效的剩余空间区块。jQuery Mobile为你提供了默认的类来表示单独的列。代码清单9-20利用这些类在行（row）上放置多个按钮。
代码清单9-20 使用按钮来演示列
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Layout</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14
15 </head>
16 <body>
17
18 <div data-role="page">
19
20 <div data-role="header">
21 <h1>Layouts</h1>
22 </div>
23
24 <div data-role="content">
25
26 <div class="ui-grid-a">
27 <div class="ui-block-a">
28 <a href="#" data-role="button">Left</a>
29 </div>
30 <div class="ui-block-c">
31 <a href="#" data-role="button">Right</a>
32 </div>
33 </div>
34
35 <div class="ui-grid-b">
36 <div class="ui-block-a">
37 <a href="#" data-role="button">Left</a>
38 </div>
39 <div class="ui-block-b">
40 <a href="#" data-role="button">Middle</a>
41 </div>
42 <div class="ui-block-c">
43 <a href="#" data-role="button">Right</a>
44 </div>
45 </div>
46
47 <div class="ui-grid-c">
48 <div class="ui-block-a">
49 <a href="#" data-role="button">Left</a>
50 </div>
51 <div class="ui-block-b">
52 <a href="#" data-role="button">Leftish</a>
53 </div>
54 <div class="ui-block-c">
55 <a href="#" data-role="button">Rightish</a>
56 </div>
57 <div class="ui-block-d">
58 <a href="#" data-role="button">Right</a>
59 </div>
60 </div>
61 </div>
62
63 </body>
64 </html>
首先请看第26、35和47行。这些div包含了类ui-grid-a、ui-grid-b和ui-grid-c。这些类将div转换成了多个列的容器，分别表示2、3和4列。
在这些div之中，你会发现有内嵌的div：它们拥有类ui-block-a、ui-block-b、ui-block-c及ui-block-d。它们就是所谓的“列”。不管在哪个容器中，列的名称都可以被使用。很明显，还是要避免在ui-grid-a中出现ui-block-c的情况为好，因为ui-grid-a会认为只有两列。
时间： 2025-01-25 13:44:34