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>

生成的界面:

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

 

posted @ 2015-10-14 22:43  星辰之力  阅读(1264)  评论(0编辑  收藏  举报