jquery mobile学习笔记——网格布局

最新推荐文章于 2022-02-05 19:42:14 发布
最新推荐文章于 2022-02-05 19:42:14 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： jquery mobile 学习笔记 文章标签： jquery mobile 网格

作者：无、为（博客园）

3.4　内容格式化

jQuery Mobile中提供了许多非常有用的工具与组件，如多列的网格布局、折叠形的面板控制等，这些组件可以帮助开发者快速实现正文区域内容的格式化。

3.4.1　网格布局

jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“ui-grid-d”，分别对应两列、三列、四列、五列的网格布局形式，可以最大范围满足页面多列的需求。

使用网格布局时，整个宽度为100%，无任何“padding”和“margin”及背景色，因此不会影响到其他元素放入网格中的位置。

实例3-12　在内容区域添加多种类型的网格布局

1. 功能说明

新建一个HTML 页面，在内容区域中添加4种预设的网格布局，并且通过不同的主题颜色进行区分，以分块的形式显示在页面中。

2. 实现代码

新建一个HTML页面3-12.htm，加入代码如代码清单3-12所示。

代码清单 3-12　在内容区域添加多种类型的网格布局

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 网格布局</title>
    <meta name="viewport" content="width=device-width,
           initial-scale=1" />
    <link  href="Css/jquery.mobile-1.0.1.min.css"
           rel="Stylesheet" type="text/css" />
    <link  href="Css/css3.css"
           rel="Stylesheet" type="text/css" />
    <script src="Js/jquery-1.6.4.js"
           type="text/javascript"></script>
    <script src="Js/jquery.mobile-1.0.1.js"
           type="text/javascript"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header"><h1>头部栏标题</h1></div>
      <div class="ui-grid-a">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-b h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-b h60">B</div>
     </div>
   </div>
   <div class="ui-grid-b">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-c h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-c h60">B</div>
     </div>
     <div class="ui-block-c">
    <div class="ui-bar ui-bar-c h60">C</div>
     </div>
   </div>
   <div class="ui-grid-c">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-d h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-d h60">B</div>
     </div>
     <div class="ui-block-c">
    <div class="ui-bar ui-bar-d h60">C</div>
     </div>
     <div class="ui-block-d">
    <div class="ui-bar ui-bar-d h60">D</div>
     </div>
   </div>
   <div class="ui-grid-d">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-e h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-e h60">B</div>
     </div>
     <div class="ui-block-c">
    <div class="ui-bar ui-bar-e h60">C</div>
     </div>
     <div class="ui-block-d">
    <div class="ui-bar ui-bar-e h60">D</div>
     </div>
     <div class="ui-block-e">
    <div class="ui-bar ui-bar-e h60">E</div>
     </div>
   </div>
　　<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
　</div>
</body>
</html>

3. 页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图3-12所示。



 

4. 源码分析

在本实例的代码中，要增加一个多列的网格区域，首先通过<div>元素构建一个容器，如果是两列，则给该容器添加的“class”属性值为“ui-grid-a”；三列则为“ui-grid-b”，依此类推。

然后，在已构建的容器中添加子容器，如果是两列，则给两个子容器分别添加“ui-block-a”、“ui-block-b”样式属性；如果是三 列，则给三个子容器分别添加“ui-block-a”、“ui-block-b”、“ui-block-c”样式属性；其他多列依此类推。

最后，在子容器中放置需要显示的内容。在本实例中，每个子容器都分别放置了一个<div>元素，代码如下所示：

<div class="ui-bar ui-bar-b h60">A</div>

在上述代码中，<div>元素通过“class”属性添加了三个样式。第一个和第二个都是jQuery Mobile自带的样式，“ui-bar”用于控制各子容器的间距，“ui-bar-b”用于设置各子容器的主题样式。第三个样式“h60”为自定义样 式，将子容器的高度设置为“60px”。

说明　如果容器选择的样式为两列即“class”值为“ui-grid-a”，而在它的子容器中添加了三个子项即“class”值为“ui-block-c”，那么该列自动被放置在下一行。

