详解jQuery移动页面开发中的ui

移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起。Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid

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:

<div> <div><strong>I'm Block A</strong> and text inside will wrap</div> <div><strong>I'm Block B</strong> and text inside will wrap</div> </div><!-- /grid-a -->

上述标记产生以下内容布局:

2015123162840041.jpg (828×100)

正如你看到的,缺省情况下网格没有视觉造型;他们只是呈现内容并排。

网格的类可以被应用到任何容器。在下一个例子中,我们添加一个ui-grid-a,并应用ui-block,两个按钮分别延伸到50%的屏幕宽度

<fieldset> <div><button type="submit" data-theme="c">Cancel</button></div> <div><button type="submit" data-theme="b">Submit</button></div> </fieldset>

2015123162902752.jpg (831×97)

请注意,这个框架增加网格中的左和右margin的按钮。为一个单一的按钮,您可以使用类ui-grid-solo和按钮类ui-block-a,像下面的例子一个div。这样的按钮将得到同样的margin

<div> <div><button type="button" data-theme="c">Previous</button></div> <div><button type="button" data-theme="c">Next</button></div> </div> <div> <div><button type="v" data-theme="b">More</button></div> </div>

2015123162921932.jpg (821×138)

主题类(没有数据主题属性)从主题系统可以被添加到一个元素,包括网格。在下面的块,我们增加了两个类:ui-bar添加默认的bar和ui-bar-e应用背景梯度和字体风格的“E”工具栏主题的样本。为了说明的目的,一个内联style=“height:120px”属性也被添加到每个网格设置每一个标准高度。

2015123162939675.jpg (816×148)

ui-block-b 三列布局

网格布局配置使用class= ui-grid-b在父母和3个子容器的元素,每个都有其各自的ui-block-a / a / c类,创建一行三列布局(33 / 33 / 33%)。注意:这些块同样风格的主题课程,网格布局清晰可见。

<div> <div>Block A</div> <div>Block B</div> <div>Block C</div> </div><!-- /grid-b -->

这为我们的内容,将产生一个33 / 33 / 33%网格布局

2015123162955517.jpg (827×293)

ui-block-c 四列布局

一行四列,25 / 25 / 25 / 25%网格,是通过在父容器指定class= ui-grid-c和添加四分之一块。注意:这些块同样风格的主题课程,网格布局清晰可见

2015123163016861.jpg (834×159)

ui-block-c 五列布局

一行五列,20 / 20 / 20 / 20 / 20%网格,是通过在父容器指定class= ui-grid-d

2015123163036328.jpg (831×161)

多行多列布局

网格设计包装的项目多行。例如,如果您指定了一个三行三列网格(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)。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzzzp.html