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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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”，那么该列自动被放置在下一行。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
