大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对jquery  moblie中网格布局的理解。可能不是尽善尽美，希望大家多多体谅！

在jquery moblie中有两种布局，一种是表格布局（网格布局），一种是分栏布局。虽然通过表格方式可以实现多行多列的内容呈现，但是代码毕竟不够简洁。另外，通过表格方式辅助内容排版还存在这样两个可能的弊端，呈现和渲染表格的速度在移动设备中通常比较耗时和消耗资源 通过表格进行排版的内容，搜索引擎友好型通常不怎么好jQuery Mobile通过支持分栏和网格布局，提供了简单而有效的界面排版方式。这种方式对于之前通过表格的方式进行排版，有不错的应对。jQuery Mobile的分栏格式通常来说具有两类标记嵌套而成，
 Ui-grid-a，表示每栏宽度为移动设备屏幕的50%（一栏的标记）

 Ui-block-a，表示栏目所处的顺序。（这里会常常用来换行，栏里面块的标记）

下面是一个简单的例子：（这里面有那么一部分注释的代码我没有删去，我考虑到读者会在看代码时知道我的思路，不知道这样是否可以有，希望大家给出意见！谢谢！）

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewpoint" content="user-scalable=no,initial-scale=1,
  maximum-scale=1,minimum-scale=1,width=device-width,height=device-height
  ">
  <!--<meta name="format-detection" content="telephone=no">-->
   
 

<style type="text/css">
</style>
    在这里我是用的jquery.mobile-1.4.0-beta.1.css，这还是一个公测版本。但是其中还是有一些喜欢的样式，所以，就相中它了！
  <link rel="stylesheet" href="jquery.mobile-1.4.0-beta.1.css"/>
  <!--<link rel="stylesheet" href="H.css"/>-->
  <!--<link rel="stylesheet" href="LHL.css"/>-->
  <!--<link rel="stylesheet" href="LHL-A.css"/>-->
  <!--<link rel="stylesheet" href="LHL-C.css"/>-->
  <!--<link rel="stylesheet" href="LHL-D.css"/>-->
  <!--<link rel="stylesheet" href="LHL-E.css"/>-->
   
  <!--<link rel="stylesheet" href="jquery.mobile-1.3.2.css"/>-->
  <!--<link rel="stylesheet" href="H.css"/>-->
  <script type="text/javascript" src="jquery.js"></script>
  <!--<script type="text/javascript" src="jquery.mobile-1.3.2.js"></script>-->
  <script type="text/javascript" src="jquery.mobile-1.4.0-beta.1.js"></script>
 

这里是引入了一个ui的样式的封装文件，点击下载：http://ishare.iask.sina.com.cn/f/37768864.html
  <script type="text/javascript" src="jquery-ui-1.10.3.custom.js.js"></script>
   
  </head>
  <body style="width: 300px">
<section data-role="pageTwo" data-theme="a">
   
  <div data-role ="header" data-theme ="b">
   
  <h1> ControlGroup</h1>
  </div>
  <div class ="content" data-role ="content">
  <!--<h2>一 栏</h2>-->
  <div class ="ui-grid-a">
  <div class ="ui-block-a">
  <div class ="ui-grid-a">
  <div class ="ui-block-a">
  <p id="four" style="height: 71px ;"> four</p>
  </div>
  <div class ="ui-block-b">
  <p id="one" style="height: 71px ;"> one</p>
  </div>
   
  <div class ="ui-block-a">
  <p id="two" style="height: 70px;"> two</p>
  </div>
  <div class ="ui-block-b">
  <p id="three" style="height: 70px ;"> three</p>
  </div>
  </div> <!--<p id="oneOne">oneOne</p>-->
  </div>
  <div class ="ui-block-b">
  <p id="oneTwo"> oneTwo</p>
  </div>
   
  <div class ="ui-block-a">
  <p id="twoOne"> twoOne</p>
  </div>
  <div class ="ui-block-b">
  <p id="twoTwo"> twoTwo</p>
  </div>
  <div class ="ui-block-a">
  <p id="threeOne"> threeOne</p>
  </div>
  <div class ="ui-block-b">
  <div class ="ui-grid-a">
  <div class ="ui-block-a">
  <p id="o" style="height: 71px ;"> four</p>
  </div>
  <div class ="ui-block-b">
  <p id="t" style="height: 71px ;"> one</p>
  </div>
   
  <div class ="ui-block-a">
  <p id="tt" style="height: 70px;"> two</p>
  </div>
  <div class ="ui-block-b">
  <p id="f" style="height: 70px ;"> three</p>
  </div>
  </div>
  </div>
  <div class ="ui-block-a">
  <p id="fourOne" > fourOne</p>
  </div>
  <div class ="ui-block-b">
  <p id="fourTwo" > fourTwo</p>
  </div>
  <div class ="ui-block-a">
  <p id="fiveOne" > <input type="button" data-icon="check" value="SURE" data-theme="b"></p>
  </div>
  <div class ="ui-block-b">
  <p id="fiveTwo" > <input type="button" data-icon="delete"value=" EXIT" data-theme="b"></p>
  </div>
 

