Jquerymobile快速上手指南.docxVIP

Jquerymobile快速上手指南（感谢CSDN mociml）1、模板结构1.1?jQuery?Mobile单页模板!DOCTYPE?html?html?head?meta?charset=utf-8titlePage?Template/title?meta?name=viewport?content=width=device-width,?initial-scale=1?//user-scalable=no?禁用缩放link?rel=stylesheet?href=/mobile/1.0/jquery.mobile-1.0.min.css?/script?src=/jquery-1.6.4.min.js/script!--script?src=custom-srcipt-js/script--??//自定义脚本位置script?src=/mobile/1.0/jquery.mobile-1.0.min.js/script/head?body?div?data-role=pagediv?data-role=headerh1Page?Header/h1/divdiv?data-role=contentp你好/p?????????//注意：html文件的编码格式要为utf-8，否则有中文会乱码/divdiv?data-role=footer?data-position=fixed?//默认页脚在内容之后，添加此句后定位到屏幕底部h4Page?Footer/h4/divscript?type=text/javascript/*Page?specific?scripts?here*//script/div/body/html1.2?多页模板!DOCTYPE?html?html?head?meta?charset=utf-8titleMulti?Page?Example/title?meta?name=viewport?content=width=device-width,?initial-scale=1link?rel=stylesheet?href=/mobile/1.0/jquery.mobile-1.0.min.css?/?script?src=/jquery-1.6.4.min.js/scriptscript?type=text/javascript/*?Shared?scripts?for?all?internal?and?ajax-loaded?pages?*//scriptscript?src=/mobile/1.0/jquery.mobile-1.0.min.js/script/head?body?!--?First?Page?--div?data-role=page?id=home?data-title=Welcomediv?data-role=headerh1Multi/h1/divdiv?data-role=contenta?href=#contact-info?data-role=buttonContact?Us/a/divscript?type=text/javascript???//多页面文档内部javascript/*?Page?specific?scripts?here.?*//script/div!--?Second?Page?--div?data-role=page?id=contact-info?data-title=Contactsdiv?data-role=headerh1Contact?Us/h1/divdiv?data-role=contentContact?information.../div/div（1）每个页面必须包含唯一id（2）最初显示多个页面时，只有第一个页面得到增强并显示（3）链接到一个内部页面时，必须通过页面id来引用，href=#contact,载入页面的地址multi.html#contact（4）多页面文档内部的javascript不能被其他页面访问（5）父文档head标签内声明的所有脚本，都可以被内部页面和通过Ajax载入的页面访问2、页面切换和过度2.1?切换分类（1）一个多页文档中，一个内部页到另一内部页（Ajax导航）根据#id?a?href=#next（2）同一个域范围内，一个单页文档切换到另一单页文档（Ajax导航）a?href=otherDocument.htmlGo?to?next?page/a（3）当连接到一个多页面文档时，必须为其链接添加rel=external（HTTP）a?href=multi.html?rel=externalHome/a（4）外部绝对地址,连接到另一个域(HTTP)a?href=?data-rel=external/aa