jquerymobile学习文档.ppt

jQuery Mobile jQuery Mobile介绍 jQuery Mobile 是jQuery 在手机上和平板等移动设备上的版本 。 jQuery Mobile 支持全球主流的移动平台 。 jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。 jQuery Mobile的使命是向所有主流移动浏览器提供一种统一体验，使整个 Internet 上的内容更加丰富 。 与 jQuery 一样， jQuery Mobile也是免费开源的。 主要特性（Features） 支持的平台（Supported Platforms） 支持的平台（Supported Platforms） 支持的平台（Supported Platforms） 支持的平台（Supported Platforms） 快速入门(Quick start guide) 快速入门(Quick start guide) !DOCTYPE html :开头必须使用HTML5的的文档说明，使得网站能够使用HTML5的特性(不支持HTML5的浏览器会安全的静默忽略此声明及一些自定义属性)。 head标签内需要引用JQM的js以及css文件，推荐是链接到JQM的CDN服务器上。 viewport meta标签：这个标签设定了浏览器怎样显示画面的缩放等级和范围。如果没有设定的话，许多移动设备的浏览器会使用一个虚拟的页面宽度（大约900px），这样屏幕看起来就是缩小的并且太宽了。设置width=device-width, initial-scale=1属性，会使宽度被设定为设备的屏幕宽度。 移动网站的每一个视图或者页面都要通过在body中的data-role=“page“属性标签来定义。 在page容器内，任何有效的html标签都可以使用，但是对于JQM的典型页面来说，page容器的直接子结点应该为使用data-role标记属性为“header”、 “content”和“footer”的3个容器。 一个独立的html文件可以包含多个page，当有多个page存在时默认显示第一个page容器的内容，每个page都应该有一个唯一的ID（如id=“foo”），page之间可以通过(href=“#foo”)方式进行页面显示的转换。 尽管上述的页面结构是通过JQM构建移动网站的标准格式，但是JQM框架是一个灵活的框架，page、header、 content和footer的data-role元素都是可选的，但是基于AJAX的导航和组件都必须在标准的结构中才能工作 页面切换(Page transitions) 为了实现在移动设备上的无缝客户体验，JQM默认采用ajax的方式载入一个目的链接页面，并且用动画的转场效果实现页面切换。 这样的结果就是用户交互始终保存在同一个页面中，新页面中的内容也会轻松的显示到这个页面里，这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。 含有 rel=“external”, data-ajax=“false” 属性的链接以及含有target属性的链接不会通过ajax加载，页面会整体被刷新。 可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可，可能的值如下： 注意：1.查看以上所有效果，需要浏览器支持3D转换功能。默认情况下不支持3D效果的设备 (如 Android2.x)，都将退回到fade类型。 2.如果只是针对某个特定机型进行开发可以加些特效增加美观，如果是要支持很多设备， 建议不要设置特效，容易出现转换闪屏等不可预知现象 对话框(Dialogs) 任何页面链接中加入 data-rel=“dialog”属性后都可以被看作一个模态对话框。 当“dialog”属性被应用，框架会为页面增加一些样式,包括圆角，页边空白,深色背景来让对话框看起来像悬浮在页面上。 a href= foo.html data-rel=dialogOpen dialog/a 对话框是一个标准的“page”，它将以适用于所有page的标准过渡效果打开。 和其他page一样,你可以指定你想要的任何过渡效果,只需要加入data-transition 属性到该链接。 为了感觉更像对话框,建议指定“pop”, “slideup” 或者 “flip” 过渡效果。 a href=foo.html data-rel=dialog data-transition=popOpen dialog/a 对话框有一个默认的500px的 max-width(每边加15px的 padding)。