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

在移动设备上，屏幕宽度狭窄，因此通常不使用多栏布局，但是有时你可能需要将小的元素（如按钮或并排导航标签，例如）多列排列在一起。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 -->

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

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

网格的类可以被应用到任何容器。在下一个例子中，我们添加一个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>

请注意，这个框架增加网格中的左和右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>

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

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%网格布局

ui-block-c 四列布局

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

ui-block-c 五列布局

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

多行多列布局

网格设计包装的项目多行。例如，如果您指定了一个三行三列网格（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>


<!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>

赞 (0)

相关推荐

  • 使用jQuery jqPlot插件绘制柱状图

    使用jQuery jqPlot插件绘制柱状图

    在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqPlot插件进行绘制,这样可以节省大量的时间,也能很快就能展示给用户. 插件官方地址:http://www.jqplot.com/ 具体实现如下: 引用JS文件: 复制代码 代码如下: <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel=&q

  • 推荐25个超炫的jQuery网格插件

    推荐25个超炫的jQuery网格插件

    jQuery 网格插件可以让你创建各种各样的表格布局,网格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery的网格插件,你可以任意控制网格的行和列,用文本和图片进行填充.我用了顶级的来形容这个些插件,我可以肯定你了解它们之后会觉得很酷. 1. Gridify Gridify是轻量级的 jQuery 插件,用来创建一个类似 Pinterest 图片加载网格插件.支持图像加载事件,支持窗口缩放事件,支持非常长的高度项,支持动态项宽度,支持动画 (CSS

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • jqPlot jquery的页面图表绘制工具

    jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件--也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件. 这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法: 第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer) 复制代码 代码如下: <!--[if IE]><script language="

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • jQuery实现的网格线绘制方法

    jQuery实现的网格线绘制方法

    本文实例讲述了jQuery实现的网格线绘制方法.分享给大家供大家参考,具体如下: 效果图如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="

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

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

    在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起.Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列 两列(使用ui-grid-a类) 三列(使用ui-grid-b类) 四列(使用ui-grid-c类) 五列(使用ui-grid-d类) 网格是100%的宽度,完全看不见的(没有边界或背景)和没有ma

  • jQuery移动页面开发中主题按钮的设计示例

    jQuery移动页面开发中主题按钮的设计示例

    在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示,也使它能很好的工作在Jquery Mobile主题系统中.以下是一些在不同主题样式下图标按钮的例子 "A"主题下的图标按钮 data-theme="a" <div data-role="content"> <div data-role="controlgroup" data-type="horizontal"> &

  • 详解iOS App设计模式开发中对于享元模式的运用

    享元模式的概念 在面向对象软件设计中,利用公共对象不仅能节省资源还能提高性能.共享的对象只能提供某些内在的信息,而不能用来识别对象.专门用于设计可共享对象的一种设计模式叫做享元模式(Flyweight pattern). 实现享元模式需要两个关键组件,通常是可共享的享元对象和保存他们的池.某种中央对象维护这个池,并从它返回适当的实例. 运用共享技术有效地支持大量细粒度的对象. 公共交通(如公共汽车)已有一百多年的历史了.大量去往相同方向的乘客可以分担保有和经营车辆(如公共汽车)的费用.公共汽车有

  • 详解Dagger2在Android开发中的新用法

    本文假设读者已经有一定Dagger2使用经验 使用疑惑 之前工作中一直在使用dagger2进行开发,用起来确实很爽,但是我从我第一次使用我就一直有一个问题或者说疑问(本人才疏学浅脑子不够使),通常情况下我们有如下清单 MyApplication,MyAppComponent,MyAppModule ActActivity,ActComponent,ActModule 简单解释下,MyAppModule提供全局单例功能,比如打印日志,ActModule提供Activity级别的功能比如发起网络请求

  • jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介

    触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3

  • 详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例

  • 实例详解jQuery Mockjax 插件模拟 Ajax 请求

    1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单 在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这

  • 详解如何获取C#类中发生数据变化的属性信息

    一.前言# 在平时的开发中,当用户修改数据时,一直没有很好的办法来记录具体修改了那些信息,只能暂时采用将类序列化成 json 字符串,然后全塞入到日志中的方式,此时如果我们想要知道用户具体改变了哪几个字段的值的话就很困难了.因此,趁着这个假期,就来解决这个一直遗留的小问题,本篇文章记录了我目前实现的方法,如果你有不同于文中所列出的方案的话,欢迎指出. 代码仓储地址:https://github.com/Lanesra712/ingos-common/tree/master/sample/csha

  • 详解如何在SpringBoot项目中使用统一返回结果

    详解如何在SpringBoot项目中使用统一返回结果

    目录 1.创建Spring Boot项目 2.返回结果的封装 3.后端接口实现 3.1 创建实体类 3.2 创建dao层 3.3 创建Controller层 4.前端部分 5.验证 在一个完整的项目中,如果每一个控制器的方法都返回不同的结果,那么对项目的维护和扩展都会很麻烦:并且现在主流的开发模式时前后端分离的模式,如果后端返回各式各样的结果,那么在前后端联调时会非常的麻烦,还会增加前后端的格外任务. 所以,在一个项目中统一返回结果就是一个十分必要和友好的做法.接下来就用一个简单的demo来看看

  • 详解浏览器渲染页面过程

    详解浏览器渲染页面过程 1.解析HTML文件,创建DOM树 自上而下,遇到任何样式(link.style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载). 2.解析CSS 优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式: 特定级:id数*100+类或伪类数*10+tag名称*1 3.将CSS与DOM合并,构建渲染树(renderingtree) DOM树与HTML一一对应,渲染树会忽略诸如head.display:none的元素

随机推荐