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

一、jQuery Mobile的渐进式增强设计和浏览器支持根据维基百科的解释，渐进式增强设计主要包括以下几点。

所有网络浏览器都应该可以访问基本内容(所有浏览器都应该可以访问所有基本内容)所有网络浏览器都应该可以访问基本功能(所有浏览器都应该可以访问所有基本内容)。的功能)稀疏，语义标记包含所有内容；外部链接的CSS提供了增强的布局；增强行为由不引人注目的外部链接JavaScript提供(增强行为由外部JavaScript提供)最终用户Web浏览器首选项得到尊重(最终用户的浏览器习惯应得到尊重)如果Web SQL Database用于实际开发，等等。TML5技术，最终的Web App的支持程度会比jQuery Mobile低，但是安卓和苹果iOS这两个主流移动浏览器的系统浏览器，以及它们的桌面版本肯定能提供最好的支持。

2.HTML5数据-*属性jQuery Mobile依靠HTML5数据-*属性提供一系列支持(UI组件、过渡和页面结构)。默认情况下，不支持此HTML55data属性的浏览器将忽略这些属性的效果。例如，如果向页面添加标题，可以使用以下HTML:

Div数据-角色='表头' h1jQuery Mobile演示/h1/div，这样就可以生成jQuery Mobile样式的表头。从下图可以看出，这种表头样式非常适合移动设备，加上data-role=' header '属性后，div中的H1也会渲染成一定的样式，这是jQuery Mobile的方便快捷，也是其设计宗旨——少写多做。

此外，jQuery Mobile还有以下数据角色属性(部分属性)，赋予了一定的风格和用户操作响应效果。

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 '，分别对应主内容、按钮、主题颜色、编辑按钮、inline按钮、表单元素、列表视图、对话框、页面过渡。

Iii .jQuery Mobile 1的基本用法。引入jQuery Mobile使用jQuery Mobile需要在页面头部引入jQuery Mobile组件，包括以下几个部分(1)jQuery库(2)jQuery Mobile CSS(3)jQuery Mobile库。

上述部件可以通过这样的头部引入。

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='样式表' href=' http://code . jquery.com/mobile/1.0/jquery . mobile-1.0 . min . CSS '/脚本类型='text/JavaScript ' src=' http 3360http://code . jquery.com/jquery-1 . 6 . 4 . min . js '/脚本类型=' text在安卓浏览器中添加视口，如果没有设置页面宽度，它会认为页面宽度是980px，所以我们可以在头部添加一个视口，让移动浏览器知道屏幕大小，这只是一个视口标签，它已经给用户带来了更好的体验。

meta name=' viewport ' content=' width=设备宽度，初始比例=1，最大比例=1.5' 3。简单的页面示例在介绍了jQuery Mobile所需的组件之后，我们就可以创建jQuery Mobile页面了。这里有一个简单的例子。

！DOCTYPE html html标题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='样式表href=' http://代码。jquery。com/Mobile/1.0/jquery。手机-1.0。量滴CSS '/脚本类型=' text/JavaScript ' src=' http 3360http://代码。jquery。com/jquery-1。6 .4 .量滴js /脚本类型='文本主体内容/p /div数据-角色='页脚' H2页脚/H2/div/div/正文/html

对于框架移动，每定义一个数据角色='页面'就相当于一个页面，jQuery Mobile默认采用埃阿斯的方式操作多姆，自动隐藏除第一个页面外的所有页面，当点击链接，链接到其他页面时会以埃阿斯的方式加载新页面的内容，下面给出完整实例。另外，我们还可以使用一些HTML5的语义化标签，如页眉的差异可以直接使用页眉标签，具体的可以参见下面的例子。

！DOCTYPE html html标题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='样式表href=' http://代码。jquery。com/Mobile/1.0/jquery。手机-1.0。量滴CSS '/脚本类型=' text/JavaScript ' src=' http 3360http://代码。jquery。com/jquery-1。6 .4 .量滴js /脚本类型='文本列表页面/a /div页脚数据-角色=“页脚”H2页脚/H2/页脚/div数据-角色='page' id='page2 '页眉数据-角色='表头' h1jQuery手机演示/h1/页眉差异数据-角色='content' ul数据-角色='listview '数据-插图='true' lia href='#home '回到首页/a/li lia href='#home '回到首页/a/li lia href='#home '回到首页/a/li /ul /div页脚数据-角色="页脚“h2页脚/H2/页脚/div/正文/html四。开发原则首先我们必须知道，一款优秀的网络应用，需要有良好的用户界面与用户体验（用户设备),虽然本质上作为一个站点，内容才是用户需要的，但我们仍需要使用良好的用户界面与用户体验(用户体验)来作为内容与用户的连接，因此我们引入框架手机来为网络应用制作用户界面与交互。

有了网络应用的界面，还需要数据的交互，这样才能做出应用程序。这里可以使用服务器端编程语言(专业超文本预处理器的缩写)等服务器脚本与关系型数据库等数据库来为网络应用提供数据驱动，但加贺希望采用一种新的方法，也就是HTML5的方法，使用HTML5规范提供的网络数据库——一个简单强大的爪哇岛描述语言数据库原料药，可以在本地数据库中存储数据（如内嵌在浏览器中的SQLite)，另外还可以使用HTML5规范中的存储（本地储存)来储存数据，这样就可以减少网络应用对于网络的依赖，并且整个网络应用都是使用前端的技术完成（很震撼吧！)。

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

1.响应式设计响应式网页设计是由Ethan Marcotte提出的，这意味着网站界面可以兼容各种终端，而不是每个终端自己制作界面。腾讯等大型网站针对不同设备有不同的界面，比如3g版、触摸屏版、iPad等。这会增加很多重复性的工作量，所以我们可以逐渐为网站设计一个界面并自动适应不同的设备。当然，设备之间的效果可能不同。加贺，响应式设计的诞生很大程度上归功于移动互联网的发展和移动设备硬件的完善，而移动互联网的发展本身又依赖于移动设备硬件的完善。所以，要想不断完善App，首先要请硬件厂商给予力量。

在离家更近的地方，这里提到的响应设计的概念当然是打算在设计Web App时应用的，jQuery Mobile已经提前为开发者做好了准备。jQuery Mobile不仅在默认UI风格上按照响应式设计进行了设计，还提供了一些响应式设计的方法，后面会详细介绍。

2.渐进式设计。

“通过逐步增强功能来设计前端一直是加贺的设计理念。由于不同的平台和设备有不同的Web环境，对于一些优秀的前端效果，很难保证每台设备都会有相同的效果。因此，与其为了在所有设备上达到相同的效果而降低整体前端风格，不如对好的设备更好，基本效果兼容所有设备。jQuery Mobile的设计也是如此。核心功能支持所有设备，而更新的设备可以获得更好的页面效果。”

这里使用jQuery Mobile的目的非常明显，那就是让Web App兼容不同的设备，在更高级的设备中展现更好的性能，而不是为了统一而牺牲优秀的设计。