jquery mobile 栅格化

最新推荐文章于 2024-12-26 15:03:20 发布

weixin_33815613

最新推荐文章于 2024-12-26 15:03:20 发布

阅读量57

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/NB-JDzhou/p/5265374.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1">
 6 <script type="text/javascript" src="../jquery-1.12.0.min.js"></script>
 7 <script type="text/javascript" src="../jquery.mobile-1.4.5.min.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../jquery.mobile-1.4.5.min.css">
 9 </head>
10 <body>
11 <div class="ui-grid-c"><!-- 代表2列 -->
12     <div class="ui-block-a"><!-- 代表第一列 -->
13         <div class="ui-bar ui-bar-a">hello A</div>
14     </div>
15     <div class="ui-block-b"><!-- 代表第二列 -->
16         <div class="ui-bar ui-bar-c">hello B</div>
17     </div>
18     <div class="ui-block-c"><!-- 代表第三列 -->
19         <div class="ui-bar ui-bar-a">hello C</div>
20     </div>
21     <div class="ui-block-d"><!-- 代表第四列 -->
22         <div class="ui-bar ui-bar-b">hello D</div>
23     </div>
24 </div>
25 <!-- ui-bar-a代表列的样式 -->
26 <!-- ui-grid-c代表展示总的列数 ,c为4列-->
27 <!-- ui-block-a ui-block-b分别代表第一列和第二列，依次类推 -->
28 <!-- 容器内承载其他内容 -->
29 <!-- 同一列当中存在3个按钮 -->
30 <div class="ui-grid-a">
31     <div class="ui-block-a">
32         <input type="button" data-theme="a" value="按钮">
33         <input type="button" data-theme="b" value="按钮">
34         <input type="button" data-theme="a" value="按钮">
35     </div>
36     <div class="ui-block-b">
37         <input type="button" data-theme="a" value="按钮">
38         <input type="button" data-theme="a" value="按钮">
39         <input type="button" data-theme="a" value="按钮">
40     </div>
41 </div>
42 <!-- 当前只放一列 -->
43 <div class="ui-grid-solo"><!-- 变成一行显示内容 -->
44     <div class="ui-block-a">
45         <input type="button" data-theme="a" value="按钮">
46     </div>
47 </div>
48 </body>
49 </html>