jquerymobile-9 使用网格(grid)显示页面

在jquerymobile中我们如果使用网格去布局页面,jqm中提供了比较简单的网格布局。只要使用简单的CSS类就可以了。下面看一个例子代码:

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <title>Grid Test</title>  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">  
  7. <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  
  8. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
  9. <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  
  10. </head>  
  11. <body>  
  12. <div data-role="page" id="first">  
  13.     <div data-role="header">  
  14.         <h1>Grid Test</h1>  
  15.     </div>  
  16.     <div data-role="content">  
  17.         <div class="ui-grid-a">  
  18.             <div class="ui-block-a">  
  19.             <p>  
  20.             测试  
  21.             </p>  
  22.             </div>  
  23.             <div class="ui-block-b">  
  24.             <p>  
  25. 巩固完善基本药物制度和基层运行新机制是“十二五”期间深化医药卫生体制改革的重点,是实现2020年人人享有基本医疗卫生服务目标的重要基础。医改实施三年多来,基层医疗卫生机构综合改革全面推进,初步建立了基本药物制度,构建了维护公益性、调动积极性、保障可持续的基层运行新机制。为进一步深化改革,扩大医改成果,现就巩固完善基本药物制度和基层运行新机制提出如下意见。            
  26.             </p>  
  27.             </div>  
  28.         </div>  
  29.     </div>  
  30. </div>  
  31. </body>  
  32. </html>  

代码中被<div class="ui-grid-a">包围的将会分成两列,但是必须配合<div class="ui-block-a">才会起作用。这里ui-grid-a代表分为两列、ui-grid-b代表分为三列,以此类推。ui-block-a、ui-block-b、ui-block-c等分别代表第一列、第二列、第三列,以此类推。

代码效果如下:

jquerymobile-9 使用网格(grid)显示页面_第1张图片

你可能感兴趣的:(jquery,android,html5,mobile,HTML5技术,移动浏览器)