下面是个人使用网格布局实现的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>广电医疗平台</title>
		<link rel='stylesheet' href='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css'/>
		<script type='text/javascript' src='js/jquery-1.7.min.js'></script>
		<script type='text/javascript' src='jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js'></script>
		<link rel ="stylesheet" href="css/public.css"/>
		
		
</head>
<body>
<div data-role="page" class='home'>
    <div data-role='header' data-theme="t">
		<h1>广电医疗平台</h1>
		  <div class="ui-btn-right">
			
		</div> 
    </div>
    
    <div data-role='content'>
		<div class="ui-grid-a" style="margin-top:10px;">
			 <div class="ui-block-a">
				<center>
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/hs1.jpg" alt="医院" />
						</a>
						<span>按医院预约</span>
					</div>
				</center>	
			 </div>
			 <div class="ui-block-b">
				<center>	
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/ks1.jpg" alt="科室" />
						</a>
						<span>按科室预约</span>
					</div>
				</center>	
			 </div>
		</div>
		<div class="ui-grid-a">
			 <div class="ui-block-a">
				<center>
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/doc1.jpg" alt="医院" />
						</a>
						<span>按医生预约</span>
					</div>
				</center>
			 </div>
			 <div class="ui-block-b">
				<center>
					<div class="imgDiv">
						<a href="butUi.html" data-transition="filp">
							<img src="img/yy1.jpg" alt="医院" />
						</a>
						<span>预约复诊</span>
					</div>
				</center>	
			 </div>
		</div>
		<div class="ui-grid-a">
			 <div class="ui-block-a">
				<center>
					<a href="butUi.html" data-transition="filp">
						<img src="img/login.jpg" alt="登陆" style="height:45px;"/>
					</a>
				</center>
			 </div>
			 <div class="ui-block-b">
				<center>
					<a href="butUi.html" data-transition="filp">
						<img src="img/regist.jpg" alt="注册" style="height:45px;"/>
					</a>
				</center>	
			 </div>
		</div>
    </div>
	<style type="text/css">
		.home{
			background-image:url(img/apic324.jpg);
			box-shadow:  0px 0px 30px 5px rgba(107, 105, 105, 0.3) inset,
				0px 0px 0px 1px rgba(107, 105, 105, 0.4) inset;
		}
		.ui-bar-t {
			padding: 5px 0px;
			background-image:url(img/apic324.jpg);
			color: #fff;
			font-family:Georgia;
			font-size:16px;
		}
		img{
			width:120px;
			height:120px;
			margin:8px;
			
		}
		.imgDiv{
			border:1px solid #ccc;
			width:140px;
			height:160px;
			background:#fff;
			font-size:18px;
			font-weight:bold;
			font-family:新宋体;
		}
	</style>
		
</div>

</body>
</html>

效果图：


