jQueryMobile学习文档9602.pptx

《jQueryMobile学习文档9602.pptx》由会员分享，可在线阅读，更多相关《jQueryMobile学习文档9602.pptx（31页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、jQuery MobilejQuery MobilejQuery MobilejQuery Mobile1jQuery MobilejQuery Mobile介绍介绍jQueryMobile是jQuery在手机上和平板等移动设备上的版本。jQueryMobile支持全球主流的移动平台。jQueryMobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。jQueryMobile的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富。与jQuery一样，jQueryMobile也是免费开源的。2主要特性（主要特性（Fe

2、atures）基于jQuery构建兼容绝大部分手机、平板、桌面平台轻量级的库模块化结构HTML5标记驱动的配置渐进的功能增强快速设计易用性点击和鼠标事件支持统一UI部件强大的主题化框架3支持的平台（支持的平台（SupportedPlatforms）jQueryMobile广泛支持几乎所有的主流桌面浏览器，智能机，平板电脑和电子阅读平台。并且由于逐步增强的目的，概念机和老浏览器也被支持。使用三级评价支持系统:A(full),B(fullminusAjax),C(basic)。体验的精确细度在很大程序上取决于设备对css的解析能力，所以不是所有的A级体验会精确到像素级别，但这也是web的本质所决定

3、的。4支持的平台（支持的平台（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.6butper

4、formancemaybesluggish,testedonGoogleG1(1.5)Android3.1(Honeycomb)-TestedontheSamsungGalaxyTab10.1andMotorolaXOOMAndroid4.0(ICS)-TestedonaGalaxyNexus.Note:transitionperformancecanbepooronupgradeddevicesWindowsPhone7-7.5-TestedontheHTCSurround(7.0)HTCTrophy(7.5),LG-E900(7.5),NokiaLumia800Blackberry6.0-

5、TestedontheTorch9800andStyle9670Blackberry7-TestedonBlackBerryTorch9810BlackberryPlaybook(1.0-2.0)-TestedonPlayBookPalmWebOS(1.4-2.0)-TestedonthePalmPixi(1.4),Pre(1.4),Pre2(2.0)PalmWebOS3.0-TestedonHPTouchPadFireboxMobile(10Beta)-TestedonAndroid2.3deviceChromeforAndroid(Beta)-TestedonAndroid4.0devic

6、eSkyfire4.1-TestedonAndroid2.3deviceOperaMobile11.5:TestedonAndroid2.3Meego1.2-TestedonNokia950andN9Samsungbada2.0-TestedonaSamsungWave3,DolphinbrowserUCBrowser-TestedonAndroid2.3deviceKindle3andFire-Testedonthebuilt-inWebKitbrowserforeachNookColor1.4.1-TestedonoriginalNookColor,notNookTabletChromeD

7、esktop11-17-TestedonOSX10.7andWindows7SafariDesktop4-5-TestedonOSX10.7andWindows7FirefoxDesktop4-9-TestedonOSX10.7andWindows7InternetExplorer7-9-TestedonWindowsXP,Vistaand7OperaDesktop10-11-TestedonOSX10.7andWindows75支持的平台（支持的平台（SupportedPlatforms）B-级级不支持ajax特效的高级体验Blackberry5.0:TestedontheStorm2955

8、0,Bold9770OperaMini(5.0-6.5)-TestedoniOS3.2/4.3andAndroid2.3NokiaSymbian3-TestedonNokiaN8(Symbian3),C7(Symbian3),alsoworksonN97(Symbian1)6支持的平台（支持的平台（SupportedPlatforms）C-级级只支持HTML的基本体验，但功能仍能完成Blackberry4.x-TestedontheCurve8330WindowsMobile-TestedontheHTCLeo(WinMo5.2)Alloldersmartphoneplatformsandfe

9、aturephones-Anydevicethatdoesntsupportmediaquerieswillreceivethebasic,Cgradeexperience7快速入门快速入门(Quickstartguide)PageTitlePageTitlePagecontentgoeshere.PageFooter8快速入门快速入门(Quickstartguide):开头必须使用HTML5的的文档说明，使得网站能够使用HTML5的特性(不支持HTML5的浏览器会安全的静默忽略此声明及一些自定义属性)。head标签内需要引用JQM的js以及css文件，推荐是链接到JQM的CDN服务器上。vi

