jQueryMobile学习文档

1jQueryMobile2jQueryMobile介绍jQueryMobile是jQuery在手机上和平板等移动设备上的版本。jQueryMobile支持全球主流的移动平台。jQueryMobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。jQueryMobile的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富。与jQuery一样，jQueryMobile也是免费开源的。3主要特性（Features）基于jQuery构建兼容绝大部分手机、平板、桌面平台轻量级的库模块化结构HTML5标记驱动的配置渐进的功能增强快速设计易用性点击和鼠标事件支持统一UI部件强大的主题化框架4支持的平台（SupportedPlatforms）jQueryMobile广泛支持几乎所有的主流桌面浏览器，智能机，平板电脑和电子阅读平台。并且由于逐步增强的目的，概念机和老浏览器也被支持。使用三级评价支持系统:A(full),B(fullminusAjax),C(basic)。体验的精确细度在很大程序上取决于设备对css的解析能力，所以不是所有的A级体验会精确到像素级别，但这也是web的本质所决定的。5支持的平台（SupportedPlatforms）A-级具有基于ajax动态渐变效果的高级体验AppleiOS3.2-5.0-TestedontheoriginaliPad(4.3/5.0),iPad2(4.3),originaliPhone(3.1),iPhone3(3.2),3GS(4.3),4(4.3/5.0),and4S(5.0)Android2.1-2.3-TestedontheHTCIncredible(2.2),originalDroid(2.2),HTCAria(2.1),GoogleNexusS(2.3).Functionalon1.5&1.6butperformancemaybesluggish,testedonGoogleG1(1.5)Android3.1(Honeycomb)-TestedontheSamsungGalaxyTab10.1andMotorolaXOOMAndroid4.0(ICS)-TestedonaGalaxyNexus.Note:transitionperformancecanbepooronupgradeddevicesWindowsPhone7-7.5-TestedontheHTCSurround(7.0)HTCTrophy(7.5),LG-E900(7.5),NokiaLumia800Blackberry6.0-TestedontheTorch9800andStyle9670Blackberry7-TestedonBlackBerry®Torch9810BlackberryPlaybook(1.0-2.0)-TestedonPlayBookPalmWebOS(1.4-2.0)-TestedonthePalmPixi(1.4),Pre(1.4),Pre2(2.0)PalmWebOS3.0-TestedonHPTouchPadFireboxMobile(10Beta)-TestedonAndroid2.3deviceChromeforAndroid(Beta)-TestedonAndroid4.0deviceSkyfire4.1-TestedonAndroid2.3deviceOperaMobile11.5:TestedonAndroid2.3Meego1.2-TestedonNokia950andN9Samsungbada2.0-TestedonaSamsungWave3,DolphinbrowserUCBrowser-TestedonAndroid2.3deviceKindle3andFire-Testedonthebuilt-inWebKitbrowserforeachNookColor1.4.1-TestedonoriginalNookColor,notNookTabletChromeDesktop11-17-TestedonOSX10.7andWindows7SafariDesktop4-5-TestedonOSX10.7andWindows7FirefoxDesktop4-9-TestedonOSX10.7andWindows7InternetExplorer7-9-TestedonWindowsXP,Vistaand7OperaDesktop10-11-TestedonOSX10.7andWindows76支持的平台（SupportedPlatforms）B-级不支持ajax特效的高级体验Blackberry5.0:TestedontheStorm29550,Bold9770OperaMini(5.0-6.5)-TestedoniOS3.2/4.3andAndroid2.3NokiaSymbian^3-TestedonNokiaN8(Symbian^3),C7(Symbian^3),alsoworksonN97(Symbian^1)7支持的平台（SupportedPlatforms）C-级只支持HTML的基本体验，但功能仍能完成Blackberry4.x-TestedontheCurve8330WindowsMobile-TestedontheHTCLeo(WinMo5.2)Alloldersmartphoneplatformsandfeaturephones-Anydevicethatdoesn'tsupportmediaquerieswillreceivethebasic,Cgradeexperience8快速入门(Quickstartguide)!DOCTYPEhtmlhtmlheadtitlePageTitle/titlemetaname=viewportcontent=width=device-width,initial-scale=1linkrel=stylesheethref=http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css/scriptsrc=http://code.jquery.com/jquery-1.7.1.min.js/scriptscriptsrc=http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js/script/headbodydivdata-role=pagedivdata-role=headerh1PageTitle/h1/divdivdata-role=contentpPagecontentgoeshere./p/divdivdata-role=footerh4PageFooter/h4/div/div/body/html9快速入门(Quickstartguide)!DOCTYPEhtml:开头必须使用HTML5的的文档说明，使得网站能够使用HTML5的特性(不支持HTML5的浏览器会安全的静默忽略此声明及一些自定义属性)。head标签内需要引用JQM的js以及css文件，推荐是链接到JQM的CDN服务器上。viewportmeta标签：这个标签设定了浏览器怎样显示画面的缩放等级和范围。如果没有设定的话，许多移动设备的浏览器会使用一个虚拟的页面宽度（大约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的导航和组件都必须在标准的结构中才能工作10页面切换(Pagetransitions)为了实现在移动设备上的无缝客户体验，JQM默认采用ajax的方式载入一个目的链接页面，并且用动画的转场效果实现页面切换。这样的结果就是用户交互始终保存在同一个页面中，新页面中的内容也会轻松的显示到这个页面里，这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。含有rel=“external”,data-ajax=“false”属性的链接以及含有target属性的链接不会通过ajax加载，页面会整体被刷新。可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可，可能的值如下：注意：1.查看以上所有效果，需要浏览器支持3D转换功能。默认情况下不支持3D效果的设备(如Android2.x)，都将退回到fade类型。2.如果只是针对某个特定机型进行开发可以加些特效增加美观，如果是要支持很多设备，建议不要设置特效，容易出现转换闪屏等不可预知现象slide从右到左切换slideup从下到上切换slidedown从上到下切换pop以弹出的形式打开页面fade渐变褪色的方式切换flip旧页面翻转飞出，新页面飞入turn类似WP风格的页面效果flow类似IOS系统的Tab切换11对话框(Dialogs)任何页面链接中加入data-rel=“dialog”属性后都可以被看作一个模态对话框。当“dialog”属性被应用，框架会为页面增加一些样式,包括圆角，页边空白,深色背景来让对话框看起来像悬浮在页面上。ahref=foo.htmldata-rel=dialogOpendialog/a对话框是一个标准的“page”，它将以适用于所有page的标准过渡效果打开。和其他page一样,你可以指定你想要的任何过渡效果,只需要加入data-transition属性到该链接。为了感觉更像对话框,建议指定“pop”,“slideup”或者“flip”过渡效果。ahref=foo.htmldata-rel=dialogdata-transition=popOpendialog/a对话框有一个默认的500px的max-width(每边加15px的padding)。也有一个10%的topmargin来使对话框在更大的屏幕上显示更大的topmargin,但在智能机上会有一个更小的margin。为了重写这些样式，添加下面的CSS规则到自定义样式表里:.ui-dialog.ui-header,.ui-dialog.ui-content,.ui-dialog.ui-footer{max-width:500px;margin:10%auto15pxauto;}12工具栏(Toolbars)在JQM中,有两种标准类型的工具栏：Headers和Footers–Headerbar充当页面标题的作用,通常是mobilepage中的第一个元素，一般包含有一个页面标题和两个按钮–Footerbar通常是最后一个元素，相比于header在内容和功能上面更加自