jQuery Mobile教程-高级篇-网格配置实现细节

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

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

本文我们来通过源码分析的方式,深度认识一下jQuery Mobile中grid组件的设计实现细节
还记得我们前面在《jQuery Mobile教程-基础篇-网格篇》里面提到的如何设置几列布局吗?

先看一下jquery.mobile-1.1.0.css的样式设计源码:

/*grid的class*/
.ui-grid-a,.ui-grid-b,.ui-grid-c,ui-grid-d{
	overflow:hidden;
}

/*block的class*/
.ui-block-a,.ui-block-b,.ui-block-c,.ui-block-d,.ui-block-e{
	margin:0;
	padding:0;
	border:0;
	float:left;		//采用float
	min-height:1px;
}


/*2列均摊*/
.ui-grid-a .ui-block-a,
.ui-grid-a .ui-block-b{
	width:50%;		//2列均摊
}
.ui-grid-a .ui-block-a{
	clear:left;
}
	
/*3列均摊*/
.ui-grid-b .ui-block-a,
.ui-grid-b .ui-block-b,
.ui-grid-b .ui-block-c{
	width:33.333%;	//3列均摊
}
.ui-grid-b .ui-block-a{
	clear:left;
}

/*4列均摊*/
.ui-grid-c .ui-block-a,
.ui-grid-c .ui-block-b,
.ui-grid-c .ui-block-c,
.ui-grid-c .ui-block-d{
	width:25%;	    //4列均摊
}
.ui-grid-c .ui-block-a{
	clear:left;
}
	
/*5列均摊*/
.ui-grid-d .ui-block-a,
.ui-grid-d .ui-block-b,
.ui-grid-d .ui-block-c,
.ui-grid-d .ui-block-d,
.ui-grid-d .ui-block-e{
	width:20%;		//5列均摊
}
.ui-grid-d .ui-block-a{
	clear:left;	
}   

那如果我们要实现自定义的不规则网格呢?

比如:我要设置2列,左30%,右70%

.ui-grid-a .ui-block-a{
	width:30%;
}
.ui-grid-a .ui-block-b{
	width:70%;
}

再比如:我要设置3列,左30%,中20%,右50%

.ui-grid-b .ui-block-a{
	width:30%;
}
.ui-grid-b .ui-block-b{
	width:20%;
}
.ui-grid-b .ui-block-c{
	width:50%;
}

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

 

关于小春

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

Nike React Element

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

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

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