首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用jQuery Mobile框架开发移动端Web App的入门教程

Posted in Javascript onMay 17, 2016

一.jQuery Mobile 的渐进增强设计与浏览器支持
根据维基百科（ Wikipedia ） 的解释，渐进增强的设计主要包括以下几点

  • basic content should be accessible to all web browsers （所有浏览器都应能访问全部基础的内容）
  • basic functionality should be accessible to all web browsers （所有浏览器都应能访问全部基础的功能）
  • sparse, semantic markup contains all content （所有的内容应该在少量语义标签内）
  • enhanced layout is provided by externally linked CSS （增强的功能应该由外部 CSS 提供）
  • enhanced behavior is provided by unobtrusive, externally linked JavaScript （增强的行为由外部 JavaScript 提供 ）
  • end-user web browser preferences are respected （终端用户的浏览器习惯应受尊重）

若在实际的开发中使用到 Web SQL Database 等 HTML5 技术，则最终的 Web App 被支持度会比以上 jQuery Mobile 的被支持度低，但两个主流的移动浏览器 Android 与 Apple iOS 的系统浏览器及其桌面版本肯定能提供最好的支持。

二.HTML5 data-* 属性
jQuery Mobile 依赖 HTML5 data-* 属性 来提供一系列的支持（ UI 组件、过渡和页面结构），不支持该 HTML5 属性的浏览器会默认忽略这些属性的效果，比如在页面中添加一个版头，可以使用以下的 HTML：

<div data-role="header">
  <h1>jQuery Mobile Demo</h1>
</div>

 
这样就能产生一个 jQuery Mobile 样式的版头，从下文的图中可以看出，这样的版头样式很适合移动设备使用，并且在添加 data-role="header" 属性后，div 内的 h1 也会被渲染成一定样式，这就是 jQuery Mobile 的方便快捷，也是它的设计宗旨—— Write Less, Do More 。

除此之外 jQuery Mobile 中还有以下的 data-role 属性（部分属性），已经赋予了一定的样式及用户操作响应效果。

data-role="content" ， data-role="button" ， data-theme ="" , data-role="controlgroup" ， data-inline="true" ， data-role="fieldcontain" ， data-role="listview" ， data-rel="dialog" ， data-transition="pop" ，分别对应着主体内容、按钮，主题颜色，已编辑按钮，内联按钮，表单元素，列表视图，对话框，页面过渡。

三.jQuery Mobile 基本使用方法
1.引入 jQuery Mobile
使用 jQuery Mobile ，需要在网页页眉中引入 jQuery Mobile 组件，包括以下部分
（1）jQuery 库
（2）jQuery Mobile CSS
（3）jQuery Mobile 库

可以通过这样的 head 引入以上组件

<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

 
2.加入 viewport
在 Android 的浏览器中，若没有设定页面宽度，它会认为页面宽度是 980px ，因此我们可以在 head 里加入一个 viewport，让移动浏览器知道屏幕大小，只是一个 viewport 标签，就已经给用户带来更好的体验。

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

 
3.简单的页面实例
在引入 jQuery Mobile 需要的组件后，我们可以创建 jQuery Mobile 页面，下面给出一个简单的例子。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
 
<body>
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>jQuery Mobile Demo</h1>
  </div>
 
  <div data-role="content">
    <p>主体内容</p>
  </div>
 
  <div data-role="footer">
    <h2>Footer</h2>
  </div>
 
</div>
 
</body> 
</html>

使用jQuery Mobile框架开发移动端Web App的入门教程

对于 jQuery Mobile ，每定义一个 data-role="page" 就相当于一个页面， jQuery Mobile 默认采用 Ajax 的方式操作 DOM，自动隐藏除第一个页面外的所有页面，当点击链接，链接到其他页面时会以 Ajax 的方式加载新页面的内容，下面给出完整实例。另外，我们还可以使用一些 HTML5 的语义化标签，如 header 的 div 可以直接使用 header 标签，具体的可以参见下面的例子。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Mobile Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
 
<body>
 
<div data-role="page" id="home">
 
  <header data-role="header">
    <h1>jQuery Mobile Demo</h1>
  </header>
 
  <div data-role="content">
    <a href="#page2" data-role="button">列表页面</a>
  </div>
 
  <footer data-role="footer">
    <h2>Footer</h2>
  </footer>
 
</div>
 
<div data-role="page" id="page2">
 
  <header data-role="header">
    <h1>jQuery Mobile Demo</h1>
  </header>
 
  <div data-role="content">
    <ul data-role="listview" data-inset="true">
      <li><a href="#home">回到首页</a></li>
      <li><a href="#home">回到首页</a></li>
      <li><a href="#home">回到首页</a></li>
    </ul>
  </div>
 
  <footer data-role="footer">
    <h2>Footer</h2>
  </footer>
 
