详解jQuery移动页面开发中的ui-grid网格布局使用_jquery
Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列
- 两列(使用ui-grid-a类)
- 三列(使用ui-grid-b类)
- 四列(使用ui-grid-c类)
- 五列(使用ui-grid-d类)
网格是100%的宽度,完全看不见的(没有边界或背景)和没有margin或padding,所以他们不会干扰样式的元素放在他们里面。在网格容器,子元素被分配ui-block-a / b / c/ d 以连续的方式,使每个“块”元素浮动并列,形成网格。其中ui-block-a类基本上清除浮将开始新的一行(见多行的网格,在下面)。
ui-grid-a 两列布局
建立个两列(50 / 50%)布局,第一层(父容器)添加ui-grid-a属性,第二层(两个子容器)里面分别添加ui-block-a和ui-block-b:
I'm Block A and text inside will wrapI'm Block B and text inside will wrap
上述标记产生以下内容布局:
正如你看到的,缺省情况下网格没有视觉造型;他们只是呈现内容并排。
网格的类可以被应用到任何容器。在下一个例子中,我们添加一个ui-grid-a,并应用ui-block,两个按钮分别延伸到50%的屏幕宽度
请注意,这个框架增加网格中的左和右margin的按钮。为一个单一的按钮,您可以使用类ui-grid-solo和按钮类ui-block-a,像下面的例子一个div。这样的按钮将得到同样的margin
主题类(没有数据主题属性)从主题系统可以被添加到一个元素,包括网格。在下面的块,我们增加了两个类:ui-bar添加默认的bar和ui-bar-e应用背景梯度和字体风格的“E”工具栏主题的样本。为了说明的目的,一个内联style=“height:120px”属性也被添加到每个网格设置每一个标准高度。
ui-block-b 三列布局
网格布局配置使用class= ui-grid-b在父母和3个子容器的元素,每个都有其各自的ui-block-a / a / c类,创建一行三列布局(33 / 33 / 33%)。注意:这些块同样风格的主题课程,网格布局清晰可见。
Block ABlock BBlock C
这为我们的内容,将产生一个33 / 33 / 33%网格布局
ui-block-c 四列布局
一行四列,25 / 25 / 25 / 25%网格,是通过在父容器指定class= ui-grid-c和添加四分之一块。注意:这些块同样风格的主题课程,网格布局清晰可见
ui-block-c 五列布局
一行五列,20 / 20 / 20 / 20 / 20%网格,是通过在父容器指定class= ui-grid-d
多行多列布局
网格设计包装的项目多行。例如,如果您指定了一个三行三列网格(ui-grid-b)在一个容器,有九个子块,则换到3排各3项。有一个CSS规则明确的花车和开始新的一行,当class= ui-block-a是确保在重复序列分配块(A,B,C类,A,B,C,等)映射到网格类型。可以给每行的第一个容器设置为class=ui-block-a 来清除浮动,这样9 个子容器的class 应为:class=ui-block-(a,b,c,a,b,c,a,b,c)。
grid-layout demo Grid Layout Example
I'm Block A and text inside will wrap.I'm Block B and text inside will wrap.
上一篇: tornado总结2-html模板使用1_html/css_WEB-ITnose
下一篇: Zend Studio上安装使用Aptana插件(html,css,js代码提示功能)_html/css_WEB-ITnose
推荐阅读
-
使用jquery-easyui的布局layout写后台管理页面的代码详解
-
小强的HTML5移动开发之路(35)——jQuery中的过滤器详解
-
小强的HTML5移动开发之路(35)——jQuery中的过滤器详解
-
jQuery移动web开发中的页面初始化与加载事件_jquery
-
使用jquery-easyui的布局layout写后台管理页面的代码详解
-
jQuery移动页面开发中主题按钮的设计示例
-
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介_jquery
-
jQuery移动web开发中的页面初始化与加载事件_jquery
-
详解jQuery移动页面开发中的ui-grid网格布局使用_jquery
-
jQuery移动页面开发中主题按钮的设计示例