jquery mobile 栅格化
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
