大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对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. DevExpress ASP.NET 使用经验谈（6）-ASPxGridView属性设置与CRUD界面优化

    上一节中,我们通过简单的配置,通过ASPxGridView控件的使用,完成了对数据库表的CRUD操作. 这样的界面展现,功能是达到了,但是操作体验上,还是有所欠缺的. 图一 默认生成的列表界面 图二 ...

  2. CAEmitterLayer 粒子发射器

    在iOS 5中,苹果引入了一个新的CALayer子类叫做CAEmitterLayer.CAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果. CAEm ...

  3. C - N皇后问题(搜索)

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  4. BZOJ 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛( floyd )

    对于第 i 头牛 , 假如排名比它高和低的数位 n - 1 , 那么他的 rank 便可以确定 . floyd -------------------------------------------- ...

  5. python命令行解析工具argparse模块【1】

    argpaser是python中很好用的一个命令行解析模块,使用它我们可以很方便的创建用户友好型命令行程序.而且argparse会自动生成帮助信息和错误信息. 一.示例 例如下面的例子,从命令行中获取 ...

  6. a标签阻止跳转的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. win7安装 Apache2.2 PHP5.3 MySQL5.6

    . APACHE2.2    经典参考资料 http://blog.csdn.net/yousuosi/article/details/9859507 官方下载地址  http://mirror.bi ...

  8. codeforces 464B Restore Cube

    题目链接 给8个点, 判断这8个点能否组成一个正方体, 如果能, 输出这8个点. 同一个点的x, y, z可以交换. 每一个点有6种排列方式, 一个8个点, 暴力枚举出所有排列方式然后判断能否组成正方 ...

  9. qt qml 利用xmlhttprequest 调用有赞api

    最近朋友在有赞商城上面开了一个店铺,因为有实体店,一般卖商品后送货上门,但是打票时候老是人工用world文档人工复制黏贴订单打印小票, 所以就找我帮忙做一个软件专门打印小票的,就研究起来调用有赞第三方 ...

  10. document.getElementsByClassName在ie8及其以下浏览器的兼容性问题

    原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用. 修改:加入兼容性判断,在需要用到该方法的位置修改为getClassNames方法. ...