搜索
JqueryMobile综述快速上手开始使用jQueryMobile提供了一系列针对触摸操作友好的ui组件和基于ajax的导航系统来支持动画的页面转场。构建一个自己的jQueryMobile页面是非常容易的：基本的页面的模板打开你最喜欢的文本编辑器，把下面的页面模板代码粘贴进去，保存然后用浏览器打开。你现在也是移动开发者了！在head里，viewport的meta标签将屏幕的宽度设置为了与设备的宽度相同，并且从Cdn引入了jQuery,jQueryMobile和jQuer。yMobile的主题样式表。jQueryMobile1.1需要工作于1.6.4或1.7.1版本的jQuery框架之上。在body之中，用data-role=“page”来标记的一个div容器，用来定义一个page，页面，data-role=header来标记的div容器用来定义页面的头部栏，data-role=content来标记的div容器用来定义页面的内容区域，这些用HTML5的data-属性标记的标签会通过jQueryMobile框架自动将基本的标记增强为部件。HTML代码:!DOCTYPEhtmlhtmlheadtitleMyPage/titlemetaname=viewportcontent=width=device-width,initial-scale=1linkrel=stylesheethref====pagedivdata-role=headerh1MyTitle/h1/div!--/header--divdata-role=contentpHelloworld/p/div!--/content--/div!--/page--/body/html加入你自己的内容在content容器中，你可以加入你自己的标准的HTML元素h1,ul,p等，你可以自己写样式来创建自定义的布局，但是注意要在jQueryMobile的样式表之后加入自己的样式。列表jQueryMobile包含了一系列不同的列表，可以用datarole=listview标记的ul标记来定义。可以添加data-inset=true的属性来使列表看起来是内嵌的。还可以加入data-filter=true属性加入一个动态的搜索过滤条。HTML代码:uldata-role=listviewdata-inset=truedata-filter=trueliahref=#Acura/a/liliahref=#Audi/a/liliahref=#BMW/a/liliahref=#Cadillac/a/liliahref=#Ferrari/a/li/ul滑动条jquerymobile框架包含了一整套表单元素会自动将表单增强为易于触摸的样式。这个滑动条是用html5新的input类型“range”写的，不需要data-role属性。务必把他放到form标签内，并且与label元素相关联。html代码:formlabelfor=slider-0Inputslider:/labelinputtype=rangename=sliderid=slider-0value=25min=0max=100//form按钮有几种办法可以做按钮，先让a标签成为按钮，只需要在a标签添加data-role=button属性就可以了。通过data-icon属性可以给按钮添加图标，并且通过data-iconpos属性控制图标的位置。html代码:ahref=#data-role=buttondata-icon=starStarbutton/a玩转主题样式jQueryMobile拥有一套健壮的主题样式系统支持最多26套（因为英文字母只有26个）工具栏，内容和按钮的主题，叫做swatch.（斯沃琪手表...）.只需要给页面的任意组件添加data-theme=e的属性，就可以将之设计为黄色的主题样式。如果你想构建自己的主题样式，请使用ThemeRoller(主题编辑器)吧.再构建点什么这仅仅是你用jQueryMobile轻松构建WEBAPP的开始。想要学习更多，请访问页面的链接，给页面添加转场和创建对话框。使用data-attribute属性尝试其他的data-attributes。关键特性1构建于Jquery的核心之上。使之兼容于jq的语法，对于开发人员有最易的开发曲线2兼容于所有的主流移动手机，平板电脑，电子书,和pc，:iOS,Android,Blackberry,PalmWebOS,Nokia/Symbian,WindowsPhone7,MeeGo,OperaMobile/Mini,FirefoxMobile,Kindle,Nook,和所有的现代浏览器。3轻量级压缩后只12k，对图片的依赖程度非常低，保证了速度4模块化的架构可以根据你的独特的需求用来构建最优化的应用5页面和行为均基于html5标记的驱动进行配，开发效率高，对脚本的需求小5渐进增强使所有的移动设备，平板电脑和pc电脑都支持核心的内容和方法。而对于新的移动平台，则可以展现像安装在设备中的应用程序一样出色的富媒体和交互的浏览体验6弹性的设计可以使同样的代码在智能设备上和桌面的屏幕上都自动缩放适应。7强大的ajax驱动的导航系统在保持后退按钮，收藏夹和干净的地址栏的同时完成页面转场。8优秀的可访问性一些特性比如WAI-ARIA也包含在内，以确保页面也可以在一些屏幕阅读器(比如苹果的VoiceOver)或者其他手持设备中正常工作.9支持触摸和鼠标事件增加了触摸屏设备支持的触摸，鼠标，和基于光标的输入方法的API10统一的UI组件增加了触摸屏设备支持的触摸，鼠标，和基于光标的输入方法的API11强大的主题样式框和主题编辑器能很容易的进行高度个性化和品牌化的的界面定制可访问性JqueryMobile是基于标准的，系统化的html构建的，使得页面能够在最广范围的设备上得到支持。对于A级的浏览器，许多JqueryMobile组件，比焦点管理,键盘导航等都能支持，其他可以详细参加W3C的WAI-ARIA说明.通过运用这些技术，我致力于使得通过JqueryMobile开发的web产品拥有最好的可访问性，对于伤残人士，例如盲人，也可以用读屏软件，例如iphone的voiceover,使用。我们现在正在改进可访问性，我们的目标是在1.0版本的时候，使Jquerymobile的所有控件都拥有全部的可访问性。支持的平台到了正式版，jQueryMobile已经覆盖了所有的目标平台。即，我们已经支持绝大多数的常用现代桌面电脑，智能设备，平板电脑和电子书平台，并且一些怪异的手机和古老的浏览器也都支持，因为我们渐进增强的尝试。我们为我们的努力而达到的最大化的可用性而感到自豪。我们根据目标在过去的一年间制作了一个浏览器分3级支持的表格，并且根据实机测试改进了这个表。视觉表现的好坏主要依赖于设备的浏览器对css的渲染能力，所以不是所有的A级的浏览器都能都达到像素级的完美但是表现绝对是正常的。A-grade支持全部的增强的体验,包括基于ajax的动画的页面转场•AppleiOS3.2-5.0-TestedontheoriginaliPad(4.3/5.0),iPad2(4.3),originaliPhone(3.1),iPhone3(3.2),3GS(4.3),and4(4.3/5.0)•Android2.1-2.3-TestedontheHTCIncredible(2.2),originalDroid(2.2),NookColor(2.2),HTCAria(2.1),GoogleNexusS(2.3).Functionalon1.5&1.6butperformancemaybesluggish,testedonGoogleG1(1.5)•AndroidHoneycomb-TestedontheSamsungGalaxyTab10.1•WindowsPhone7-TestedontheHTC7Surround•Blackberry6.0-TestedontheTorch9800andStyle9670•Blackberry7-TestedonBlackBerry®Torch9810•BlackberryPlaybook-TestedonPlayBookversion1.0.1/1.0.5•PalmWebOS(1.4-2.0)-TestedonthePalmPixi(1.4),Pre(1.4),Pre2(2.0)•PalmWebOS3.0-TestedonHPTouchPad•FireboxMobile(Beta)-TestedonAndroid2.2•OperaMobile11.0:TestedontheiPhone3GSand4(5.0/6.0),Android2.2(5.0/6.0),WindowsMobile6.5(5.0)•Meego1.2NEW-TestedonNokia950•ChromeDesktop11-13-TestedonOSX10.6.7andWindows7•FirefoxDesktop3.6-4.0-TestedonOSX10.6.7andWindows7•InternetExplorer7-9-TestedonWindowsXP,Vistaand7(minorCSSissues)•OperaDesktop10-11-TestedonOSX10.6.7andWindows7B-grade增强的体验,但是不支持ajax的导航•Blackberry5.0:TestedontheStorm29550,Bold9770•OperaMini(5.0-6.0)-TestedoniOS3.2/4.3•NokiaSymbian^3-TestedonNokiaN8(Symbian^3),C7(Symbian^3),alsoworksonN97(Symbian^1)C-grade没有增强的体验，但是依然可用•Blackberry4.x-TestedontheCurve8330•WindowsMobile-TestedontheHTCLeo(WInMo5.2)•所有古老的智能平台-所有不支持css的mediaqueries的设备，的表现都为C级不正式支持可能支持，但是没有经过彻底的测试或修BUG•SamsungBada-本项目目前还没有测试或模拟，但是现在看起来支持的还不错。组件JqueryMobile支持包含历史回退按钮的自动ajax读取外部页面的功能，一组页面转场动画，以及将页面显示为对话框的简易工具。页面结构JqueryMobile中的页面结构已经优化为支持单个的页面，或者在一个页面内嵌入的多个“page”。使用这种模型的目的是使WEB开发人员使用最佳实践创建WEB网站，使得普通的链接不需要任何特殊配置就可以工作，而且能创造出富媒体的像本地应用一样通过标准的http无法创造出的用户体验。移动网站页面结构JqueryMobile网站必须使用HTML5文档声明开始，使得网站能够适用HTML5的特性（不支持HTML5的旧浏览器会安全地静默忽略HTML5的文档声明和一些自定义属性）。在head标签内需要引用Jqu