详解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 相关文章推荐
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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
PHP中的float类型使用说明
2010/07/27 PHP
PHP查询网站的PR值
2013/10/30 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
python如何随机生成高强度密码
2020/08/19 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
银行财务部实习生的自我鉴定
2013/11/27 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
保护环境倡议书500字
2014/05/19 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技