大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对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. Java基础--finalize()方法

    原理: 一旦垃圾回收器准备好释放对象占用的存储空间,将首先调用其finalize()方法,并在下一次垃圾回收动作发生时,才会真正回收对象占用的内存. 用途: 1)释放通过某种创建对象方式以外的方式为对 ...

  2. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  3. 猪猪的机器学习笔记（十七）隐马尔科夫模型HMM

    隐马尔科夫模型HMM 作者:樱花猪 摘要: 本文为七月算法(julyedu.com)12月机器学习第十七次课在线笔记.隐马尔可夫模型(Hidden Markov Model,HMM)是统计模型,它用来 ...

  4. VMware: linux起步提示 memory for crashkernel(0*0 to 0*0)not within permissible

    (virtualbox/VMware)linux起步提示memoryforcrashkernel(0*0 to 0*0)notwithinpermissible  http://www.myexcep ...

  5. php随笔4-thinkphp 学习-ThinkPHP3.1快速入门（2）数据CURD

    ThinkPHP3.1快速入门(2)数据CURD   浏览:194739 发布日期:2012/09/05 分类:文档教程 关键字: 快速入门 CURD 上一篇中,我们了解了ThinkPHP的基础部分, ...

  6. Oracle 字段是多个值的字符串的查询处理

    1.创建两张表一张用户表(T_User),一张兴趣小组表T_Group,其中小组成员字段存储用户ID列表以逗号隔开, 表:T_User 编号(F_ID) 名称(用户名) 1 张三 2 李四 3 王五 ...

  7. 告别IE给我们的web开发带来的困扰（使用chrome frame v8引擎）

    茶爸爸个人微信:benyzhous,公众号:cha-baba欢迎骚扰 由于客户所有机器必须使用IE6浏览器,导致我们在开发项目过程中遇到非常多的样式与性能问题,在偶然的一次使用360软件管家搜索chr ...

  8. C 语言中的变量为什么不能以数字打头

    C 语言中的变量为什么不能以数字打头? C 语言中的变量为什么不能以数字打头? 不要告诉我编译原理书上有.我暂时看不懂. 除了下面的解释外, “假如变量名允许以数字开头的话,那么语法分析器在解析一个全 ...

  9. poj 1256 Anagram(dfs)

    题目链接:http://poj.org/problem?id=1256 思路分析:该题为含有重复元素的全排列问题:由于题目中字符长度较小,采用暴力法解决. 代码如下: #include <ios ...

  10. HDU 4734 F(x) 2013 ACM/ICPC 成都网络赛

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4734 数位DP. 用dp[i][j][k] 表示第i位用j时f(x)=k的时候的个数,然后需要预处理下小 ...