前言

到目前为止，我打了几天酱油了，这几天落实了工作，并且看了一部电视连续剧（陈道明-手机），我很少看连续剧了，但是手机质量很高啊，各位可以看看。

我们今天先学习一下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提供一套自定义元素属性用于搭建各种页面和视图。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link href="jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />

     <script src="jquery-1.7.1.js" type="text/javascript"></script>

     <script src="jquery.mobile-1.3.1.js" type="text/javascript"></script>

 </head>

 <body>

     <div data-role="page">

         <div data-role="header">页头

         </div>

         <div data-role="content">内容

         </div>

         <div data-role="footer">页脚

         </div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/itndsvbq

不要说还是有点感觉的。。。

我们在实例中使用div元素作为视图页面的布局元素但是我们这里改为html的元素更加好：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library" 
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

     <section data-role="page">

         <header data-role="header">页头

         </header>

         <article data-role="content">内容

         </article>

         <footer data-role="footer">页脚

         </footer>

     </section>

 </body>

 </html>

多视图web页面

前面只有一个视图，我们现在来看看多视图页面怎么处理：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

     <section data-role="page" id="v1">

         <header data-role="header">视图一

         </header>

         <article data-role="content">

             <a href="#v2">去视图二</a>

         </article>

         <footer data-role="footer">页脚

         </footer>

     </section>

      <section data-role="page" id="v2">

         <header data-role="header">视图二

         </header>

         <article data-role="content">

             <a href="#v1">去视图1</a>

         </article>

         <footer data-role="footer">页脚

         </footer>

     </section>

 </body>

 </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提供了很多不错的按钮。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

   <div data-role="button">我是按钮</div>

 </body>

 </html>

于是我们的按钮就出现啦，在页面上独占一行。

input 中button、submit等也都变成了这个样式了

小图标

jquery mobile提供了一套小图标：

图标太多，我这里简单列两个：

delete：删除，data-icon="delete"

plus：加号，data-icon="plus"

PS:设置data-iconpos="notext"便可以只要图标不要文字

   <div data-role="button" data-icon="delete">删除</div>

   <div data-role="button" data-icon="delete" data-iconpos="notext">删除</div>

   <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

按钮分组

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

     <div data-role="controlgroup" data-type="horizontal">

         <div data-role="button" data-icon="plus">

             添加</div>

         <div data-role="button" data-icon="delete">

             删除</div>

         <div data-role="button" data-icon="refresh">

             修改</div>

     </div>

     <div data-role="controlgroup" data-type="horizontal">

         <div data-role="button" data-icon="plus">

             添加</div>

         <div data-role="button" data-icon="delete">

             删除</div>

         <div data-role="button" data-icon="refresh">

             修改</div>

     </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/u7cydmrv

感觉还不错的说，这里还可以为各个按钮设置主题，看起来就更加有分别了。

Bar 工具栏

工具栏也是一重要组件，我们这里结合前面的按钮来完成一完整的工具栏。

jquery mobile提供两组工具栏：

Headers bar

充当视图页面的标题作用，在一般情况下header bar位于页面的顶部，一般包含2按钮

Footer bar

这个工具栏一般位于尾部，就是与header bar对应的东东

初体验：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

 <div data-role="page">

   <header data-role="header">

     <h1>header bar</h1>

   </header>

   <div>内容区域</div>

   <footer data-role="footer">

     <h2>footer bar</h2>

   </footer>

 </div>

 </body>

 </html>

我们在此基础上改下：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

 <div data-role="page">

   <header data-role="header">

     <h1>header bar</h1>

   </header>

   <div>内容区域</div>

   <footer data-role="footer">

     <div data-role="controlgroup" data-type="horizontal" >

         <div data-role="button" data-icon="plus" data-theme="a">

             添加</div>

         <div data-role="button" data-icon="delete" data-theme="b">

             删除</div>

         <div data-role="button" data-icon="refresh" data-theme="c">

             修改</div>

     </div>

   </footer>

 </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/icqp5f8v

导航工具条

