前言

首先,先来介绍一下APP开发的几种方式:

** 1.Web App **

Web App这个主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发. 用户无需下载,通过不同平台的浏览器访问来实现跨平台,同时可以通过浏览器支持充分使用HTML5特性,缺点是这些基于浏览器的应用无法调用系统API来实现一些高级功能,也不适合高性能要求的场合.

** 2.Native APP **

Native APP就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用.使用它们的优点是可以完全利用系统的API和平台特性,在性能上也是最好的。缺点是由于开发技术不同,如果你要覆盖多个平台,则要针对每个平台独立开发,无跨平台特性.

** 3.Hybird App **

Hybird App则是为了弥补如上两者开发模式的缺陷的产物.分别继承双方的优势.首先它让为数众多的web开发人员可以几乎零成本的转型成移动应用开发者.其次,相同的代码只需针对不同平台进行编译就能实现在多平台的分发,大大提高了多平台开发的效率;而相较于web App,开发者可以通过包装好的接口,调用大部分常用的系统API。PhoneGap正是Hybird APP的代表开发框架.

下面正式进入正题:

一个最基本的jQuery Mobile页面开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>

<div data-role="page" id="one">

<div data-role="header">
<h1>第 1 页</h1>
</div>

<div data-role="content">
<ul data-role="listview">
<li><a href="#two">第 2 页</a></li>
</ul>
</div>

<div data-role="footer">
<h4>页面脚注</h4>
</div>

</div>


<div data-role="page" id="two">

<div data-role="header">
<h1>第 2 页</h1>
</div>

<div data-role="content">
<ul data-role="listview">
<li><a href="#one">第 1 页</a></li>
</ul>
</div>

<div data-role="footer">
<h4>页面脚注</h4>
</div>

</div>
</body>
</html>

按钮开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="onepage">

<div data-role="header" data-theme="b">
<h1>头部</h1>
</div>

<div data-role="content" class="ui-content" >
<!--button三种创建方式-->
<button >button按钮</button>
<input type="button" value="input 按钮"/>
<a data-role="button" >a 按钮</a>
<a data-role="button" data-inline="true" data-shadow="true" class="ui-corner-all">inline</a>
<a data-role="button" data-inline="true" data-shadow="false" data-corners="false">inline</a>
<a data-role="button" data-inline="true" data-shadow="true" data-corners="true">inline</a>

<!-- 按钮组-->
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" data-theme="a">首页</a>
<a data-role="button" data-theme="b">介绍</a>
<a data-role="button" data-theme="c">联系</a>
<a data-role="button" data-theme="d">关于</a>
<a data-role="button" href="#twopage">第二页</a>
</div>

</div>

<div data-role="footer" >
<h1>底部</h1>
</div>
</div>


<!--第2个页面 -->
<div data-role="page" data-theme="c" id="twopage">

<div data-role="header" data-theme="b">
<h1>头部</h1>
</div>

<div data-role="content" class="ui-content" >
<a data-role="button" data-rel="back" > 返回</a>
</div>

<div data-role="footer" >
<h1>底部</h1>
</div>
</div>
</body>
</html>

图标开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>

<div data-role="page" data-theme="c" id="twopage">

<div data-role="header" data-theme="b">
<h1>头部</h1>
</div>

<div data-role="content" class="ui-content" >
<!--显示上下左右-->
<div>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-u" ></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-d"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-l"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-r"></a>
</div>

<!--显示图标位置-->
<div>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-u" data-iconpos="top"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-d" data-iconpos="bottom"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-l" data-iconpos="left"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="right"></a>
</div>

<!--只显示图标-->
<div>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-u" data-iconpos="notext"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-d" data-iconpos="notext"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-l" data-iconpos="notext"></a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-r" data-iconpos="notext"></a>
</div>

<div data-role="footer" >
<h1>底部</h1>
</div>

</div>
</body>
</html>

ListView 列表开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>
</div>
<div data-role="page" data-theme="c" id="twopage">
<div data-role="header" data-theme="b">
<h1>头部</h1>
</div>
<div data-role="content" >
<ul data-role="listview">
<!-- 默认为button-->
<li><a href="#">第 2 页</a></li>
<li><a href="#">第 3 页</a></li>
<li><a href="#">第 4 页</a></li>
</ul>
<br>
<br>
<ul data-role="listview" data-inset="true">
<!-- 默认为button-->
<li><a href="#">第 2 页</a></li>
<li><a href="#">第 3 页</a></li>
<li><a href="#">第 4 页</a></li>
</ul>
<ol data-role="listview" data-inset="true">
<!-- 有序列表-->
<li><a href="#">第 2 页</a></li>
<li><a href="#">第 3 页</a></li>
<li><a href="#">第 4 页</a></li>
</ol>
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入查找条件">
<li data-role="list-divider" >江苏</li>
<li><a href="#">南京</a></li>
<li><a href="#">苏州</a></li>
<li><a href="#">盐城</a></li>
<li><a href="#">连云港</a></li>
<li><a href="#">淮安</a></li>
<li><a href="#">宿迁</a></li>
<li data-role="list-divider" >山东</li>
<li><a href="#">日照</a></li>
<li><a href="#">济南</a></li>
<li><a href="#">青岛</a></li>
</ul>
<hr/>

