前言
到目前为止，我打了几天酱油了，这几天落实了工作，并且看了一部电视连续剧（陈道明-手机），我很少看连续剧了，但是手机质量很高啊，各位可以看看。
我们今天先学习一下jquery mobile的基础知识，然后逐步进入移动开发吧。
我们这里再来看看响应式布局，我们是一个页面可以在不同的设备上使用，其实这在某些方面上是不太合适的。
因为我们移动端的事件不太一致，可能鼠标操作很方便的，用手就不行了，所以为移动端出单独的网页还是很有必要的。
文中测试链接请使用手机打开。
什么是jQuery Mobile？
jquery mobile是jquery在移动设备上的版本，他是基于jquery、HTML5、CSS3构建的，他提供了一个丰富的交互性强的接口用以兼容不同移动平台。
于是我们去下载一番：
我这里就直接下载的这个压缩文件了，完了我们看看他有些什么东西，我们这个还是要依赖jquery的，所以还是准备一个吧。
这个东东是个好东西哦，他还有配套的样式呢，依赖他我们可以开发一套不错的手机应用呢。
自定义属性
在jquery mobile中，是使用自定义属性驱动页面的（data-....），比如：
data-role
定义元素在页面中的角色，该属性允许定义不同的组件元素及页面视图：data-role="page"
data-title
定义jquery mobile视图页面标题
data-transition
定义视图切换的动画效果
data-rel
定义具有浮动效果的视图
data-theme
指定元素或者组件内主题样式风格
data-icon
在元素内增加小图标
data-iconpos
定义小图标位置
data-inline
指定按钮根据内容自适应其长度
data-type
定义分组按钮水平或者垂直方向排布
data-rel
定义具有特定功能的元素，例如data-rel="back"返回按钮
data-add-back-btn
指定视图页面自动在页眉左侧添加返回按钮
data-back-btn-text
指定由石头页面自动创建的返回按钮的文本内容，该属性的使用通常都需要和data-add-back-btn配合
data-position
该属性是实现在滑动屏幕时工具栏的显示和隐藏状态
data-fullscreen
用于指定全屏视图页面
data-native-menu
指定下拉选择功能采用平台内置的选择器
data-placeholder
设置下拉选择功能的占位符
data-inset
实现内嵌列表功能
data-split-theme
设置列表右侧图标的主题样式风格
data-filter
开启列表过滤功能
搞了这么多自定义属性，我们也不知道什么是什么，所以不如来试一试吧。
页面与视图
页面与视图作为移动web应用程序最重要的用户界面之一，他主要承担整个web应用程序的界面呈现工作。
jquery mobile提供一套自定义元素属性用于搭建各种页面和视图。
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link href="jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
7 <script src="jquery-1.7.1.js" type="text/javascript"></script>
8 <script src="jquery.mobile-1.3.1.js" type="text/javascript"></script>
9 </head>
10 <body>
11 <div data-role="page">
12 <div data-role="header">页头
13 </div>
14 <div data-role="content">内容
15 </div>
16 <div data-role="footer">页脚
17 </div>
18 </div>
19 </body>
20 </html>
复制代码
http://sandbox.runjs.cn/show/itndsvbq
不要说还是有点感觉的。。。
我们在实例中使用div元素作为视图页面的布局元素但是我们这里改为html的元素更加好：
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
7 <script id="jquery_182" type="text/javascript" class="library"
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
8 <script id="jquerymobile_120" type="text/javascript" class="library"
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
9 </head>
10 <body>
11 <section data-role="page">
12 <header data-role="header">页头
13 </header>
14 <article data-role="content">内容
15 </article>
16 <footer data-role="footer">页脚
17 </footer>
18 </section>
19 </body>
20 </html>
复制代码
多视图web页面
前面只有一个视图，我们现在来看看多视图页面怎么处理：
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
8 <script id="jquery_182" type="text/javascript" class="library"
9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10 <script id="jquerymobile_120" type="text/javascript" class="library"
11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <section data-role="page" id="v1">
15 <header data-role="header">视图一
16 </header>
17 <article data-role="content">
18 <a href="#v2">去视图二</a>
19 </article>
20 <footer data-role="footer">页脚
21 </footer>
22 </section>
23 <section data-role="page" id="v2">
24 <header data-role="header">视图二
25 </header>
26 <article data-role="content">
27 <a href="#v1">去视图1</a>
28 </article>
29 <footer data-role="footer">页脚
30 </footer>
31 </section>
32 </body>
33 </html>
复制代码
http://sandbox.runjs.cn/show/l4vejd6v
我们点击超链接可以在视图一与视图二切换，你会发现还有一点点动画效果呢！！！
PS：在此若是设置了data-title将改变手机上title的标题
动画
我们可以设置6钟动画效果：
复制代码
① Slide 从右到左切换
② Slideup 从下到上切换
③ Slidedown 从上到下切换
④ Pop弹出框方式打开
⑤ Fade 渐变褪色方式
⑥ Flip飞入飞出方式
复制代码
这里我就不截图了，我私下试试去。
<a href="#v1" data-transition="pop">去视图1</a>
效果感觉不错哦！！！
dialog对话框
只要在标签的data-rel设置了dialog属性，视图就具有dialog浮动层效果。
<a href="#v2" data-rel="dialog">去视图二</a>
这里有点表现不佳，我们暂时不管他。
页面主题
<section data-role="page" id="v1" data-theme="a">
关于自定义属性的东西暂时写到这里，我们来看看我们比较重要的按钮。
按钮
按钮在移动web应用程序中式非常重要的用户界面组件，主要用作为用户提供各种操作入口和视图交互功能，我们的jquery mobile提供了很多不错的按钮。
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
8 <script id="jquery_182" type="text/javascript" class="library"
9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10 <script id="jquerymobile_120" type="text/javascript" class="library"
11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="button">我是按钮</div>
15 </body>
16 </html>
复制代码
于是我们的按钮就出现啦，在页面上独占一行。
input 中button、submit等也都变成了这个样式了
小图标
jquery mobile提供了一套小图标：
图标太多，我这里简单列两个：
delete：删除，data-icon="delete"
plus：加号，data-icon="plus"
PS:设置data-iconpos="notext"便可以只要图标不要文字
1 <div data-role="button" data-icon="delete">删除</div>
2 <div data-role="button" data-icon="delete" data-iconpos="notext">删除</div>
3 <div data-role="button" data-icon="delete" data-iconpos="right">删除</div>
http://sandbox.runjs.cn/show/xd9axexu
若是系统提供的图标不能满足条件的话，便可以自定义图标
data-icon="myapp-email"
myapp-email就是自定义图标的名称（需要上传）
css中对应的样式是.ui-icon-myapp-email
自定义图标大小是18*18，建议png-8
按钮分组
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
8 <script id="jquery_182" type="text/javascript" class="library"
9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10 <script id="jquerymobile_120" type="text/javascript" class="library"
11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="controlgroup" data-type="horizontal">
15 <div data-role="button" data-icon="plus">
16 添加</div>
17 <div data-role="button" data-icon="delete">
18 删除</div>
19 <div data-role="button" data-icon="refresh">
20 修改</div>
21 </div>
22 <div data-role="controlgroup" data-type="horizontal">
23 <div data-role="button" data-icon="plus">
24 添加</div>
25 <div data-role="button" data-icon="delete">
26 删除</div>
27 <div data-role="button" data-icon="refresh">
28 修改</div>
29 </div>
30 </body>
31 </html>
复制代码
http://sandbox.runjs.cn/show/u7cydmrv
感觉还不错的说，这里还可以为各个按钮设置主题，看起来就更加有分别了。
Bar 工具栏
工具栏也是一重要组件，我们这里结合前面的按钮来完成一完整的工具栏。
jquery mobile提供两组工具栏：
Headers bar
充当视图页面的标题作用，在一般情况下header bar位于页面的顶部，一般包含2按钮
Footer bar
这个工具栏一般位于尾部，就是与header bar对应的东东
初体验：
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
8 <script id="jquery_182" type="text/javascript" class="library"
9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10 <script id="jquerymobile_120" type="text/javascript" class="library"
11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="page">
15 <header data-role="header">
16 <h1>header bar</h1>
17 </header>
18 <div>内容区域</div>
19 <footer data-role="footer">
20 <h2>footer bar</h2>
21 </footer>
22 </div>
23 </body>
24 </html>
复制代码
我们在此基础上改下：
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
8 <script id="jquery_182" type="text/javascript" class="library"
9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10 <script id="jquerymobile_120" type="text/javascript" class="library"
11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="page">
15 <header data-role="header">
16 <h1>header bar</h1>
17 </header>
18 <div>内容区域</div>
19 <footer data-role="footer">
20 <div data-role="controlgroup" data-type="horizontal" >
21 <div data-role="button" data-icon="plus" data-theme="a">
22 添加</div>
23 <div data-role="button" data-icon="delete" data-theme="b">
24 删除</div>
25 <div data-role="button" data-icon="refresh" data-theme="c">
26 修改</div>
27 </div>
28 </footer>
29 </div>
30 </body>
31 </html>
复制代码
http://sandbox.runjs.cn/show/icqp5f8v
导航工具条
navbar是非常有用的，他提供不同数量的按钮组合，一般位于header或者footer中
复制代码
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"
7 href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
8 <script id="jquery_182" type="text/javascript" class="library"
9 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10 <script id="jquerymobile_120" type="text/javascript" class="library"
11 src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="page">
15 <header data-role="header">
16 <h1>header bar</h1>
17 </header>
18 <div>内容区域</div>
19 <footer data-role="footer">
20 <nav data-role="navbar">
21 <ul>
22 <li>
23 <a href="#" class="ul-btn-active" data-icon="home">主页</a>
24 </li>
25 <li>
26 <a href="#" data-icon="search">查找</a>
27 </li>
28 <li>
29 <a href="#" data-icon="info">信息</a>
30 </li>
31 </ul>
32 </nav>
33 </footer>
34 </div>
35
36 </body>
37 </html>
复制代码
http://sandbox.runjs.cn/show/pwbcm0mo
各位感觉还行吧。。。
fixed工具栏
这个家伙提供后，我们在轻触屏幕或者滑动屏幕时，header和footer都会出现或者消失
<header data-role="header" data-position="fixed">
结语
我们今天暂时学到这里，明天再继续吧。
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3186550.html如需转载请自行联系原作者
