【JQuery Mobile移动应用开发实战】JQuery Mobile基础——JQuery Mobile的布局
《jQuery Mobile移动应用开发实战》学习笔记
文章目录
6. JQuery Mobile的布局
本章知识点主要包括:
- 将页面元素并排放置的布局方法
- 利用折叠的方式对页面的元素进行隐藏或展示的方法
- 利用元素折叠的方式实现手风琴效果的方法
6.1 改良后的QQ登录界面
QQ登录界面并列的按钮:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img src="http://img.itful.com/uploads/allimg/091209/0012204349-0.png" style="width:50%; margin-left:25%;"/>
<form action="#" method="post">
<input type="text" name="zhanghao" id="zhanghao" value="账号:" />
<input type="text" name="mima" id="mima" value="密码:" />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<a href="#" data-role="button" data-theme="b" id="login">登录</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-theme="e" id="forget">忘记密码</a>
</div>
</fieldset>
<div class="ui-grid-solo">
<div class="ui-block-a">
<button type="button" data-theme="e">新加入一个按钮</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
效果如下:
fieldset标签是JQuery Mobile专门用来为控件分栏的标签。fieldset有一个属性class=“ui-grid-a”,该属性规定了一栏中所包含控件的数量,由于每栏中控件数量最少是两个,因此用a来代表两个,b代表一行包括三个控件。
在里面的div标签中有属性class="ui-block-a"和class=“ui-block-b”,它们表示该标签占据了所在行中的第一个和第二个位置,假如分成了三栏甚至四栏,那么就会有对应的class="ui-block-c"和class=“ui-block-d”。
在下面的单行按钮代码段加入< div class=“ui-grid-solo” >声明一个空白的分栏来使独立的按钮两侧增加一段较小的缩进,使其与分栏的按钮对齐。
6.2 一种简洁的通讯录设计
上一节展示了使用fieldset标签分栏显示内容的方法,但是每一行中各个栏目的宽度都是平均分配的。
JQuery Mobile是基于JQuery的开源框架,对每一个控件的操作都是透明的,完全可以通过修改CSS来改变JQuery Mobile对原有控件的定义,以改变它们的美观。
利用CSS修改分栏布局:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-grid-b .ui-block-a
{
width:20%;
}
.ui-grid-b .ui-block-b
{
width:60%;
}
.ui-grid-b .ui-block-c
{
width:20%;
}
.ui-bar-c
{
height:60px;
}
.ui-bar-c h1
{
font-size:20px;
line-height:26px;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head1.jpg" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>擎天柱</h1>
<p>18842681111</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<img src="images/11.png" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head2.jpg" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>威震天</h1>
<p>18842681111</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<img src="images/11.png" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head3.jpg" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>大黄蜂</h1>
<p>18842681111</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<img src="images/11.png" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head4.jpg" width="100%" height="100%"></img>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>令狐冲</h1>
<p>18842681111</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-bar ui-bar-c">
<img src="images/11.png" width="100%" height="100%"></img>
</div>
</div>
</fieldset>
</div>
</div>
</body>
</html>
效果如下:
上述代码将每一行分成了三栏,这三栏所占比例分别为20%、60%、20%。JQuery Mobile通过读取CSS中ui-block-a、ui-block-b和ui-block-c处样式对div样式进行渲染,可以重写这三处样式。在使用分栏布局时,如果不是各栏目中使用相同的元素,则一定要设置栏目的高度。
6.3 完美实现九宫格
利用JQuery Mobile实现九宫格界面:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宫格</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#">返回</a>
<h1>九宫格界面</h1>
<a href="#">设置</a>
</div>
<div data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<img src="images/11.png" width="100%" height="100%"/>
</div>
<div class="ui-block-b">
<img src="images/12.png" width="100%" height="100%"/>
</div>
<div class="ui-block-c">
<img src="images/13.png" width="100%" height="100%"/>
</div>
<div class="ui-block-a">
<img src="images/14.png" width="100%" height="100%"/>
</div>
<div class="ui-block-b">
<img src="images/15.png" width="100%" height="100%"/>
</div>
<div class="ui-block-c">
<img src="images/16.png" width="100%" height="100%"/>
</div>
<div class="ui-block-a">
<img src="images/17.png" width="100%" height="100%"/>
</div>
<div class="ui-block-b">
<img src="images/18.png" width="100%" height="100%"/>
</div>
<div class="ui-block-c">
<img src="images/19.png" width="100%" height="100%"/>
</div>
</fieldset>
</div>
</div>
</body>
</html>
效果如下:
本例中每个栏目仅包含一张图片,而每张图片的尺寸是一样的,因此没有必要通过设置栏目高度来保证布局完整。
6.4 可以折叠的QQ好友列表
实现可折叠的QQ好友列表:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以折叠的好友列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.ui-grid-a .ui-block-a
{
width:20%;
}
.ui-grid-a .ui-block-b
{
width:80%;
}
.ui-bar
{
height:60px;
}
.ui-block-b .ui-bar-c h1
{
font-size:20px;
line-height:26px;
}
.ui-block-b .ui-bar-c p
{
line-height:20px;
}
</style>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>变形金刚</h3>
<p>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head1.jpg" width="100%" height="100%" />
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>擎天柱</h1>
<p>楼下的被我干掉了</p>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head2.jpg" width="100%" height="100%" />
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>霸天虎</h1>
<p>其实擎天柱根本打不过我</p>
</div>
</div>
</fieldset>
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>黑名单</h3>
<p>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head3.jpg" width="100%" height="100%" />
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>大黄蜂</h1>
<p>你们慢慢打 我躲起来</p>
</div>
</div>
<div class="ui-block-a">
<div class="ui-bar ui-bar-c">
<img src="images/head4.jpg" width="100%" height="100%" />
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-c">
<h1>令狐冲</h1>
<p>我的乔恩妹子在哪里</p>
</div>
</div>
</fieldset>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下:
data-role="collapsible-set"定义了该部分是可折叠的,但并不是指此标签作为一个整体来折叠,而是将它作为一个容器。data-role=“collapsible” data-collapsed="false"这两个标签的内容才是作为最小单位被折叠的。
仅仅能折叠还是不够的,因为当所有的内容都被折叠隐藏了,还需要一个标识告诉用户被隐藏的是什么内容。这就需要为每一处折叠的内容做一个标题。同一时刻只有一组内容可以被展开。
将< div data-role=“collapsible-set” >去掉就会发现两个折叠项可以同时展开。因为collapsible-set并没有折叠内容的作用,它只是容器,有两个作用:
- 将折叠的栏目按组容纳在其中;
- 保证其中的内容同时仅有一项是被展开的。
因此只要把这部分删去就可以同时展开了。
6.5 展开图标的设置
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以折叠的好友列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-mini="true">
<h4>这是一个小号的折叠标题</h4>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h4>图标改变了</h4>
<ul data-role="listview" data-inset="false">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div data-role="collapsible" data-iconpos="right">
<h4>仔细看图标的位置</h4>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果如下:
6.6 两种不同的Metro效果实现思路
Metro是微软从纽约交通站牌中获得灵感而创造的一种简洁的页面,它的本意是以文字的形式承载更多是信息。
-
完全利用分栏布局的方法
一种实现Metro界面的思路:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>九宫格</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /> <script src="../script/jquery-2.1.4.min.js"></script> <script src="../script/jquery.mobile-1.4.5.min.js"></script> </head> <style> .ui-grid-a .ui-block-a { margin:1%; width:48%; } .ui-grid-a .ui-block-b { margin:1%; width:48%; } </style> <body> <div data-role="page" data-theme="a"> <fieldset class="ui-grid-a"> <div class="ui-block-a"> <img src="images/metro.png" width="100%" height="100%"/> </div> <div class="ui-block-b"> <img src="images/metro.png" width="100%" height="100%"/> </div> <div class="ui-block-a"> <img src="images/metro.png" width="100%" height="100%"/> </div> <div class="ui-block-b"> <img src="images/metro.png" width="100%" height="100%"/> </div> <div class="ui-block-a"> <img src="images/metro.png" width="100%" height="100%"/> </div> <div class="ui-block-b"> <img src="images/metro.png" width="100%" height="100%"/> </div> </fieldset> </div> </body> </html>
效果如下:
其思路非常简单,就是利用JQuery Mobile的分栏功能将每一行分为两部分,然后利用分栏时每一栏的高度恰好满足其中所填充的内容高度这一特点,在其中放入一张大约是正方形的图片,这就形成了Metro的布局。在实际使用中还可以通过修改每一栏所占比例来调整色块所排列的位置。 -
利用纯CSS调整色块尺寸的方法
利用CSS实现Metro界面的方法:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--<script src="cordova.js"></script>--> <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" /> <script src="../script/jquery-2.1.4.min.js"></script> <script src="../script/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $top_height=$("div[data-role=header]").height(); $bottom_height=$("div[data-role=footer]").height(); $body_height=$(window).height()-$top_height-$bottom_height; $body_height=$body_height-10; $body_height=$body_height+"px"; $("div[data-role=metro_body]").width("100%").height($body_height); }); </script> <style type="text/css"> *{ margin:0px; padding:0px;} .metro_color1{ background-color:#ef9c00;} .metro_color2{ background-color:#2ebf1b;} .metro_color3{ background-color:#00aeef;} .metro_color4{ background-color:#ed2b84;} .metro_rec{ width:48%; height:30%; float:left; margin:1%;} </style> </head> <body> <div data-role="page" data-theme="a"> <div data-role="metro_body"> <div class="metro_color1 metro_rec"> </div> <div class="metro_color2 metro_rec"> </div> <div class="metro_color3 metro_rec"> </div> <div class="metro_color4 metro_rec"> </div> <div class="metro_color1 metro_rec"> </div> <div class="metro_color2 metro_rec"> </div> </div> </div> </body> </html>
效果如下:
为色块设计了四种颜色用来对它们加以区分。规定了每个色块的宽度为整个屏幕宽度的48%、高度为外侧容器的30%。接下来就是根据需要设置色块的高度了,通过JavaScript代码实现。JavaScript代码中获取了页面可用部分的高度(屏幕高度减去头部栏和尾部栏所占部分),可以直接将这个高度设置为6个色块外部容器的高度,然后根据CSS设置,每个色块占据其中的30%,这就保证了屏幕的色块始终不会超出屏幕范围,并且在底部有一定空隙。
6.7 简洁的课程表
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--<script src="cordova.js"></script>-->
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>课程表</h1>
</div>
<div data-role="content">
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:30px">
<h1>周一</h1>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height:30px">
<h1>周二</h1>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height:30px">
<h1>周三</h1>
</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-b" style="height:30px">
<h1>周四</h1>
</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-b" style="height:30px">
<h1>周五</h1>
</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<h1>数学</h1>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<h1>语文</h1>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">
<h1>英语</h1>
</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-a">
<h1>数学</h1>
</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-a">
<h1>英语</h1>
</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<h1>数学</h1>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<h1>化学</h1>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">
<h1>语文</h1>
</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-a">
<h1>英语</h1>
</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-a">
<h1>英语</h1>
</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<h1>物理</h1>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<h1>体育</h1>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">
<h1>生物</h1>
</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-a">
<h1>政治</h1>
</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-a">
<h1>数学</h1>
</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-a">
<h1>化学</h1>
</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a">
<h1>语文</h1>
</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-a">
<h1>语文</h1>
</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-a">
<h1>数学</h1>
</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-a">
<h1>英语</h1>
</div></div>
</div>
</div>
</div>
</body>
</html>
效果如下:
本例为显示星期的栏目和显示课程的栏目设置了不同颜色的主题,以区分它们,其他地方按照默认的样式。
更多推荐
所有评论(0)