jQuery Mobile教程-高级篇-自动增强主体结构开篇

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别申明:本系列教程由小春撰写

本文我们来深度认识一下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;
}

说明:本文只是一个引子,后面我们会对部分主要组件在自动增强前后的对比进行详细的说明

PS:
1、有问题欢迎在官网留言或者直接联系我:@zhangyaochun_fe
2、可以在官网的问答频道进行提问,我们会尽快回复
3、谢谢您对w3cplusjquery mobile系列教程的关注

 

关于小春

专注于前端开发,对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习,涉足移动前端许久,爱好分享交流…个人博客focus-fe。欢迎随时关注我:新浪微博

Nike Air Jordan 11Lab4 Retro 4 Patent Leather

如需转载,烦请注明出处:https://www.w3cplus.com/blog/729.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部