详解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 相关文章推荐
javascript编程起步(第二课)
Jan 10 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
js获取Get值的方法
Sep 29 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
浅析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验证码(支持中文)
2007/02/14 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
jQuery.each使用详解
2015/07/07 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
js实现无缝轮播图
2020/03/09 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
wxPython中文教程入门实例
2014/06/09 Python
python循环监控远程端口的方法
2015/03/14 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
办公室主任职责范文
2013/11/08 职场文书
物业电工岗位职责
2013/11/20 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android