大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对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. json对象的操作，json工具

    项目中经常用到json,现在把写了几个js函数,用来获取json对象或者json字符串的长度,以及获取其的key值,value值,并且返回. 这样以后可以直接拿来用,可以省去不少麻烦,也方便以后查看. ...

  2. bash:xxx:command not found

    前几天在centos6.0上配好了oracle 10g并且能够执行oracle相关命令,但是今天准备往oracle里倒数据时,执行sqlplus 出现bash:command not found [o ...

  3. python and 和 or

    在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样.但是它们并不返回布尔值,而是返回它们实际进行比较的值之一. 例 4.15. and 介绍 >>> 'a' a ...

  4. The Priest Mathematician

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=31329#problem/F f[0] = 1 , f[ i ] = f[ i - 1 ] ...

  5. 用200行Python代码“换脸”

    介绍 本文将介绍如何编写一个只有200行的Python脚本,为两张肖像照上人物的“换脸”. 这个过程可分为四步: 检测面部标记. 旋转.缩放和转换第二张图像,使之与第一张图像相适应. 调整第二张图像的 ...

  6. 基于visual Studio2013解决C语言竞赛题之0201温度转换

    题目 解决代码及点评 #include <stdio.h> #include <stdlib.h> void main() { float f; float c; float ...

  7. Java chapter04-1

    public class CPU { int speed; //获得speed的值 public void setSpeed(int m){ speed = m; } //返回speed的值 publ ...

  8. Huffman树编码-优先队列实现

    Huffman编码是之前一道算法作业题,最近又要复习考试了,先把这个的代码再看一下吧. 算法原理很简单,使用优先队列将两个节点弹出,然后合并节点之后再入队列如此循环做下去即可. 主要问题在于树的修改问 ...

  9. BZOJ 1096: [ZJOI2007]仓库建设( dp + 斜率优化 )

    dp(v) = min(dp(p)+cost(p,v))+C(v) 设sum(v) = ∑pi(1≤i≤v), cnt(v) = ∑pi*xi(1≤i≤v), 则cost(p,v) = x(v)*(s ...

  10. <转> 30 个有关 Python 的小技巧

    目录[+] 1.1 拆箱 1.2 拆箱变量交换 1.3 扩展拆箱(只兼容python3) 1.4 负数索引 1.5 切割列表 1.6 负数索引切割列表 1.7指定步长切割列表 1.8 负数步长切割列表 ...