10、ewportmeta标签：这个标签设定了浏览器怎样显示画面的缩放等级和范围。如果没有设定的话，许多移动设备的浏览器会使用一个虚拟的页面宽度（大约900px），这样屏幕看起来就是缩小的并且太宽了。设置width=device-width,initial-scale=1属性，会使宽度被设定为设备的屏幕宽度。移动网站的每一个视图或者页面都要通过在body中的data-role=“page“属性标签来定义。在page容器内，任何有效的html标签都可以使用，但是对于JQM的典型页面来说，page容器的直接子结点应该为使用data-role标记属性为“header”、“content”和“footer”

11、的3个容器。一个独立的html文件可以包含多个page，当有多个page存在时默认显示第一个page容器的内容，每个page都应该有一个唯一的ID（如id=“foo”），page之间可以通过(href=“#foo”)方式进行页面显示的转换。尽管上述的页面结构是通过JQM构建移动网站的标准格式，但是JQM框架是一个灵活的框架，page、header、content和footer的data-role元素都是可选的，但是基于AJAX的导航和组件都必须在标准的结构中才能工作9页面切换页面切换(Pagetransitions)为了实现在移动设备上的无缝客户体验，JQM默认采用ajax的方式载入一个目的链

12、接页面，并且用动画的转场效果实现页面切换。这样的结果就是用户交互始终保存在同一个页面中，新页面中的内容也会轻松的显示到这个页面里，这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。含有rel=“external”,data-ajax=“false”属性的链接以及含有target属性的链接不会通过ajax加载，页面会整体被刷新。可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可，可能的值如下：注意：1.查看以上所有效果，需要浏览器支持3D转换功能。默认情况下不支持3D效果的设备(如Android2.x)，都将退回到fade类型

13、。2.如果只是针对某个特定机型进行开发可以加些特效增加美观，如果是要支持很多设备，建议不要设置特效，容易出现转换闪屏等不可预知现象slide从右到左切换slideup从下到上切换slidedown从上到下切换pop以弹出的形式打开页面fade渐变褪色的方式切换flip旧页面翻转飞出，新页面飞入turn类似WP风格的页面效果flow类似IOS系统的Tab切换10对话框对话框(Dialogs)任何页面链接中加入data-rel=“dialog”属性后都可以被看作一个模态对话框。当“dialog”属性被应用，框架会为页面增加一些样式,包括圆角，页边空白,深色背景来让对话框看起来像悬浮在页面上。Ope

14、ndialog对话框是一个标准的“page”，它将以适用于所有page的标准过渡效果打开。和其他page一样,你可以指定你想要的任何过渡效果,只需要加入data-transition属性到该链接。为了感觉更像对话框,建议指定“pop”,“slideup”或者“flip”过渡效果。Opendialog对话框有一个默认的500px的max-width(每边加15px的padding)。也有一个10%的topmargin来使对话框在更大的屏幕上显示更大的topmargin,但在智能机上会有一个更小的margin。为了重写这些样式，添加下面的CSS规则到自定义样式表里:.ui-dialog.ui-he

15、ader,.ui-dialog.ui-content,.ui-dialog.ui-footermax-width:500px;margin:10%auto15pxauto;11工具栏工具栏(Toolbars)在JQM中,有两种标准类型的工具栏：Headers和FootersHeaderbar充当页面标题的作用,通常是mobilepage中的第一个元素，一般包含有一个页面标题和两个按钮Footerbar通常是最后一个元素，相比于header在内容和功能上面更加自由，一般包含一些文字和按钮在header/footer中一个水平的导航栏或者tab页是非常常见的；JQM包含了导航条部件，该部件能将一个

16、无序列表（ul）链接变成一个水平分布的按钮栏。Header和footers可以用不同方式调整他们在页面中的位置。通过配置data-position属性可以实现不同的显示，属性值如下：inlineheader和footer会位于自然文档流中（即默认的HTML行为），这样可以确保它们在所有的设备中可见（不管设备是否支持JavaScript和css）fixed提供了一个无视人为滚动页面保持固定位置的toolbar，toolbar会像inline模式一样出现在它们在页面中原始的位置，但是你滚动滚动条使toolbar离开视线时，框架会通过动态重新调整toolbar的位置好让toolbar以动画的效果重新

17、出现在当前浏览器视口的顶部或者底部fullscreen开始不会在顶部和底部出现，除非你点击页面。在创建沉浸式应用时（如照片或视频浏览器）非常有用，你可以全屏浏览，而toolbar会在你需要时轻触屏幕来被唤出。但是这种模式下toolbar出现时会覆盖页面内容，因此最好是在特定情况下使用此模式。12导航条导航条(Navbars)在JQM中有一个非常基本的Navbar部件非常有用，它提供多达5个按钮和可选的图标，通常位于header/footer里面navbar通常是一个包裹在一个容器里的无序链接列表，容器设置data-role=“navbar”属性。要设置其中一个链接是激活（被选择）的状态，为链接

18、添加class=“ui-btn-active”属性即可。OneTwo在这种情况下navbar被匀分，每个按钮都占1/2的浏览器窗口宽度，最多一行5个按钮，每个占1/5的宽度，如果多于5个按钮，navbar会被折行显示navbar也可以通过data-icon属性来添加图标，并通过data-iconpos属性来决定图标所在位置，另外除了JQM自带的图标外，还可以引入第三方的自定义图标data-icon和data-iconpos的可配值见官方API13内容格式内容格式(Contentformatting)网格布局（Layoutgrids）在移动设备上使用多列布局是不推荐的，但是有时你可能会需要把一些

19、小的元素比如按钮导航tab等排成一行，JQM为此提供了一个简单的方法来构建基于CSS的栅格布局（ui-grid）。有四个预设的配置布局几乎可满足在任何情况下使用的要求：二列(使用ui-grid-a)三列(使用ui-grid-b)四列(使用ui-grid-c)五列(使用ui-grid-d)网格宽度是100%的，且不可见（没有背景或边框），也没有padding和margin，所以不影响它们内嵌元素的样式。在栅格容器里,子元素以有序的方式被分配ui-block-a/b/c/d，这使每个“block”元素并列显示（组成栅格）。14内容格式内容格式(Contentformatting)可折叠内容（Col

20、lapsiblecontent）创建一个可折叠的内容块，需要创建一个容器，并添加data-role=“collapsible”属性，使用data-content-theme属性允许你为折叠的内容设置一个主题样式。直接在容器里面添加任何标题元素（h1-h6)，框架会把标题自动转换为一个可点击的按钮并且添加一个“+”图标用来指明它是可以展开的。在标题后面可以添加任何HTML标记，框架会自动把这些标记包裹在一个容器里用以折叠或显示（当点击标题时）。默认情况下,内容被折叠，可通过data-collapsed属性来配置。ImaheaderImthecollapsiblecontent.Bydefault