番茄很忙
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS学习笔记——jquery
lxy95512的博客
03-04 458
JavaScript库 JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库 就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。 jQuery的概念 jQuery是一一个快速、简
jQuery——学习笔记.md
08-01
jq语法
jQuery mobile网格布局
CDSN大帝的专栏
12-15 643
3.4　内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件，如多列的网格布局、折叠形的面板控制等，这些组件可以帮助开发者快速实现正文区域内容的格式化。 3.4.1　网格布局 jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局：“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“
UI控件与Block的灵活使用
阿福的专栏
04-26 1051
static char * const UIViewBlockKey = "UIHelperViewBlockKey"; @interface UIView (UIHelper) + (UIView *) viewWithtouchesBegan:( void(^)(NSSet *touches, UIEvent *event) ) touchesBeganBlock
jquery-weui 栅格布局
蚍蜉的博客
11-03 4785
栅格布局类型 关于栅格布局：根据间距可分为两种类型，有间距和无间距 类型一：默认，有间距 <div class="weui-row"> <div class="weui-col-20">20</div> <div class="weui-col-20">20</div> <div class="weui-col-...
jquery-mobile 网格布局
既是过河之卒，惟有奋力向前。
01-05 199
布局网格 Layout grids 因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置（比如按钮，或导航标签) Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid Jquery Mobile提供了两种预设的配置布局：两列布局（class 含有 ui-grid-a）和三列布局...
jQuery mobile 学习10 布局的设置
responsecool的专栏
02-27 1614
jQuery mobile 学习10 布局的设置
jQuery网格布局列表布局切换特效
06-10
"jQuery网格布局列表布局切换特效"是一种技术手段，它允许用户根据需求动态地在网格布局和列表布局之间进行切换，从而优化不同场景下的浏览体验。这篇文章将深入探讨这一主题，并介绍相关的关键知识点。 首先，...
jQueryMobile学习文档.pptx
05-14
jQuery Mobile 是一个专为移动设备设计的前端框架，它扩展了 jQuery 库，使其能够适应智能手机、平板电脑等移动设备的界面和交互需求。这个框架的主要目标是提供跨平台的一致性体验，使得开发者可以轻松地创建能在...
jQuery网格布局和列表布局切换特效
06-24
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能和方法来帮助开发者实现动态效果，包括网格布局和列表布局的切换。本篇文章将深入探讨jQuery网格布局与列表布局切换特效的实现原理和实践技巧。 首先，我们...
详解jQuery移动页面开发中的ui-grid网格布局使用
11-23
在移动设备上，屏幕宽度狭窄，因此通常不使用多栏布局，但是有时你可能需要将小的元素（如按钮或并排导航标签，例如）多列排列在一起。Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局，叫做ui-grid Jquery Mobile 提供有四个预设的布局，可以在任何情况下都需要列 两列（使用ui-grid-a类） 三列（使用ui-grid-b类） 四列（使用ui-grid-c类） 五列（使用ui-grid-d类） 网格是100%的宽度，完全看不见的（没有边界或背景）和没有margin或padding，所以他们不会干扰样式的元素放在他们里面。在网格容器，子元素
JQuery Mobile 中实现 jqGrid 数据分组
10-29
JQuery Mobile 中实现 jqGrid 数据分组的一个小例子 程序请放在WEB服务器上运行
jQuery Mobile（布局和表单）
04-14
jQuery Mobile（布局和表单）
jQuery 入门级学习笔记及
10-29
本周公司技术讲座轮到我了，准备说说现在流行的jQuery，下面是概要提纲，关键是看custom.js，已上传源码，程序中“//##”是分段用的，大家可以根据每一段取消注释，然后找到相应的id或class名查看效果。
jQueryMobile的组件之栅格系统(grid)
bboyjoe的博客
08-29 1979
ui-grid-a、ui-grid-b、ui-grid-c、ui-grid-d——分别代表承载2列、3列、4列、5列； ui-grid-solo——代表单独承载一列； ui-block-a、ui-block-b、ui-block-c、ui-block-d、ui-block-e——代表在栅格系统中的位置，从第1列依次类推； data-theme——声明元素的主题；
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
lht964249279的博客
02-05 1493
《jQuery Mobile移动应用开发实战》学习笔记
BlockUI详细用法
热门推荐
校尉的博客
04-28 1万+
jQuery BlockUI Plugin概述： jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。 使用jQuery BlockUI，首先需要添加插件js源码的引用： script type="text/javascri
Python实战案例：高血压项目详解（上）
play_big_knife的博客
09-14 1780
自创项目：高血压项目详解 涉及内容：爬虫&开发&数学分析&数据挖掘 a、前端界面的技术——> Juqery Mobile (JQM)，俗称“机器猫” b、后面逻辑——>Django，前后端分离技术，使用模块 django restframework c、收集的数据进行数据分析——Pandas模块，结合pyechars画图 d、从网上抓取在于高血压的文献——>爬虫技术，使用selenium模块进行模拟 一、项目开发前的分析 1、调查问卷对象：病人&am.
Jquery 弹出层
zju_ly的专栏
08-19 628
经常会有些同志问我有没有好用的基于jQuery的弹出层插件，我通常都会毫不犹豫的推荐他这款插件–BlockUI。我也极少接触到其他的jQuery弹出层插件，因为我觉得有了BlockUI这款功能强大的插件已经能满足我的需求了。 先看看BlockUI的演示效果： 查看演示 Bl
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值