Jquerymobile快速上手指南.docx

Jquerymobile快速上手指南（感谢CSDN mociml）1、模板结构1.1jQueryMobile单页模板PageTemplate/user-scalable=no禁用缩放!-/自定义脚本位置PageHeader你好/注意：html文件的编码格式要为utf-8，否则有中文会乱码/默认页脚在内容之后，添加此句后定位到屏幕底部PageFooter/*Pagespecificscriptshere*/1.2多页模板MultiPageExample/*Sharedscriptsforallinternalandajax-loadedpages*/Multi-PageContactUs/多页面文档内部javascript/*Pagespecificscriptshere.*/ContactUsContactinformation.（1）每个页面必须包含唯一id（2）最初显示多个页面时，只有第一个页面得到增强并显示（3）链接到一个内部页面时，必须通过页面id来引用，href=#contact,载入页面的地址multi-page.html#contact（4）多页面文档内部的javascript不能被其他页面访问（5）父文档head标签内声明的所有脚本，都可以被内部页面和通过Ajax载入的页面访问2、页面切换和过度2.1切换分类（1）一个多页文档中，一个内部页到另一内部页（Ajax导航）根据#id（2）同一个域范围内，一个单页文档切换到另一单页文档（Ajax导航）Gotonextpage（3）当连接到一个多页面文档时，必须为其链接添加rel=external（HTTP）Home（4）外部绝对地址,连接到另一个域(HTTP)（5）打开dailogOpenDialogOpenDialogconfirmtion.html注意：如果要打开一个对话框页面，链接写data-role=dialog，但是具体的confirmtion.html一定要写data-role=page而不是data-role=dailog，否则弹出的对话框页面中类似绑定事件都将无效！（6）返回到上一页面Back（7）移动应用特殊链接，URI电话Callusfree!VideoandVoIPCallsCallmeusingFacetimeCallususingSkypeEmailMailusMailusMailus2.2页面间过度GotonextpageslideslideupslidedownpopfadeflipThedefaultright-to-leftanimation.Bottom-to-topanimation,mostlyusedformodalpages.Top-to-bottomanimation.Thenewpagewillgrowfromasmallpointinthemiddletoafull-screenpage.Across-fadeanimationbetweenoldandnewpages.A2Dor3Drotationanimation.3Disavailableonlyonsomedevices,suchasiOSdevices.Onotherdevices,suchasthosethatareAndroid-based,thistransitionrendersa2Drotationthatmaynotbetheeffectyoureallywant.3、toolbar工具条使用页眉或页脚3.1位置模式（1）默认模式（Default：Inlinemode）当页面content内容超过一屏时，滚动页面时，页眉和页脚将隐藏。Default（2）固定模式（Fixed）Fixed页眉和页脚位于顶部和底部，位置不变，否则当内容较少是，页脚紧随内容之后显示（3）全屏模式（FullScreen）适用于浏览图片，电子书应用Fixed页眉和页脚基于响应来出现和消失3.2添加按钮（通用于页眉和页脚）（1）只带有文本按钮Done（2）只带有图标的按钮（3）既有文本又有图标的按钮Done3.3页眉（1）修改按钮位置，默认左侧对齐(class=ui-btn-left)，可修改到右侧对齐Done（2）添加回退按钮a)在页面容器添加data-auto-back-btn=true,为某个特定页面添加回退按钮b)在绑定mobileinit选项时，全局启动回退按钮$(document).bind(mobileinit,function()$.totype.option.addBackBtn=true;$.totype.option.backBtnText=Previous;/回退按钮显示的文字$.totype.option.backBtnTheme=b;);如果在全局启用了回退按钮，可通过在页面页眉中添加data-auto-back-btn=false禁用特定页面回退按钮c)回退链接GoBack3.4页脚（1）添加永久导航条ui-btn-active标明载入页面时选中的项，如果不写默认是ui-btn-inactive，ui-state-persist表示选中项保持选中状态/创建永久导航条，避免页面转换期间闪烁，需要唯一data-id=main/标记为导航条天气 趋势 城市退出（2）带自定义图标导航条HomeMoviesTheatres.ui-navbar-custom.ui-btn.ui-btn-innerfont-size:11px!important;padding-top:24px!important;padding-bottom:0px!important;.ui-navbar-custom.ui-btn.ui-iconwidth:30px!important;height:20px!important;margin-left:-15px!important;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important;-webkit-border-radius:none!important;border-radius:none!important;#home.ui-iconbackground:url(./images/53-house-w.png)50%50%no-repeat;background-size:22px20px;#movies.ui-iconbackground:url(./images/107-widescreen-w.png)50%50%no-repeat;background-size:25px17px;#theatres.ui-iconbackground:url(./images/15-tags-w.png)50%50%no-repeat;background-size:20px20px;4、MainrolesavailableinjQueryMobile1.0data-role=RoleDescriptionpageheadercontentfooternavbarbuttoncontrolgroupcollapsiblecollapsible-setfieldcontainlistviewdialogslidernojsDefinesapage,theunitthatjQueryMobileusestoshowcontentHeaderofapageContentofapageFooterofapageDefinesanavigationbar,typicallyinsideaheaderRendersavisualbuttonRendersacomponentCollapsiblepanelofcontentinsideapageGroupofcollapsiblepanels(accordion)ContainerforformfieldsContentofmultipleitemsasalistDialogpageVisualsliderforBooleanvaluesElementthatwillbehiddenonjQueryMobilescompatiblebrowsers5、主题（data-theme）6、按钮6.1链接按钮（1）默认按钮，填充其外层容器的整个宽度Button（2）紧凑按钮，宽度与内部的文本和图标的宽度相同Button6.2表单按钮Buttonelement注：如果要禁用表单或其他控件的自动化初始化，可以为这些元素添加data-role=none6.3图像按钮6.4使用标准图表的按钮Button6.5只带有图标的按钮Button6.6按钮定位data-iconpos是指跟内容之间的位置关系IconPositioning TopLeftRightBottom 效果图6.7带自定义图标的按钮（1）为链接添加data-icon属性（2）创建一个CSS类属性，必须被命名为.ui-icon-Custom.ui-icon-custom1backgroud:url(./images/map.png)no-repeatcenter;6.8分组按钮默认垂直分组，移除所有空白边，以及在按钮之间添加边界，第一个和最后一个元素会使用圆角设计InTheatresComingSoonTopRated7、表单7.1表单基础（1）默认情况下表单使用AJAX提交到其他链接（#id）或外部页（相同域内html），跨域访问除外；（2）可以使用data-ajax=false或target=_blank强制禁止使用AJAX，主要用于跨域访问和文件上传（3）表单应当指明action和method属性，action属性规定当提交表单时，向何处发送表单数据，默认值当前页面相对路径。method指定数据如何发送到服务器，默认值为“get”。关于get方法的注释：该方法将表单数据以名称/值对的形式附加到URL中该方法对于用户希望加入书签的表单提交很有用在URL中放置的数据量是有限制的（不同的浏览器有差别），所以无法确保所有表单数据得到正确地传输绝不要使用get方法来传输敏感信息！（密码或其他敏感信息在浏览器地址栏中是可见的）关于post方法的注释：该方法以HTTPpost事务的方式来传递表单数据无法将通过post方法提交的表单加入书签与get相比，post方法更健壮更安全，而且post没有容量限制（4）使用label的for属性和input的id属性建立关系（5）placeholder属性，为文本输入添加提示或标签，在字段接受到焦点时自动消失（6）data-role=fieldcontainer用于加强label/form元素对Companyname:Email:Submit（7）HTML5required属性required属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。注释：required属性适用于以下类型：text,search,url,telephone,email,password,datepickers,number,checkbox,radio以及file。Name:（8）HTML5pattern属性pattern属性规定用于验证输入字段的模式。模式指的是正则表达式。您可以在我们的JavaScript教程中阅读到这方面的内容。注释：pattern属性适用于以下类型：text,search,url,telephone,email以及password。提示：请使用标准的title属性来描述模式。Countrycode:（9）按本地表单元素显示，JQueryMobile能够自动增强页面内所有表单元素，如果要显示本地控件A）添加data-role=noneB）在mobileinit事件初始化时设置$(document).bind(mobileinit,function()$.totype.options.keepNative=input,select;);7.2表单类型 Search Text:Number:Email:Url:Tel:Password: Textarea:（1）class=ui-hidden-accessible样式用来隐藏标签，用于保留508兼容性同时将标签优雅的隐藏（2）Type=search与其他输入样式不同，包含一个左对齐搜索图标，当用户输入文本时，出现一个右对齐的“删除”图标（3）移动输入类型和属性完整列表，参考/html5/inputs_mobile.html7.3、选择菜单selectnative代码截图testonandroid2.3.1多选Genre:ActionComedyDramaRomance单选Ticketdelivery:E-TicketNFCOvernightExpressGroundOvernightExpressStandardcustom代码截图多选Genre:Selectone.ActionComedyDramaRomance单选TicketDelivery:Selectone.E-TicketNFCOvernightExpressGroundOvernightExpressStandard(1)native使用本地OS平台方式呈现，custom在所有设备上提供统一用户体验(2)占位符选项：占位符要求用户做出一个选择。默认情况下，如果没有配置占位符，则列表的第一个选项会被选中三种配置占位符方式：A）为选项添加不带任何值的文本Selectone.B）在选项包含文本和值得时候，添加data-placeholder=true属性Selectone.C）如果需要不带有提示和页眉的字段，可以使用一个空选项7.4单选按钮radio和多选checkbox7.4.1单选按钮radioMapview: MapSatelliteHybrid（1）fieldset将表单的相关元素分组，legend为fieldset元素定义标题，for属性规定label与哪个表单元素绑定（2）data-role=controlgroup对按钮编组，data-type=horizontal标识编组后按钮圆角显示7.4.2多选按钮checkbox单独使用Iaccepttermsandconditions多选DeliveryoptionsIaccepttermsandconditionsIaccepttermsandconditionsIaccepttermsan