21、Imclosed,butyoucanclicktheheadertoopenme.可折叠集（CollapsibleSet）通过在多个折叠内容外添加具有data-role=“collapsible-set”属性的容器，该框架会使它们看起来像一个分组部件并且使它交互上像一个折叠，因此一次只能打开一个部分。Section1ImthecollapsiblesetcontentforsectionB.Section2ImthecollapsiblesetcontentforsectionB.15表单元素表单元素(Formelements)JQM提供了一套完整的、适合触摸操作的表单元素，他们都是基于原生的

22、html元素，然后又得到增强，使他们更吸引人并且容易使用，在不支持JQM的浏览器下仍然是可用的。所有的表单都应该被包裹在一个form标签内，这个标签应该指定好action和method属性用来控制与服务器传送数据的方法默认情况下JQM会自动把原生的表单元素增强为适合触摸操作的组件。这是它通过标签名寻找表单元素，然后对他们执行JQM插件的方法内部实现的，比如select元素被找到后，JQM通过用selectmenu插件进行初始化，而一个属性为type=“checkbox”的input元素会被checkboxradio插件来增强。如果你需要某表单元素不被JQM处理，只需要给这个元素增加data-r

23、ole=“none”属性。在JQM中所有的表单元素都被设计成弹性宽度以适应不同移动设备的屏幕宽度，JQM中内建的一个优化就是根据屏幕宽度的不同,label和表单元素的宽度是不同的。如果屏幕宽度相对窄（小于480px),label元素会被样式化为块级元素，使他们能够置于表单元素上方，节省水平空间；在比较宽的屏幕上，label和表单元素会被样式化为两列的网格布局的一行中，充分利用页面的空间。我们可以把表单内的每一个label/表单元素对用div或fieldset容器包裹，然后增加data-role=“fieldcontain”属性，以改善标签和表单元素在宽屏设备中的样式。JQM会自动在容器底部添加

24、一条细边框作为分隔线，使得label/表单元素对在快速扫视时看起来对齐16按钮（按钮（Buttons）按钮在用作导航时应该被编码成a标记的链接，而提交表单的按钮则被编码成button元素它们都会被JQM框架提供相同的样式为链接应用button样式在一个页面的的主要内容区域，你可以把任何a标记都转变成button样式，只需要添加data-role=“button”属性即可，即可会自动添加所有必须的样式class来把a标记都转变成button样式Linkbutton表单按钮为了简化编写样式代码，框架自动把任何带有type=submit/reset/button/image的button元素或者in

