jquery mobile 柵格化

時間 2019-11-10

原文原文鏈接

 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>

顯示內容javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。