JQUERY MOBILE使用指南

jQueryMobile使用指南简介：jQueryMobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。jQueryMobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。接下来我们将通过实例向大家展示jQueryMobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备平台是IPhone或Android。或者是PC电脑上使用Safari浏览器调试。Goon!jQueryMsobile都能做什么?jQueryMobile为开发移动应用程序提代了非常简单的用户接口这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold（点击并按住）、swipe、orientationchange使用一些加强的功能时需要参照一下设备浏览器支持列表使用预设主题可以轻松定制应用程序外观jQueryMobile基本页面结构大部分jQueryMobileWeb应用程序都要遵循下面的基本模板!DOCTYPEhtmlhtmlheadtitlePageTitle/titlelinkrel=stylesheethref====pagedivdata-role=headerh1PageTitle/h1/divdivdata-role=contentpPagecontentgoeshere./p/divdivdata-role=footerh4PageFooter/h4/div/div/body/html要使用jQueryMobile，首先需要在开发的界面中包含如下3个内容CSS文件jquery.mobile-1.0a1.min.cssjQuerylibraryjquery-1.4.3.min.jsjQueryMobilelibraryjquery.mobile-1.0a1.min.js在上面的页面基本模板中，引入这三个元素采用的是jQueryCDN方式，开发人员也可以下载这些文件及主题到你的服务器上。我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。这样jQueryMobile就会知道哪些内容需要处理。说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。在”page”div中，还可以包含”header”，”content”，”footer”的div元素,这些元素都是可选的，但至少要包含一个“content”div。divdat-role=”header”/div在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性data-position=”fixed”，可以保证头部始终保持屏幕的顶部divdat-role=”content”/div包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等divdat-role=”footer”/div在页面的底建立工具栏，添加一些功能按钮为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed”属性多个页面在同一个页面中有一种建立在一个HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：(目前有bug)!DOCTYPEhtmlhtmlheadtitlejQueryMobile:PageswithinPages/titlelinkrel=stylesheethref====pageid=homedivdata-role=headerh1Home/h1/divdivdata-role=contentpahref=#aboutAboutthisapp/a/p/div/divdivdata-role=pageid=aboutdivdata-role=headerh1AboutThisApp/h1/divdivdata-role=contentpThisapprocks!ahref=#homeGohome/a/p/div/div/body/html正如所见，上面的代码中包含了两个”page”:主页（id为home）和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQueryMobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”AJAX导航为了实现在移动设备上的无缝客户体验，jQueryMobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQueryMobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。当一个新的页面做为新的data-role=”page”div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性rel=”external”属性页面切换效果你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下slide从右到左切换（默认）slideup从下到上切换slidedown从上到下切换pop以弹出的形式打开一个页面fade渐变退色的方式切换flip旧页面翻转飞出，新页面飞入例如pahref=”#about”data-transition=”flip”关于页面/a/p在浏览器中查看效果注意：查看以上的效果需要您的浏览器支持jQueryMobile。例如：MobileSafari,DeskTopSafari,或Chrome。对话框通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下pahref=#aboutdata-rel=dialogdata-transition=slideupAboutthisapp/a/p注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果按钮按钮是触摸式应用程序的一部分，它们扮演链接的功能，因为它们提供了更大的目标，当你点击链接的时候（比较适合，手指比较胖的人群）在jQueryMobile中把一个链接变成button的效果，只需要在标签中添加data-role=”button属性即可”。例如：divdata-role=contentpahref=#aboutdata-role=buttonAboutthisapp/a/p/div...divdata-role=contentpThisapprocks!/pahref=#homedata-role=buttonGohome/a/div另外jQueryMobile也会自动的转换像表单元素中的submit，reset，button，或image为按钮样式。还可以利用data-icon属性建立各式各样的按钮，建立行内按钮和按钮组（水平或垂直的）格式化文本为了使其尽可能的灵活，jQueryMobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块布局表格：组织内容以列的形式显示，有两列表格，和三列表格可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。!DOCTYPEhtmlhtmlheadtitleCollapsibleContentDemo/titlelinkrel=stylesheethref====pageid=homedivdata-role=headerh1Home/h1/divdivdata-role=contentdivdata-role=collapsibledata-state=collapsedh3Aboutthisapp/h3pThisapprocks!/p/div/div/div/body/html触摸选择的表单元素jQueryMobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。例如，复