| 文章简介：本文我们来通过源码分析的方式，深度认识一下jquery Mobile中grid组件的设计实现细节. |
本文我们来通过源码分析的方式，深度认识一下jQuery Mobile中grid组件的设计实现细节
先看一下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%; }
欢迎大家阅读《jQuery Mobile教程:grid组件设计实现细…_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery Mobile教程:grid组件设计实现细_js
转载请注明原文链接：jQuery Mobile教程:grid组件设计实现细_js