<!--listView 缩略图-->
<ul data-role="listview" data-inset="true">
<li> <a href="#" data-inline="true"> <img src="images/project.jpg" >
<h2>项目</h2>
<p>欢迎来到jQuery Mobli</p>
</a> </li>
</ul>

<hr/>

<h1>我的邮箱</h1>
<ul data-role="listview" data-inset="true">

<li><a href="#" > 收件箱<span class="ui-li-count">35</span> </a></li>
<li><a href="#" > 发件箱<span class="ui-li-count">40</span> </a></li>
<li><a href="#" > 回收站<span class="ui-li-count">3</span> </a></li>

</ul>

</div>
<div data-role="footer" >
<h1>底部</h1>
</div>
</div>
</body>
</html>

表单开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>
</div>
<div data-role="page" data-theme="c" id="twopage">


<div data-role="header" data-theme="b">
<h1>表单测试</h1>
</div>
<div data-role="content" >
<h2>实现表单提交</h2>
<form action="#" method="post">
<div data-role="fieldcontain"><!---添加水平线-->
<label for="name" >姓名:</label>
<input type="text" id="name" />

<label for="grade" >班级:</label>
<input type="text" id="grade" />

<label for="number" >学号:</label>
<input type="text" id="number" />

</div>
<button type="submit" value="提交" data-inline="true" /></button>
<input type="reset" data-inline="true" value="重置"/>

</form>
<br />
<form action="#" method="post">
<h2>实现搜索框</h2>
<div data-role="fieldcontain">
<label for="search" class="ui-hidden-accessible"> 搜索</label>
<input type="search" id="search" name="search" placeholder="请输入搜索内容"/>

</div>

<input type="submit" value="提交" data-inline="true"/>
<input type="reset" value="重置" data-inline="true"/>

</form>

<br><br>
<h2>一个完整的例子</h2>

<form method="post" action="#" >
<div data-role="fieldcontain">

<label for="search" >搜索</label>
<input type="search" id="search" name="search" placeholder="请输入搜索内容..." />
<label for="info">介绍</label>
<textarea placeholder="请输入你的介绍" id="info"></textarea>
<label for="dat" >日期</label>
<select name="day" id="day">
<option selected id="select"> 请选择...</option>
<option id="Mon" >星期一</option>
<option id="Tue" >星期二</option>
<option id="Wed" >星期三</option>

</select>

<fieldset data-role="controlgroup" data-type="horizontal">
<legend>选择你的性别:</legend>
<label for="man" ></label>
<input type="radio" name="sex" checked id="man" >
<label for="woman"></label>
<input type="radio" name= "sex" id="woman">
</fieldset>


<!--按钮组-->
<fieldset data-role="controlgroup" data-type="vertical">
<legend>选择你的爱好:</legend>
<label for="sing" >唱歌</label>
<input type="checkbox" name="hobby" id="sing" >
<label for="climb" >爬山</label>
<input type="checkbox" name="hobby" id="climb" >
<label for="dance" >跳舞</label>
<input type="checkbox" name="hobby" id="dance" >
</fieldset>
<br>
<!--滚动条-->
<label for="slider" >声音</label>
<input type="range" id="slider" value="50" min="0" max="100" step="10" />
<br>
<label for="switch">开关</label>
<select data-role="slider" id="switch">
<option value="on" selected></option>
<option value="off"> </option>

</select>
</div>
<input type="submit" value="提交" data-icon="info" data-iconpos="left" data-inline="true"/>
<input type="reset" value="重置" data-icon="grid" data-iconpos="left" data-inline="true"/>
</form>
</div>


<div data-role="footer" >
<h1>底部</h1>
</div>
</div>
</body>
</html>

导航栏与工具栏开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed" data-fullscreen="true">
<a data-role="button" href="#" data-icon="home">主页</a>
<h1>Jquery Mobile</h1>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
</div>

<div data-role="content">
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
<h2>正文</h2>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<!--设置导航栏,<a>自动转化为button-->
<div data-role="navbar">
<ul>
<li> <a href="#" data-icon="home" >主页</a></li>
<li> <a href="#" data-icon="search" >搜索</a></li>
<li> <a href="#" data-icon="back" >返回</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

布局开发

实现效果

sss

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" > <a data-role="button" href="#" data-icon="home">主页</a>
<h1>Jquery Mobile</h1>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext">搜索</a> </div>
<div data-role="content">

<div class="ui-grid-b">
<!-- 第一行有三个按钮 -->
<div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首页</a></div>
<div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div>
<div class="ui-block-c"><a href="#" data-role="button" data-icon="back">返回</a></div>
<!-- 第二行有二个按钮 -->
<div class="ui-block-a"><a href="#" data-role="button" data-icon="home">首页</a></div>
<div class="ui-block-b"><a href="#" data-role="button" data-icon="search">搜索</a></div>
<!-- 第三行有一个按钮 -->
<div class="ui-block-a"><a href="#" data-role="button" data-icon="back">返回</a></div>
</div>
</div>

<div data-role="footer">
<div data-role="navbar">
<ul>
<li> <a href="#" data-icon="home" >主页</a></li>
<li> <a href="#" data-icon="search" >搜索</a></li>
<li> <a href="#" data-icon="user" >用户信息</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

评论