《jQuery Mobile知识汇总》由会员分享，可在线阅读，更多相关《jQuery Mobile知识汇总（147页珍藏版）》请在金锄头文库上搜索。
1、jQuery Mobile简介jQuery是一个Web程序开发时使用的JavaScript类库，但它是为PC端的浏览器而设计。在移动互联网中为 了满足浏览器更好的运行Web程序的需求，在基于jQuery与jQuery UI的基础之上，推出jQuery Mobile这 套框架，其主旨就是在进行移动项目开发的过程中，为开发者提供统一的接口与特征，依靠强大的jQuery类库，节省JavaScript代码的开发时间，提高项目开发的效率。 功能特点：jQuery Mobile为开发移动应用程序提供十分简单的应用接口，而这些接口的配置则是由标记驱动的，开 发者在HTML页中无须使用任何JavaScript
2、代码，就可以建立大量的程序接口。使用页面元素标记驱动是 jQuery Mobile的特点之一。 1.强大的AJAX驱动导航无论页面数据的调用还是页面间的切换，都是采用AJAX进行驱动的，从而保持了动画转换页面的干净与优 雅。 2.以jQuery与jQuery UI为框架核心jQuery Mobile的核心框架是建立在jQuery基础之上的，并且利用了jQuery UI的代码与运用模式，使熟悉 jQuery语法的开发者能够通过最小的学习曲线迅速掌握 3.强大的浏览器兼容性jQuery Mobile继承了jQuery的兼容性优势，目前所开发的应用兼容于所有主要的移动终端浏览器，使用 开发者集中精力
3、做功能开发，而不需要考虑复杂的浏览兼容性问题。 4.框架轻量级 目前jQuery Mobile最新的稳定版本为1.0.1，压缩后的体积大小为24KB，与之相配套的CSS文件压缩后的 体积大小为6KB，框架的轻量级将大大加快程序执行时的速度。 5.支持触摸与其他鼠标事件jQuery Mobile提供了一些自定义的事件，用来侦测用户的移动触摸动作，如tap（单击）、tap-and-hold （单击并按住）、swipe（滑动）等事件，极大提高了代码开发的效率 6.强大的主题化框架 借助于主题化的框架和ThemeRoller应用程序。 jQuery Mobile可以快速地改变应用程序的外观或自定义 一
4、套属于产品自身的主题，有助于树立应用产品的品牌形象jQuery Mobile 的作用 可以轻松的帮助我们实现非常好看的、可 跨设备的Web应用程序。 JM开发的web应用像 Native App（本地应用 ） JM 包含Web应用中的各种常用部件 对话框、表单、列表、按钮、工具条等 使用Ajax加载页面，实现炫丽的页面切换效 果jQuery Mobile 关键特点 基于 jQuery 兼容主流的手机浏览器和桌面浏览器 体积小，压缩后20K左右 HTML5风格的配置 页面自动初始化，通过 data-role 属性自动对 页面部件进行初始化 触摸屏和鼠标事件支持 丰富的UI部件 可扩展的页面样式框
5、架jQuery Mobile 兼容的移动平台jQuery Mobile 对于移动应用平台的支持，分为四种不同级别， A 级 支持全部界面特效，包括基于 Ajax 的页面动画切换效果。 B 级 支持用户界面特效，但是不支持基于 Ajax 的页面动画切换效果。 C 级 能运行，也可以支持基本的 HTML 效果。但是比较高级的 HTML 特 效就不能很好支持。 D 级 可能能运行，但是并不能得到 jQuery Mobile 官方支持。 通常我们希望 jQuery Mobile 可以支持目标客户人群的移动设备在 A 级。A 级Apple iOS 3.2-5.0 betaAndroid 2.1-2.3A
6、ndroid 3.0 HoneycombWindows Phone 7Blackberry 6.0Blackberry 7Blackberry PlaybookPalm WebOS (1.4-2.0)Palm WebOS 3.0Firebox Mobile (Beta)Opera Mobile 11.0Meego 1.2Kindle 3Chrome Desktop 11-13Firefox Desktop 3.6-4.0Internet Explorer 7-9Opera Desktop 10-11B 级 Blackberry 5.0 Opera Mini (5.0-6.0) Windows
7、Phone 6.5 Nokia Symbian3 C 级 Blackberry 4.x 其他更早版本的智能手机 D 级 Samsung Bada配置讲解1. 说明：meta name=“viewport“ 推荐的视图（ viewport ）配置device-width值表示，让内容扩展到屏幕的整个宽度。initial-scale设置了用来查看 Web页面的初始缩放百分比或缩放因数。值为1，显示未缩放的文档。User-scalable=no.。默认以”900px”宽度 2.data-role=“page”定义的页面容器，在构建多页面设计时使用 3.使页脚在页面最底部，添加data-positio
8、n=“fixed”属性 4. 是 HTML5 新的标记定义，表示一个 HTML5 文档的开始。，在任何使用 jQuery Mobile 实现的页面中，必须以此作为开始。 5. 这些标记是继承自 HTML4 标准的，表示 HTML 文档的各个部分。 6. 标记中包含将会被引用的 CSS 和 JavaScript，对于 jQuery 和 jQuery Mobile 的引用 也定义在这里。 7. 表示页面内容的字符集，用于多语言显示。优化移动体验增强标记 1.jQuery Mobile会载入语义HTML标记 2.jQuery Mobile会迭代有data-role属性定义的每一个页面组件。因此会为每
9、一个优化过的 移动CSS3组件添加标记。jQuery Mobile会将标记添加到页面。 3.在完成页面的标记添加之后，jQuery Mobile会显示优化过的页面语义 HTNL5标 记jQuery Mobile 页面增强增强转 换jQuery Mobile 工作原理：提供可触摸的UI小部件和AJAX导 航系统，使页面支持动画式切换效果。以 页面中的元素标记为事件驱动对象，当触 摸或单击时进行触发，最后在移动终端的 浏览器中实现一个个应用程序的动画展示 效果设置内部页面的页面标题 内部页面的标题按照如下优先顺序进行设置 1.如果data-title值存在，则他会用作有内部页面的 标题。 2.如果
10、不存在data-title值，则页面（header）将会 用作内部页面的标题。 3.最后如果内部页面不存在data-title，也不存在页 眉，则head标记中的title元素将会用作内部页面 的标题.Ajax导航 Contact Us/内链接 1.Jquery mobile会解析href，然后通过一个ajax请求载入页面，成功载入页面，该页面会添 加到当前页面的DOM中当页面成功添加到DOM中后，jquery mobile可以根据需要来增强该页面，更新base元素 的href，并设置data-url属性（如果没有被显示设置的话）jQuery Mobile页面请求添加到DOM中增强页面转换We
11、b服务器页面请求页面响应Ajax导航2.框架随后使用应用的默认“滑动”转换模式转换到 一个新的页面。框架也可以实现无缝的CSS转换，转 换完成之后当前可见的页面或活动页面将会被指定为“ui-page-active”CSS类。 3.产生的URL也可以作为书签。如果深链接到子页面可 以通过完整路径访问：http:/子页.html 按照默认的方式使用AJAX请求页面链接，在打开目标 页时只能显示默认的第一个容器，而打开其他容器的链接将无效，原因是使用AJAX记录链接历史的哈 希值与页面内部链接指向的哈希值存在冲突 如果你不想采用AJAX的方式加载页面，而想以原生的 页面加载方式打开一个链接页面，只需
12、要在打开的链接上添加属性 rel=”external”属性转换效果 转换效果：data-transition属性转换常见的用途滑动（slide）在页面之间移动的最常见的转换。在一个页面流中，该转换给 出 了向前移动或或向后移动的外观（默认），即从右到左滑动的动画 效果卷起（slideup）用于打开对话框或显示额外信息的一个常见的转换。该转换给 出 的外观可以用来为当前活动的页面收集额外的输入信息向下滑动 (slidedown)该转换 与卷起相对，但是可用于实现类 似的效果弹出(pop)用于打开对话框或显示额外信息的另一个转换。该转换给 出的外 观可以用来为当前活动的页面收集额外的输入信息淡入/
13、淡出（fade）用于入口页面或出口页面的一个创建的转换效果，渐变褪色的动 画效果翻转（flip）用于显示额外信息的一个常用转换。通常情况下，屏幕的背景会显 示没有必要存在于主UI上的配置选项（信息图标），旧页飞出，新 页飞入的动画效果无（none）不应用任何转换对话框 默认情况下，对话框的最大宽度为500像素。在 某些较小的移动设备上显示时，将会铺满整个屏 幕。而在台式机或者平板电脑上显示时，则占据 500像素的宽度。如果你想要复写这个默认的宽 度，可以再主题使用以下CSS：ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui
14、-footermax-width:100%对话框:警告n使用警告来显示可以影响应用程序使用 的重要 信息。警告不是用户发起的。 n对于单按钮的警告来说，按钮就是浅颜色。对于 包含两个按钮的对话框来说，左边按钮是深颜色 的 n在一个包含两个按钮的对话框，如果提出一个肯 定的动作，而且用户很有可能选择这个动作，则 取消该动作的按钮应该位于左边，而且是浅颜色 的。通常情况下，执行有风险的动作的按钮是红 色的对话框:操作表n使用操作表来收集用户发起的任务的确认信息 n包含一个取消按钮，以允许用户放弃任务，取消 按钮位于操作表的底部，以促使用户在做出选择 之前，阅读了所有的选项。取消按钮的颜色应该 与背
15、景的颜色相同。带有媒体查询的响应式布局 可以使用媒体查询来检测设备的朝向 n media(orientation:portrait) n media(orientation:landscape)在iOS中，横屏时会引起页面以大于1的比例进行放大，页面右边将被 裁切掉一部分，用户需双击才能让页面以合适的尺寸进行缩放并显 示。 解决： 可以禁用缩放，由于禁用缩放，破坏可访问性，需谨慎：在用户进行缩放时，可以动态调整元标记 当浏览器支持的宽度大于450像素时，表单元素可以浮动在它们的标签旁 边 Label.ui-input-textdisplay:block; media all and(min-w
16、idth:450px)Label.ui-input-textdisplay:inline-block; 页面预加载 方法： 在需要链接页面的元素中添加”data-prefetch” 属性，设置属性值为”true”或不设置属性值均 可；设置完该属性值后， jQuery Mobile将在加 载完成当前页面以后，自动加载该链接元素所 指的目标页面，即”href”属性的值 调用JavaScript代码中全局性方法 $.mobile.loadPage()来预加载指定的目标HTML 页面，其最终的效果与设置元素的” data- prefetch”属性一样。页面缓存 添加”page”容器的”data-dom-cache”属性，两 种方式： 在需要被缓存的元素属性中添加一个” data- dom-cache”属性，设置为”true”或不设置属性 值均可。该属性的功能是将对应的元素内容写 入缓存中 通过Ja
