详解jQuery移动页面开发中的ui-grid网格布局使用


Posted in Javascript onDecember 03, 2015

在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起。Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid

Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列

  • 两列(使用ui-grid-a类)
  • 三列(使用ui-grid-b类)
  • 四列(使用ui-grid-c类)
  • 五列(使用ui-grid-d类)

网格是100%的宽度,完全看不见的(没有边界或背景)和没有margin或padding,所以他们不会干扰样式的元素放在他们里面。在网格容器,子元素被分配ui-block-a / b / c/ d 以连续的方式,使每个“块”元素浮动并列,形成网格。其中ui-block-a类基本上清除浮将开始新的一行(见多行的网格,在下面)。

ui-grid-a 两列布局

建立个两列(50 / 50%)布局,第一层(父容器)添加ui-grid-a属性,第二层(两个子容器)里面分别添加ui-block-a和ui-block-b:

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

上述标记产生以下内容布局:

详解jQuery移动页面开发中的ui-grid网格布局使用

正如你看到的,缺省情况下网格没有视觉造型;他们只是呈现内容并排。

网格的类可以被应用到任何容器。在下一个例子中,我们添加一个ui-grid-a,并应用ui-block,两个按钮分别延伸到50%的屏幕宽度

<fieldset class="ui-grid-a">
 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>  
</fieldset>

详解jQuery移动页面开发中的ui-grid网格布局使用

请注意,这个框架增加网格中的左和右margin的按钮。为一个单一的按钮,您可以使用类ui-grid-solo和按钮类ui-block-a,像下面的例子一个div。这样的按钮将得到同样的margin

<div class="ui-grid-a">
 <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
 <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>  
</div>
<div class="ui-grid-solo">
 <div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

详解jQuery移动页面开发中的ui-grid网格布局使用

主题类(没有数据主题属性)从主题系统可以被添加到一个元素,包括网格。在下面的块,我们增加了两个类:ui-bar添加默认的bar和ui-bar-e应用背景梯度和字体风格的“E”工具栏主题的样本。为了说明的目的,一个内联style=“height:120px”属性也被添加到每个网格设置每一个标准高度。

详解jQuery移动页面开发中的ui-grid网格布局使用

ui-block-b 三列布局

网格布局配置使用class= ui-grid-b在父母和3个子容器的元素,每个都有其各自的ui-block-a / a / c类,创建一行三列布局(33 / 33 / 33%)。注意:这些块同样风格的主题课程,网格布局清晰可见。

<div class="ui-grid-b">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

这为我们的内容,将产生一个33 / 33 / 33%网格布局

详解jQuery移动页面开发中的ui-grid网格布局使用

ui-block-c 四列布局

一行四列,25 / 25 / 25 / 25%网格,是通过在父容器指定class= ui-grid-c和添加四分之一块。注意:这些块同样风格的主题课程,网格布局清晰可见

详解jQuery移动页面开发中的ui-grid网格布局使用

ui-block-c 五列布局

一行五列,20 / 20 / 20 / 20 / 20%网格,是通过在父容器指定class= ui-grid-d

详解jQuery移动页面开发中的ui-grid网格布局使用

多行多列布局

网格设计包装的项目多行。例如,如果您指定了一个三行三列网格(ui-grid-b)在一个容器,有九个子块,则换到3排各3项。有一个CSS规则明确的花车和开始新的一行,当class= ui-block-a是确保在重复序列分配块(A,B,C类,A,B,C,等)映射到网格类型。可以给每行的第一个容器设置为class=ui-block-a 来清除浮动,这样9 个子容器的class 应为:class=ui-block-(a,b,c,a,b,c,a,b,c)。

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>

详解jQuery移动页面开发中的ui-grid网格布局使用

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  </div><!-- /grid-a -->
 </div>
</div>
 
</body>
</html>

详解jQuery移动页面开发中的ui-grid网格布局使用

Javascript 相关文章推荐
用js的for循环获取radio选中的值
Oct 21 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JQuery中clone方法复制节点
May 18 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
js实现菜单跳转效果
Dec 11 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
详解JavaScript对象和数组
Dec 03 #Javascript
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
深入php多态的实现详解
2013/06/09 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
js如何打印object对象
2015/10/16 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Python3 Random模块代码详解
2017/12/04 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
python异常处理和日志处理方式
2019/12/24 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
初中女生自我鉴定
2013/12/19 职场文书
班级聚会策划书
2014/01/16 职场文书
关于逃课的检讨书
2014/01/23 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
事业单位考察材料范文
2014/12/25 职场文书
员工辞职信范文
2015/03/02 职场文书