25、put元素转换为基于连接的button样式不需要添加data-role=button属性17按钮（按钮（Buttons）按钮在用作导航时应该被编码成a标记的链接，而提交表单的按钮则被编码成button元素它们都会被JQM框架提供相同的样式：为链接应用button样式在一个页面的的主要内容区域，你可以把任何a标记都转变成button样式，只需要添加data-role=“button”属性即可，即可会自动添加所有必须的样式class来把a标记都转变成button样式Linkbutton表单按钮为了简化编写样式代码，框架自动把任何带有type=“submit”/“reset”/“button”/“i

26、mage”的button元素或者input元素转换为基于连接的button样式不需要添加data-role=“button”属性。为了阻止formbutton被转化成增强的按钮,添加data-role=“none”属性即可禁止对此控件的渲染。button也可以通过data-icon属性来添加图标，并通过data-iconpos属性来决定图标所在位置，还可以使用自定义图标默认情况下的正文内容所有按钮都称为块级元素，所以他们会充满整个屏幕的宽度，如果想要一个更紧凑的按钮，让其只和它包含的文字和图标的宽度相适应，添加data-inline=“true”即可。某些时候可能要把某组按钮设置在一起，形成一

27、个单独的块，看起来像导航组件，要获得这种效果，把这组按钮包裹在一个含有data-role=“controlgroup”属性的容器里框架会创建一个垂直排列的按钮组，并去掉它们之间所有的填白和阴影，并只给第一个和最后一个按钮添加圆角。18文本输入框（文本输入框（Textinput）文本输入框是使用标准的html标记的，然后JQM会让他们变得更吸引人而且易于触摸使用，默认样式是宽度为父容器的100%，label在另一行TextInput:对于更紧凑的版本，要在一个狭小的空间内显示，通过data-mini=“true”属性可以创建一个“迷你”版控件（后面所有表单控件都有这个属性）TextInput:可

28、以用div容器包裹它们，并给它设定data-role=“fieldcontain”属性，使他们在一个大的表单里在视觉上是成组的（后面表单控件都可这样设置）TextInput:在JQM中你可以使用现存的和新的HTML5输入类型比如password,email,tel,number和更多的类型。19文本输入域（文本输入域（Textareas）对于多行输入可以使用textarea元素，JQM框架会自动加大文本域的高度防止出现在移动设备中很难使用的滚动条的出现Textarea:Imabasictextarea.Ifthisispre-populatedwithcontent,theheightwill

29、beautomaticallyadjustedtofitwithoutneedingtoscroll.Thatisaprettyhandyusabilityfeature.20搜索输入框（搜索输入框（Searchinput）搜索输入框是一个新兴的html元素，外观为圆角，当你输入文字后右边会出现一个叉的图标，点击则会清除你输入的内容，给input增加type=“search”属性来定义。SearchInput:21滑动条（滑动条（Slider）给input的设置一个新的HTML5属性为type=“range”，可以给页面添加滑动条组件，可以指定它的value值（当前值），min和max属性的值

30、配置滑动条。JQM会解析这些属性来配置滑动条。当你滑动滑动条时，input会随之更新数值，反之亦然，使你能够很简单的在表单里提交数值。设置min和max属性的值你可以配置滑动条上下能取到的值，而value值是用来指定滑动条初始的位置和input框内的值滑动杆同样对键盘有响应。右箭头，上箭头，PageUp键可以用来增加当前值，左箭头，下箭头，PageDown键则减少当前值。Home键和End键则可以分别调到滑动条的最小值和最大值Inputslider:22开关（开关（FlipToggleSwitch）开关在移动设备上是一个常用的ui元素，用来二元的切换开/关或者输入true/false类型的数据

31、。你可以像滑动框一样拖动开关，或者点击开关任意一半进行操作创建一个只有2个option的选择菜单就可以构造一个开关了。第一个option会被样式化为开，第二个option会被样式化为关，所以请注意代码书写顺序。Selectslider:OffOn23单选按钮组（单选按钮组（Radiobuttons）传统的桌面程序的单选按钮组没有对触摸输入的方式进行优化，所以在JQM中，label也被样式化为单选按钮，使按钮更长，容易点击，并添加了自定义的一组图标来增强视觉反馈要创建一组单选框，为input添加type=“radio”属性和相应的label即可因为单选按钮使用label元素放置radio后，用来

