jquerymobile-19 使用网格(grid)显示页面
2013-02-20 20:41
225 查看
在jquerymobile中我们如果使用网格去布局页面,jqm中提供了比较简单的网格布局。只要使用简单的CSS类就可以了。下面看一个例子代码:
代码中被<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等分别代表第一列、第二列、第三列,以此类推。
代码效果如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Grid Test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> </head> <body> <div data-role="page" id="first"> <div data-role="header"> <h1>Grid Test</h1> </div> <div data-role="content"> <div class="ui-grid-a"> <div class="ui-block-a"> <p> 测试 </p> </div> <div class="ui-block-b"> <p> 巩固完善基本药物制度和基层运行新机制是“十二五”期间深化医药卫生体制改革的重点,是实现2020年人人享有基本医疗卫生服务目标的重要基础。医改实施三年多来,基层医疗卫生机构综合改革全面推进,初步建立了基本药物制度,构建了维护公益性、调动积极性、保障可持续的基层运行新机制。为进一步深化改革,扩大医改成果,现就巩固完善基本药物制度和基层运行新机制提出如下意见。 </p> </div> </div> </div> </div> </body> </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)显示页面
- 案例19-页面使用ajax显示类别菜单
- 详解jQuery移动页面开发中的ui-grid网格布局使用
- 使用javascript在页面显示26个字母及数字按钮
- 使用Acrobat时,怎样使其默认页面显示方式为启用滚动
- 前台页面使用textarea标签,无法显示后台传入的String类型的值
- 使用JavaScript异常在页面显示错误提示的方法
- jQuery EasyUI使用教程之在数据网格的页脚中显示摘要信息
- 同时使用NavigationController,TabBarController,模态页面造成的显示混乱
- 【C#MVC】使用ajaxFileUpload导入Excel,并显示在Grid中
- 使用IntelliJ IDEA开发Java Web项目时,修改了JSP后刷新浏览器无法及时显示修改后的页面
- asp.net mvc 中使用 iframe 加载相应的静态html页面进行显示
- 使用JS和CSS限制页面显示的字符长度
- 案例20-页面使用redis缓存显示类别菜单
- Flask使用教程-加载静态文件及显示前端页面
- Google搜索结果显示重大改变 使用页面上的导航路径替换页面URL串
- 根据下拉值,使用ajax动态获取数据(在页面显示数据)
- 在用户登录的时候,将用户名显示在登录成功的页面,使用session。
- 在Silverlight页面里显示HTML的免费控件下载(附使用方法代码)