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

Grid Layout Example

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

jquery 移动

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

登录后复制

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

2015123162840041.jpg (828×100)

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

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

登录后复制

2015123162902752.jpg (831×97)

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

登录后复制

2015123162921932.jpg (821×138)

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

2015123162939675.jpg (816×148)

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

2015123162955517.jpg (827×293)

ui-block-c 四列布局

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

2015123163016861.jpg (834×159)

ui-block-c 五列布局

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

2015123163036328.jpg (831×161)

多行多列布局

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

登录后复制

2015123163102847.jpg (827×462)

<!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 id="Grid-Layout-Example">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>

登录后复制

2015123163121080.jpg (785×211)

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7364

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1266

PHP教程

1214

显示更多

Related knowledge

6000 毫安硅负极电池！小米 15Pro 升级再曝料 Jul 24, 2024 pm 12:45 PM

7月23日消息，博主数码闲聊站爆料称，小米15Pro电池容量增大至6000mAh，支持90W有线闪充，这将是小米数字系列电池最大的Pro机型。此前数码闲聊站透露，小米15Pro的电池拥有超高能量密度，硅含量远高于竞品。硅基电池在2023年大规模试水后，第二代硅负极电池被确定为行业未来发展方向，今年将迎来直接竞争的高峰。1.硅的理论克容量可达4200mAh/g，是石墨克容量的10倍以上（石墨的理论克容量372mAh/g）。对于负极而言，当锂离子嵌入量达到最大时的容量为理论克容量，这意味着相同重量下

jQuery引用方法详解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法详解：快速上手指南jQuery是一个流行的JavaScript库，被广泛用于网站开发中，它简化了JavaScript编程，并为开发者提供了丰富的功能和特性。本文将详细介绍jQuery的引用方法，并提供具体的代码示例，帮助读者快速上手。引入jQuery首先，我们需要在HTML文件中引入jQuery库。可以通过CDN链接的方式引入，也可以下载

jQuery如何移除元素的height属性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

国产FPS新王炸！《三角洲行动》大战场超出预期 Mar 07, 2024 am 09:37 AM

《三角洲行动》于今日（3月7日）将开启一场名为“代号：ZERO”的大规模PC测试。而在上周末，这款游戏在上海举办了一次线下快闪体验活动，17173也有幸受邀参与其中。此次测试距离上一次仅仅相隔四个多月，这不禁让我们好奇，在这么短的时间内，《三角洲行动》将会带来哪些新的亮点与惊喜？四个多月前，我已先行在线下品鉴会和首测版本中体验了《三角洲行动》。当时，游戏仅开放了“危险行动”这一模式。然而，《三角洲行动》在当时的表现已然令人瞩目。在各大厂商纷纷涌向手游市场的背景下，如此一款与国际水准相媲美的FPS

荣耀 Magic6 RSR 保时捷设计正式开售 1TB 售 9999 元 Mar 22, 2024 pm 03:03 PM

日前，荣耀手机召开了新品发布会，正式推出了荣耀Magic6RSR保时捷设计。3月22日，CNMO了解到，荣耀Magic6RSR保时捷设计正式开售，仅提供24GB+1TB一种版本，售价9999元。荣耀Magic6RSR采用了保时捷设计的外观，灵感源自保时捷超级跑车的经典元素。背部线条设计灵感来自保时捷飞线式设计，相机模组则采用标志性的六边形设计，使产品拥有鲜明的立体感和动感。此外，产品提供了保时捷原厂大师调色的玛瑙灰和冰莓粉两款配色，更加彰显其独特的设计美感。在屏幕技术上，荣耀Magic6RSR保

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题