navbar是非常有用的，他提供不同数量的按钮组合，一般位于header或者footer中

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <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">

     <script id="jquery_182" type="text/javascript" class="library"

     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

     <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>

 </head>

 <body>

 <div data-role="page">

   <header data-role="header">

     <h1>header bar</h1>

   </header>

   <div>内容区域</div>

   <footer data-role="footer">

     <nav data-role="navbar">

         <ul>

             <li>

                 <a href="#" class="ul-btn-active" data-icon="home">主页</a>

             </li>

             <li>

                 <a href="#"  data-icon="search">查找</a>

             </li>

             <li>

                 <a href="#"  data-icon="info">信息</a>

             </li>

         </ul>

     </nav>

   </footer>

 </div>

 </body>

 </html>

http://sandbox.runjs.cn/show/pwbcm0mo

各位感觉还行吧。。。

fixed工具栏

这个家伙提供后，我们在轻触屏幕或者滑动屏幕时，header和footer都会出现或者消失

<header data-role="header" data-position="fixed">

结语

我们今天暂时学到这里，明天再继续吧。

【初探移动前端开发03】jQuery Mobile（上）的更多相关文章

【初探移动前端开发】jQuery Mobile 二
本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...
《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记二〇一九年二月十三日星期三2时28分54秒前提:本书适合有初步HTML.CSS.JavaScri ...
【初探移动前端开发05】jQuery Mobile (整合版)
前言为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...
【初探移动前端开发05】jQuery Mobile (下)
前言继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...
【初探移动前端开发04】jQuery Mobile (中)
前言昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
【初探移动前端开发04】jQuery Mobile 一
网格布局 jquery mobile提供一种多列布局功能,由于移动设备的屏幕大小原因,一般情况还是不要使用多列布局啦. jquery mobile提供一种css样式规则来定义多列布局,对应css为ui ...
史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发
书是人类进步的阶梯. ——高尔基习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...
wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

随机推荐

Sparse Filtering 学习笔记（三）目标函数的建立和求解
Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...
[logstash-input-http] 插件使用详解
插件介绍 Http插件是2.0版本才出现的新插件,1.x是没有这个插件的.这个插件可以帮助logstash接收其他主机或者本机发送的http报文. 插件的原理很简单,它自己启动了一个ruby的服务器, ...
php多进程处理
php多进程处理往往我们会碰到一个情况,需要写一个脚本,这个脚本要处理的数据量极大,单进程处理脚本非常慢,那么这个时候就会想到使用多进程或者多线程的方式了. 我习惯使用多进程的方式,php中使用多进 ...
【转】sql server 获取每一个类别中值最大的一条数据
/* 数据如下: name val memo a 2 a2(a的第二个值) a 1 a1--a的第一个值 a 3 a3:a的第三个值 b 1 b1--b的第一个值 b 3 b3:b的第三个值 b 2 ...
把DataTable转换为泛型List<T>或是JSON
在开发ASP.NET Web API或ASP.NET MVC时,我们从数据库得到的数据往往是DataSet或是DataTable.为了能让前端JQuery能方便使用至这些数据,我们需要把这些数据转换为 ...
[水煮 ASP.NET Web API2 方法论]（3-9）空气路由的设置
阅读导航问题解决方案工作原理代码演示在此解释一下,空气路由,是本人臆想出来,觉着更能表达 IgnoreRoute 的意图,如果看着辣眼睛^^,请见谅. 问题我们在之定义过集中式路由,集中式 ...
关于C#基础
前几天帮人做个社交网站,还是用的控件方式,不过学习了ajax和一般处理程序ashx后,也用在了里面一些,今天回来继续写博客.继续上次总结下基础知识,学的内容多,总结的可能比较杂乱,分条总结为平时能自己 ...
为什么我不建议你做APP？
最近迷上了新产品的可行性分析和推演. 有几个朋友也准备跳入创业火坑了,找到我说帮忙做做产品分析和可行性讨论,欣然应允. 我一向厌恶纯凭感觉拍脑袋的方式,所以对于我不了解的行业,都会从行业背景.现状痛点 ...
Hello, Android 快速入门
Hello, Android Android 开发与 Xamarin 简介在这两节指南中,我们将 (使用 Xamarin Studio或 Visual Studio)建立我们的第一个 Xamarin ...
GitHub for Windows 2.0使用教程
Git是目前最先进的分布式版本控制系统,作为一个程序员,我们需要掌握其用法. 一:下载GitHub for Windows 2.0 二:安装GitHub 下载之后点击进行安装过程,安装之后桌面上会有 ...

【初探移动前端开发03】jQuery Mobile（上）

前言