</div>
 
</body> 
</html>

 四.开发原则
首先我们必须知道，一款优秀的 Web App ，需要有良好的 UI 与用户体验（UE），虽然本质上作为一个站点，内容才是用户需要的，但我们仍需要使用良好的 UI 与 UE 来作为内容与用户的连接，因此我们引入 jQuery Mobile 来为 Web App 制作 UI 与交互。

有了 Web App 的界面，还需要数据的交互，这样才能做出 App 。这里可以使用 PHP 等服务器脚本与 Mysql 等数据库来为 Web App 提供数据驱动，但 Kayo 希望采用一种新的方法，也就是 HTML5 的方法，使用 HTML5 规范提供的 Web SQL Database —— 一个简单强大的 Javascript 数据库 API， 可以在本地数据库中存储数据（如内嵌在浏览器中的 SQLite ），另外还可以使用 HTML5 规范中的 Storage （本地储存） 来储存数据，这样就可以减少 Web App 对于网络的依赖，并且整个 Web App 都是使用前端的技术完成（很震撼吧！）。

最后不得不提的是 offline application cache （离线程序缓存），它也是 HTML5 的特性，允许用户在无网络连接的情况下运行 Web App，因此我们可以利用此特性制作支持离线使用的 Web App ，进一步减少 Web App 对于网络的依赖。

1.响应式设计
响应式网页设计由 Ethan Marcotte 提出，通俗点说，就是网站界面能够兼容多种终端，而不是每种终端各自做一个界面。腾讯等大型网站都有针对不同的设备做出不同的界面，比如 3g 版，触屏版，ipad……，这样就会增加了很多重复的工作量，因此我们可以为网站渐进的设计一个界面，自动适应不同的设备，当然设备间的效果可以有所差距。这里 Kayo 小插一段，响应式设计的诞生，很大程度上归功于移动互联网的发展与移动设备硬件的提升，而移动互联网的发展本身也依赖于移动设备硬件的提升，因此想不断提升的 App ，还得先要硬件厂商给力。

言归正传，这里提到响应式设计的理念当然是希望在设计 Web App 时也应用到，而这些 jQuery Mobile 已经为开发者预先做好， jQuery Mobile 不但默认的 UI 样式里已经按响应式设计做好，它还另外提供了一些为响应式设计而做的方法，日后会详细介绍。

2.渐进式设计

“前端设计时通过渐进增强功能来设计一直也是 Kayo 的设计想法，因为不同的平台，不同的设备有着不同的 Web 环境，因此对于一些出色的前端效果很难保证在每台设备上都呈现相同的效果，因此与其为了在所有设备上做到一样的效果而降低整体的前端样式，不如对于好的设备可以呈现更出色的效果，而基本的效果就兼容所有的设备。jQuery Mobile 的设计也是如此，核心的功能支持所有的设备，而较新的设备则可以获得更为优秀的页面效果。”

这里使用 jQuery Mobile 的目的非常明显，也就是使到 Web App 能尽量兼容不同的设备并且在较为先进的设备中呈现更加出色的表现，而不要为了统一而牺牲优秀的设计。

使用jQuery Mobile框架开发移动端Web App的入门教程

- Author -

Kayo lee

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JS表格组件神器bootstrap table详解（强化版）
May 26 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
jquery获取img的src值的简单实例
May 17 #Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 #Javascript
浅谈Javascript数组(推荐)
May 17 #Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 #Javascript
javascript css红色经典选项卡效果实现代码
May 17 #Javascript
JS获取IMG图片高宽的简单实例
May 17 #Javascript
简单的分页代码js实现
May 17 #Javascript
责任书(145) 请假条(31) 承诺书(369) 广告词(105) 保证书(97) 建议书(203) 决心书(42) 活动总结(790) 主持词(345) 倡议书(159)
You might like
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解React项目如何修改打包地址（编译输出文件地址）
2019/03/21 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
python 远程统计文件代码分享
2015/05/14 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python守护进程用法实例分析
2015/06/04 Python
Python数据类型详解（一）字符串
2016/05/08 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python 画函数曲线示例
2019/12/04 Python
澳大利亚最受欢迎的女士度假服装：Kabana Shop
2020/10/10 全球购物
区三好学生主要事迹
2014/01/30 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
创先争优活动方案
2014/02/12 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Python实现列表拼接和去重的三种方式
2021/07/02 Python