Jquery moblie中的分栏布局

大家好，很高兴又与大家见面了，今天我要给大家展示的是自己对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中的分栏布局

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

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

CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
word中正文分栏重新换页问题
小论文常需要正文分栏,但是标题.摘要不分栏的编排格式. 1.在摘要后面加入分隔符来将内容分为摘要和正文两个部分.选择插入→分隔符→分节符(连续). 2.然后进行分栏.选择格式→分栏. 3.此时如果 ...
多种方式实现平均分栏布局（有间距）div平分行宽
以下例子基于分四栏+栏间有间距的例子分析效果图: html代码: <div class="buy-one-buy"> <h3>淘一淘</h3&gt ...
纯CSS实现侧边栏/分栏高度自动相等
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...
css布局 - 工作中常见的两栏布局案例及分析
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...
Jquery easy UI 上中下三栏布局分类： ASP&period;NET 2015-02-06 09&colon;19 368人阅读评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
WPF中利用后台代码实现窗口分栏动态改变
在WPF中实现窗口分栏并能够通过鼠标改变大小已经非常容易,例如将一个GRID分成竖排三栏显示,就可以将GRID先分成5列,其中两个固定列放GridSplitter. <Grid Backgrou ...
css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应
解决方案主要有五种首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

随机推荐

C&num;实现二维码功能，winform 以及 asp&period;net均可以用
二维码现在用途很多,怎么用C#编程生成呢? 准备 ThoughtWorks.QRCode.dll 需要一个类 QRCode,这个类专门来生成二维码的 using System; using Syst ...
ISP接口隔离原则
一.定义不应该强迫客户程序依赖并未使用的方法二.接口污染接口污染,在C#.C++这样的静态类型语言中是很常见的.一个接口会被他不需要的方法污染.在接口中假如一个方法只是为了能给它的一个子类带来好 ...
The Skins of the Substance
This blog is about a java jar file : Substance.jar well, you can get it from links as below: http:// ...
WIN7、WIN8 右键在目录当前打开命令行Cmd窗口(图文)
Win7系统大家习惯“Win+R”的组合键打开命令提示符. 通常右击文件夹是没有进入命令行进入某个文件夹里面,先按住Shift键,然后鼠标右键,出现选项“在此处打开命令窗口(W)”也可以打开命令行. ...
jquery 插件开发及extend
以下信息是在看了IBM上的一篇文章(使用 jQuery(中级),第 2 部分: 创建自己的插件)http://www.ibm.com/developerworks/cn/web/wa-aj-jquer ...
JBPM学习(四)：执行流程实例
概念: ProcessInstance,流程实例:代表流程定义的一次执行.如:张三昨天按请假流程请了一次假.一个流程实例包括了所有运行阶段,其中最典型的属性就是跟踪当前节点的指针,如下图. Execu ...
【模拟】Codeforces 699A Launch of Collider
题目链接: http://codeforces.com/problemset/problem/699/A 题目大意: 给N个点,向左或向右运动,速度均为1,问最早什么时候有两个点相撞.无解输出-1 题 ...
Linux程序设计读笔3 文件操作
一 linux文件结构二系统调用和设备驱动程序三库函数四底层文件访问五标准IO库六格式化输入输出七文件和目录的维护八扫描目录九错误处理十
Android 源码分析01&lowbar;AsyncTask
[参考文献] http://blog.csdn.net/singwhatiwanna/article/details/17596225 /* * Copyright (C) 2008 The Andr ...
JSP中properties文件的路径问题
做练习的时候,写了个properties文件,放在src/servlet/目录下,访问文件问题花了点时间折腾,最终得到解决,记下. 环境:eclipse jee oxygen,tomcat 9.0. ...