32、显示其文本，我们推荐把单选按钮组用fieldset容器包裹，并给fieldset容器内增加一个legend元素，用来表示标题，还需将fieldset包裹在有data-role=“controlgroup”属性的div里以便于将该组元素和文本框，选择框等其他表单元素同时设置样式单选按钮组也可用作单选的水平按钮组，只需要为fieldset添加data-type=horizontal属性即可Chooseapet:CatDogHamsterLizard24复选按钮组（复选按钮组（Checkboxes）基本类似单选按钮组Agreetotheterms:CheetosFritos25选择菜单（选择菜单（S

33、electMenus）选择菜单摒弃了原生的select元素的样式，原生的select元素被隐藏，并被一个由JQM框架自定义样式的按钮和菜单替代。当被点击时，手机自带的原生的菜单选择器会打开。菜单内某个值被选中后，自定义的选择按钮的值更新为你选择的那一个。要添加这样的选择菜单组件，使用标准的select元素和位于其内的一组option元素。框架会自动找到所有的select元素并自动把他们增强为自定义的选择菜单。Shippingmethod:Standard:7dayRush:3daysExpress:nextdayOvernight26列表（列表（ListView）列表的代码为一个含data-r

34、ole=“listview”属性无序列表ul。JQM会把所有必要的样式(列表项右出现一个向右箭头，并使列表与屏幕同宽等)应用在列表上，使其成为易于触摸的控件。基本的带链接的listviev如下所示，当你点击列表项时，JQM会触发该列表项里的第一个链接，通过ajax请求链接的URL地址，在DOM中创建一个新的页面并产生页面转场效果。AcuraAudiBMW其它类型的listview：嵌套列表（Nestedlist）数字排序列表（Numberedlist）只读列表（Read-onlylist）拆分的按钮列表（Splitbuttonlists）列表分割项（Listdividers）搜索过滤框（Sea

35、rchfilter）文本格式和计数气泡（Textformatting&counts）列表项的缩略图与图标（Thumbnails&icons）内嵌列表（Insetlists）27表单提交（表单提交（FormSubmit）在form元素上正确设定action和method属性后，JQM会自动通过ajax处理表单的提交，并在表单页面和结果页面之间创建一个平滑的转场效果。如果没有指定，提交方法默认为get,action默认为当前页的相对路径。表单也可以像链接一样指定转场效果的属性，比如data-transition=“pop”和data-direction=“reverse”。如果不希望通过ajax提

36、交表单，可以在全局事件禁用ajax，或给form设定data-ajax=“false”属性，target属性也可以在form上设置，表单提交时默认为浏览器的打开规则。而与链接不同，rel属性不可以在form上设定。像普通的HTTP请求表单提交一样，JQM允许通过get请求成功得到的结果页通过更新Url的哈希值被添加为收藏页；而也像普通的表单提交一样，post请求不包含查询参数，因此结果页不能被添加为收藏页28主题样式（主题样式（Theming）JQM中每一个布局和组件都被设计为一个全新的面向对象的css框架，使我们能够给站点和应用程序适用完全统一的视觉设计主题。JQM的主题样式系统与Jquer

37、yUI的ThemeRoller系统很类似，但是做出了几点重要的改进：使用的css3来显示圆角，文字和盒阴影和颜色渐变，而不是图片，使得主题文件非常轻量级，减轻了服务器的负担主体框架包含了几套颜色色板，每一套都包含了可以自由混搭和匹配的头部栏，body，按钮状态。用来构建视觉纹理，创建丰富的设计开放的主题框架允许你创建最多6套主题样式，给设计增加近乎无限的多样性一套简化的图标集，包含了移动设备上大部分需要使用的图标，并且sprite到一张图片里减少了图片大小JQM默认内建了5套主题样式，用（a,b,c,d,e）引用。为了使我们的颜色主题能够保持一直地映射到我们的组件中，我们遵从的规约是：a主题是视觉上最高级别的主题（黑色），b主题为次级用主题（蓝色），c主题为基准主题，在很多情况下是默认使用的，主题d为备用的次级内容用主题，主题e为强调用主题。你也可以手动添加主题用于强调，或者是特殊的场合。例如：你可以手动添加新的主题“i”,用于制作红色的工具栏或者按钮，用于错误提示等。29API30演讲完毕，谢谢观看！