| 文章简介：本文我们来深度认识一下jQuery Mobile中一个大致的自动增强的流程设计。 |
本文我们来深度认识一下jQuery Mobile中一个大致的自动增强的流程设计。
再直观地看看这个结构：
<div data-role="page"> <div data-role="header"> <h1>我是header部分</h1> </div> <div data-role="content"> <p>jQuery Mobile教程-基础篇-我是content部分</p> </div> <div data-role="footer"> <h3>我是footer部分</h3> </div> </div>
我们来看一下经过自动增强后的：
<html class="ui-mobile"> <body class="ui-mobile-viewport ui-overlay-c"> <div data-role="page" class="ui-page ui-body-c ui-page-active" tabindex="0"> <div data-role="header" class="ui-header ui-bar-a" role="banner"> <h1 class="ui-title" role="heading">我是header部分</h1> </div> <div data-role="content" class="ui-content" role="main"> <p>jQuery Mobile教程-基础篇-我是content部分</p> </div> <div data-role="footer" class="ui-footer ui-bar-a" role="contentinfo"> <h3 class="ui-title" role="heading">我是footer部分</h3> </div> </div> </body> </html>
下面我们认识一下这几个主要的class
1、ui-mobile
这个是给最顶部的html添加的
源码：
//#7390 $html.addClass("ui-mobile ui-mobile-rendering");
//#1067 .ui-mobile,.ui-mobile body{ height:99.9%; }
2、ui-mobile-viewport
这个是给body添加的
源码：
//#7491 $.mobile.pageContainer = $pages.first().parent().addClass("ui-mobile-viewport");
//#1071 .ui-mobile-viewport{ margin:0; overflow:visible; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-tap-hightlight-color:rgba(0,0,0,0); }; //#1073 body.ui-mobile-viewport,div.ui-mobile-viewport{ overflow-x:hidden; }
3、ui-page与 ui-body-a(a为theme)
源码：
//#2141 self.element.attr("tabindex","0").addClass("ui-page ui-body"+self.options.theme)
//#1706 .ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page{ top:0; left:0; width:100%; min-height:100%; position:absolute; display:none; border:0; } //#1079 .ui-page{ outline:none; }
说明：
原注释：on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines
4、ui-page-active
当前可见或者活动的页面或者对话框
源码：
//#1254 activePageClass:"ui-page-active" //#2243 $to.addClass($.mobile.activePageClass);
//#1077 .ui-mobile .ui-page-active{ display:block; overflow:visible; }
说明：本文只是一个引子，后面我们会对部分主要组件在自动增强前后的对比进行详细的说明
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
， jquery mobile
， ui
， 源码
， jquery.mobile
， jquery ui
， mobile
， 自动
， 部分
， jquery生成流程图
， 认识jquery
， jQuery流程步骤
addClass
jquery官网、jquery api、jquery下载、jquery教程、jquery ajax，以便于您获取更多的相关知识。