jQuery mobile网格布局
3.4 内容格式化
jQuery Mobile中提供了许多非常有用的工具与组件，如多列的网格布局、折叠形的面板控制等，这些组件可以帮助开发者快速实现正文区域内容的格式化。
3.4.1 网格布局
jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“ui-grid-d”，分别对应两列、三列、四列、五列的网格布局形式，可以最大范围满足页面多列的需求。
使用网格布局时，整个宽度为100%，无任何“padding”和“margin”及背景色，因此不会影响到其他元素放入网格中的位置。
实例3-12 在内容区域添加多种类型的网格布局
1. 功能说明
新建一个HTML 页面，在内容区域中添加4种预设的网格布局，并且通过不同的主题颜色进行区分，以分块的形式显示在页面中。
2. 实现代码
新建一个HTML页面3-12.htm，加入代码如代码清单3-12所示。
代码清单 3-12 在内容区域添加多种类型的网格布局
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 网格布局</title>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<link href="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet" type="text/css" />
<link href="Css/css3.css"
rel="Stylesheet" type="text/css" />
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>头部栏标题</h1></div>
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-b h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-b h60">B</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c h60">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c h60">C</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-bar ui-bar-d h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-d h60">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-d h60">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-d h60">D</div>
</div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e h60">A</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-e h60">B</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-e h60">C</div>
</div>
<div class="ui-block-d">
<div class="ui-bar ui-bar-e h60">D</div>
</div>
<div class="ui-block-e">
<div class="ui-bar ui-bar-e h60">E</div>
</div>
</div>
<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
</div>
</body>
</html>
3. 源码分析
在本实例的代码中，要增加一个多列的网格区域，首先通过<div>元素构建一个容器，如果是两列，则给该容器添加的“class”属性值为“ui-grid-a”；三列则为“ui-grid-b”，依此类推。
然后，在已构建的容器中添加子容器，如果是两列，则给两个子容器分别添加“ui-block-a”、“ui-block-b”样式属性；如果是三 列，则给三个子容器分别添加“ui-block-a”、“ui-block-b”、“ui-block-c”样式属性；其他多列依此类推。
最后，在子容器中放置需要显示的内容。在本实例中，每个子容器都分别放置了一个<div>元素，代码如下所示：
<div class="ui-bar ui-bar-b h60">A</div>
在上述代码中，<div>元素通过“class”属性添加了三个样式。第一个和第二个都是jQuery Mobile自带的样式，“ui-bar”用于控制各子容器的间距，“ui-bar-b”用于设置各子容器的主题样式。第三个样式“h60”为自定义样 式，将子容器的高度设置为“60px”。
说明 如果容器选择的样式为两列即“class”值为“ui-grid-a”，而在它的子容器中添加了三个子项即“class”值为“ui-block-c”，那么该列自动被放置在下一行。
jQuery mobile网格布局的更多相关文章
- jQuery Mobile 网格布局
jQuery Mobile 布局网格 jQuery Mobile 提供了一套基于 CSS 的列布局方案.不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限. 但是有时你需要定位更小 ...
- 分享一个jQuery动态网格布局插件：Masonry(转)
在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...
- JQuery Mobile 图片布局
JQuery Mobile 图片布局 1.实现效果
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局
当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile ,学 ...
- jQuery Mobile 网格
在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e.这些列将依次并排浮动. 网格中的列是等宽的(总宽是 100%),无边框.背景.外边距或内边距. 例: 对于 ui-gr ...
- [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布
[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...
- jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）
在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
随机推荐
- vue-cli 3.0脚手架创建vue项目
1. 卸载vue-cli 2.0 npm uninstall -g vue-cli 2. 安装vue-cli 3.0 npm install @vue/cli 3. 创建项目 npm create & ...
- router-link与router-view的对应关系和映射特点
router-link对应的router-view规律为: 1.根据to的值而定,值为一层(如 /child)则对应app.vue中的router-view: 值为两层,如 /second/child ...
- Maven安装配置及与 IDEA2021集成
============================================== 搭建Java Web开发环境 Windows10 64bit+IDEA2021.2+JDK11+Tomca ...
- 【java基础】枚举
目录 枚举的定义 枚举的使用 原理 枚举的扩展 单例模式 避免反射攻击 反序列化 策略模式 总结 枚举的定义 public enum Color { Red,Blue,Green; } 枚举的使用 C ...
- Java互联网架构师系统进阶课程学习 （4）【享学】
Java互联网架构师系统进阶课程学习 (4)[享学] 4.显式锁和AQS 显式锁 Lock接口和核心方法 Lock接口和synchronized的比较 synchronized 代码简洁,Lock ...
- netty系列之:使用POJO替代buf
目录 简介 decode和encode 对象序列化 使用编码和解码器 总结 简介 在之前的文章中我们提到了,对于NioSocketChannel来说,它不接收最基本的string消息,只接收ByteB ...
- Cancer Cell | 肿瘤微环境渐进式调控AML治疗抵抗的分子机制
急性髓系白血病 ( acute myeloid leukemia, AML ) 是成年人常见的血液系统恶性肿瘤之一,主要表现为髓系原始细胞克隆性恶性增殖及正常造血细胞功能抑制.在AML基因突变图谱中, ...
- Linux 内核的代码仓库太不一样了，光克隆都让我挠头，克隆后居然还丢文件，你肯定也会遇到！！！
一个肯定能让你节省几个小时的小知识 大家好,我是 小猿来也,一个人称撸(划)码(水)小能手的程序猿. 最近一段时间,每次经过旁边大佬工位,总是发现他在快速的切屏,不知道在搞什么?难道他发现了快乐星球? ...
- DL基础补全计划(六)---卷积和池化
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 01 CTF从0到。。。。
无意间在前段时间接触到了CTF,感觉很有意思,就参加了个单位的短期培训,并且参加了比赛,也是无意混进了决赛.感觉自己不会的还很多!SO,开始写博客开始刷题,自己很菜,不会C,不会Python,不会汇编 ...