jQuerymobile如何实现网格布局-创新互联

这篇文章将为大家详细讲解有关jQuery mobile如何实现网格布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联科技有限公司专业互联网基础服务商,为您提供成都联通服务器托管高防物理服务器租用,成都IDC机房托管,成都主机托管等互联网服务。

3.4 内容格式化

jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局、折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化。

3.4.1 网格布局

jQuery Mobile提供的CSS样式“ui-grid”可以实现内容的网格布局。该样式有4种预设的配置布局:“ui-grid-a”、“ui-grid- b”、“ui-grid-c”、“ui-grid-d”,分别对应两列、三列、四列、五列的网格布局形式,可以大范围满足页面多列的需求。

使用网格布局时,整个宽度为100%,无任何“padding”和“margin”及背景色,因此不会影响到其他元素放入网格中的位置。

实例3-12 在内容区域添加多种类型的网格布局

1. 功能说明

新建一个HTML 页面,在内容区域中添加4种预设的网格布局,并且通过不同的主题颜色进行区分,以分块的形式显示在页面中。

2. 实现代码

新建一个HTML页面3-12.htm,加入代码如代码清单3-12所示。

代码清单 3-12 在内容区域添加多种类型的网格布局




  jQuery Mobile 网格布局
  
       rel="Stylesheet" type="text/css" />
       rel="Stylesheet" type="text/css" />
  
  


 


  

头部栏标题


   

  

  
A

  

  

  
B

  

 

 

  

  
A

  

  

  
B

  

  

  
C

  

 

 

  

  
A

  

  

  
B

  

  

  
C

  

  

  
D

  

 

 

  

  
A

  

  

  
B

  

  

  
C

  

  

  
D

  

  

  
E

  

 

2012 rttop.cn studio



3. 源码分析

在本实例的代码中,要增加一个多列的网格区域,首先通过

元素构建一个容器,如果是两列,则给该容器添加的“class”属性值为“ui-grid-a”;三列则为“ui-grid-b”,依此类推。

然后,在已构建的容器中添加子容器,如果是两列,则给两个子容器分别添加“ui-block-a”、“ui-block-b”样式属性;如果是三 列,则给三个子容器分别添加“ui-block-a”、“ui-block-b”、“ui-block-c”样式属性;其他多列依此类推。

最后,在子容器中放置需要显示的内容。在本实例中,每个子容器都分别放置了一个

元素,代码如下所示:

A

在上述代码中,

元素通过“class”属性添加了三个样式。第一个和第二个都是jQuery Mobile自带的样式,“ui-bar”用于控制各子容器的间距,“ui-bar-b”用于设置各子容器的主题样式。第三个样式“h70”为自定义样 式,将子容器的高度设置为“60px”。

说明 如果容器选择的样式为两列即“class”值为“ui-grid-a”,而在它的子容器中添加了三个子项即“class”值为“ui-block-c”,那么该列自动被放置在下一行。

关于“jQuery mobile如何实现网格布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:jQuerymobile如何实现网格布局-创新互联
分享地址:http://scyanting.com/article/dpgohs.html