移动应用实战(移动OA)之二_jQuery Mobile简介
2016-09-30 13:57
435 查看
移动应用实战(移动OA)之二_jQuery Mobile简介
对于jQuery Mobile,我们不做过多介绍,因为w3cschool的教程已经很细致了,只要认真阅读几遍,就能搞懂它。
下面,我们做一个页面练习,页面如下:
![](http://img.blog.csdn.net/20160930134215293?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
使用Dreamweaver,新建一个站点,并在站点下新建一个图片文件夹(images),放入资源图片。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
</script>
<style type="text/css">
.dark {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext">首页</a>
<h1>个人信息</h1>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="images/head1.png"></a>
</li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">用户名</div><div class="ui-block-b dark" id="uname"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所在部门</div><div class="ui-block-b dark" id="dept"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所属公司</div><div class="ui-block-b dark" id="company"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">邮箱</div><div class="ui-block-b dark" id="email"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">手机号码</div><div class="ui-block-b dark" id="phone"></div></div></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a id="gg" href="gg.html"><img src="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" class="ui-btn-active ui-state-persist"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
解释一下页面代码。
1. 首先需要导入jQuery Mobile的脚本库和样式表:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 我们直接引用网络资源,当然也可以下载下来,放在网站里。
2. 每个jQuery Mobile页面的基本结构:
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
</div>
<div data-role="content" data-theme="d">
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
</div>
</div> 每个页面由一个div包围,data-role属性用于定义每个div用来做什么,例如data-role="page",表示这是一个页面(jQuery Mobile可以把多个页面放在一个html文件里)。
在一个页面中,通常包含三部分:header、content、footer,即页头、内容、页脚。
3. 导航栏
页脚的导航栏放在<div data-role="navbar"></div>里,使用无序列表来实现。
4. 如果一块区域需要分成两栏或三栏,可以这样写:
<div class="ui-grid-a"><div class="ui-block-a">所在部门</div><div class="ui-block-b dark" id="dept"></div></div> ui-grid-a表示分两栏,ui-grid-b表示分三栏,以此类推。
第一栏是ui-block-a,第二栏是ui-block-b,以此类推。
对于jQuery Mobile,我们不做过多介绍,因为w3cschool的教程已经很细致了,只要认真阅读几遍,就能搞懂它。
下面,我们做一个页面练习,页面如下:
使用Dreamweaver,新建一个站点,并在站点下新建一个图片文件夹(images),放入资源图片。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
</script>
<style type="text/css">
.dark {
color: #CCC;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext">首页</a>
<h1>个人信息</h1>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="images/head1.png"></a>
</li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">用户名</div><div class="ui-block-b dark" id="uname"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所在部门</div><div class="ui-block-b dark" id="dept"></div></div></li>
<li><div class="ui-grid-a"><div class="ui-block-a">所属公司</div><div class="ui-block-b dark" id="company"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">邮箱</div><div class="ui-block-b dark" id="email"></div></div></li>
<li data-role="list-divider"></li>
<li><div class="ui-grid-a"><div class="ui-block-a">手机号码</div><div class="ui-block-b dark" id="phone"></div></div></li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a id="gg" href="gg.html"><img src="images/gg.png" /><br />公告</a></li>
<li><a id="sp" href="sp.html"><img src="images/sp.png" /><br />审批</a></li>
<li><a id="qd" href="qd.html"><img src="images/qd.png" /><br />签到</a></li>
<li><a id="hys" href="hys.html"><img src="images/hys.png" /><br />会议室</a></li>
<li><a id="grxx" href="grxx.html" class="ui-btn-active ui-state-persist"><img src="images/grxx.png" /><br />个人信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
解释一下页面代码。
1. 首先需要导入jQuery Mobile的脚本库和样式表:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 我们直接引用网络资源,当然也可以下载下来,放在网站里。
2. 每个jQuery Mobile页面的基本结构:
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
</div>
<div data-role="content" data-theme="d">
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
</div>
</div> 每个页面由一个div包围,data-role属性用于定义每个div用来做什么,例如data-role="page",表示这是一个页面(jQuery Mobile可以把多个页面放在一个html文件里)。
在一个页面中,通常包含三部分:header、content、footer,即页头、内容、页脚。
3. 导航栏
页脚的导航栏放在<div data-role="navbar"></div>里,使用无序列表来实现。
4. 如果一块区域需要分成两栏或三栏,可以这样写:
<div class="ui-grid-a"><div class="ui-block-a">所在部门</div><div class="ui-block-b dark" id="dept"></div></div> ui-grid-a表示分两栏,ui-grid-b表示分三栏,以此类推。
第一栏是ui-block-a,第二栏是ui-block-b,以此类推。
相关文章推荐
- 移动应用实战(移动OA)之一_简介
- 移动应用实战(移动OA)之五_会议室管理之二
- 移动应用实战(移动OA)之三_客户端与服务端数据通讯
- 移动应用实战(移动OA)之四_会议室管理之一
- 移动应用实战(移动OA)之七_生成Android手机APP之二
- 移动应用实战(移动OA)之六_生成Android手机APP之一
- Spring+MyBatis 企业应用实战读书笔记之二 Spring MVC简介
- jQuery Mobile做HTML5移动应用的三个优缺点
- 移动互联网应用技术架构简介-Android
- J2ME移动应用开发实战视频教程
- 用jQuery Mobile做HTML5移动应用的三个优缺点
- 移动应用数据统计平台(之二)
- 用JQuery Mobile做HTML5移动应用的三个优缺点
- Java.util包简介并教您如何开发应用之二 (3)
- Kendo UI开发教程(27): 移动应用开发简介
- Kendo UI开发教程(27): 移动应用开发简介
- 移动互联网应用技术架构简介-iOS
- Java.util包简介并教您如何开发应用之二-Java基础-Java-编程开发
- 基于Proteus+8051汇编应用实例系列之二--通过按钮来控制LED流水灯移动
- Android应用开发实战-移动终端团购网项目开发(送源代码)