</div>

</div>

</div>
</div>
   
  <!--<div data-role ="footer" data-theme ="b">HongA+</div >-->
   
  </section>
  </body>
  </html>

生成的界面：

下面还有两个按钮，我就没有截下来。

Jquery moblie中的分栏布局的更多相关文章

  1. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  3. word中正文分栏重新换页问题

    小论文常需要正文分栏,但是标题.摘要不分栏的编排格式. 1.在摘要后面加入分隔符来将内容分为摘要和正文两个部分.选择 插入→分隔符→分节符(连续). 2.然后进行分栏.选择 格式→分栏. 3.此时如果 ...

  4. 多种方式实现平均分栏布局（有间距）div平分行宽

    以下例子基于分四栏+栏间有间距的例子分析 效果图:  html代码: <div class="buy-one-buy"> <h3>淘一淘</h3> ...

  5. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  6. css布局 - 工作中常见的两栏布局案例及分析

    突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...

  7. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. WPF中利用后台代码实现窗口分栏动态改变

    在WPF中实现窗口分栏并能够通过鼠标改变大小已经非常容易,例如将一个GRID分成竖排三栏显示,就可以将GRID先分成5列,其中两个固定列放GridSplitter. <Grid Backgrou ...

  9. css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

    解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

随机推荐

  1. c#语言基础之组成结构

    一.项目结构 .cs---    源文件(程序代码) .csproj---项目文件(管理文件项) .sln---   解决方案文件(管理项目) .config---配置文件 函数的四要素:名称.输入. ...

  2. 请求接口获取到的数据其中出现null值，处理的时候导致了程序crash，解决方案如下：

    第一种方法是使用分类给字典添加一个类方法,将字典中的null值全部替换为空字符串,代码如下: .h文件代码: @interface NSDictionary (DeleteNull) + (id)ch ...

  3. PHP 8大安全函数

    1. mysql_real_escape_string() 这个函数对于在PHP中防止SQL注入攻击很有帮助,它对特殊的字符,像单引号和双引号,加上了“反斜杠”,确保用户的输入在用它去查询以前已经是安 ...

  4. DEDE里有个编码问题，不支持PHP5.4及以上版本！

    公司新配置服务器,没有PHP环境,下载了个PHP5.5.25,配置完毕后,从另外一个服务器转移了一个DEDECMS做的网站,安装后,进入后台,恢复数据发现参数设置里的文本框,只要是中文信息,没有显示, ...

  5. 浅谈Linux ftp服务器相关配置

    首先我们需要在Linux系统下安装FTP服务器  Ubuntu sudo apt-get install.......  centos yun....... 然后,我们要配置vsftpd.conf文件 ...

  6. 2013 南京邀请赛 A play the dice 求概率

    /** 大意:给定一个色子,有n个面,每一个面上有一个数字,在其中的m个面上有特殊的颜色,当掷出的色子出现这m个颜色之一时,可以再掷一次..求其最后的期望 思路:假设 期望为ans 4 ans = 1 ...

  7. FPGA知识大梳理（三）verilogHDL语法入门（2）知识汇总

    1,时序逻辑.将上次的练习修改成时序逻辑会如何设计. always @ (posedge clock) 2,block 与unblocking  A,有clock的always中通常使用nonbloc ...

  8. 1 初级.net web工程师，在工作中都做些什么

    初级.Net Web工程师,在工作中都做些神马?   职责 初级.Net Web工程师的主要职责,就是按比较详细的要求去完成代码. 比较详细的要求是指:一般会把页面式样.功能的描述.数据库结构.性能要 ...

  9. cocos2d-x游戏开发系列教程-超级玛丽05-CMMenuScene

    代码下载链接 http://download.csdn.net/detail/yincheng01/6864893 解压密码:c.itcast.cn 背景 上一篇博文提到appDelegate,在该类 ...

  10. Uva 1061 The Morning after Halloween

    基本思路是BFS: 1. 题目中已经说了,每相连的2X2格子中必有一个‘#’,也就是,每个点周围最多也就三个方向可以走.因此,可以把所有空格都提出来,形成一个图,直接遍历每条边,而不是每次判断4个方向 ...