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网格布局的更多相关文章

  1. jQuery Mobile 网格布局

    jQuery Mobile 布局网格 jQuery Mobile 提供了一套基于 CSS 的列布局方案.不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限. 但是有时你需要定位更小 ...

  2. 分享一个jQuery动态网格布局插件：Masonry(转)

    在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...

  3. JQuery Mobile 图片布局

    JQuery Mobile 图片布局 1.实现效果

  4. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局

    当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile  ,学 ...

  5. jQuery Mobile 网格

    在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e.这些列将依次并排浮动. 网格中的列是等宽的(总宽是 100%),无边框.背景.外边距或内边距. 例: 对于 ui-gr ...

  6. [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

    [ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,或许我们正在阿谀逢迎自己懒惰的天 ...

  7. jquery Mobile应用第2课《构建跨平台APP：jQuery Mobile移动应用实战》连载二（简单的QWER键盘）

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  8. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  9. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

随机推荐

  1. CH1809 匹配统计 题解

    看了好久才懂,我好菜啊-- 题意:给两个字符串 \(a\) 与 \(b\),对于 \(q\) 次询问,每次询问给出一个 \(x\),求存在多少个位置使得 \(a\) 从该位置开始的后缀子串与 \(b\ ...

  2. 流暢的python---函數闭包

    一.函数的定义及其应用所谓函数,就是把具有独立功能的代码块组织成为一个小模块,在需要的时候调用函数的使用包含两个步骤1.定义函数–封装独立的功能2.调用函数–享受封装的成果函数的作用:在开发时,使用函 ...

  3. C++第三十七篇 -- 调试驱动程序

    上一篇写的KMDF程序是通过串口进行配置的,那么我们在VS中Attach to process外,可以直接用Winbdg进行调试,winbdg.exe所在路径为C:\Program Files (x8 ...

  4. js学习笔记之this指向及形参实参

    var length = 10 function fn () { console.log(this.length) } var obj = { length: 5, method (fn) { fn( ...

  5. AAAI 2021 最佳论文公布

    ​ 作者:Synced 翻译:仿佛若有光 第三十五届 AAAI 人工智能会议 (AAAI-21) 以虚拟会议的形式拉开帷幕.组委会在开幕式上公布了最佳论文奖和亚军.三篇论文获得了最佳论文奖,三篇被评为 ...

  6. 不想用Spring全家桶？试试这个国产JFinal框架

    前言 逃离北上广从广州回老家南宁,入职这家公司用的技术是JFinal,借此机会得以学习这个国产的MVC框架,经过一段时间的学习,基于之前的经验搭建一个通用项目jfinal-demo jfinal-de ...

  7. 升级vs更新，用词莫忘准确（附PHP版本升级教程）

    升级vs更新 Web技术日新月异,更新升级是维护工作之一,长时间不更新(升级)的程序,就如长时间不维护的建筑物一样,会加速老化.功能逐渐缺失直至无法使用.而我们最近发现,有的朋友对"更新&q ...

  8. 1549页Android最新面试题含答案

    在今年年初的疫情中,成了失业人员之一,于是各种准备面试,发现面试题网上很多,但是都是很凌乱的,而且一个地方一点,没有一个系统的面试题库,有题库有的没有答案或者是答案很简洁,没有达到面试的要求.所以一直 ...

  9. nat转换技术，且用且珍惜

    一.NAT转换技术 1.1.NAT技术概述 随着Internet的发展和网络应用的增多,IPv4地址枯竭已经成为制约网络发展的瓶颈.尽管IPv6可以从根本上解决IPv4地址空间不足的问题,但目前众多的 ...

  10. 如何快速方便的生成好看的接口文档(apipost生成文档)

    一键生成文档 我们在"2分钟玩转APIPOST"一讲中,简单介绍了如何生成并分享接口文档: 点击分享文档 复制并打开文档地址就可以看到了完整的接口文档. 本节课主要是讲解一些需要注 ...