CN101499099B - 一种web页面布局的方法及系统 - Google Patents

Abstract

本发明涉及一种WEB页面布局的方法及系统。所述方法包括：获取页面布局命令，计算父容器绝对尺寸；遍历所述父容器中的元素，获取具有第一标识的元素绝对尺寸的和；获取所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和的差值；按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面。本发明使得具有第二标识的元素能够按要求尽量利用父容器的剩余空间，并且随着父容器尺寸的变化而变化，具有动态适应父容器尺寸变化的功能。

Description

一种WEB页面布局的方法及系统 

技术领域

本发明涉及页面显示技术，尤其是一种页面布局的方法及系统。 

背景技术

一个Web页面是由很多个HTML元素构成的，每个HTML元素展示在计算机屏幕上时，都具有一个实际的物理尺寸，默认以像素(px)为单位。 

在任何系统中，页面布局都是一项重要的技术，好的布局可以使系统的界面组织的更加合理，在Web系统中，通常使用面板方式来组织布局，所述面板可以是一个层(DIV)，也可以是一个表格(TABLE)等具有规则形状(通常为矩形)的元素，通过制这些元素的尺寸来调整页面的布局。并且，制定元素尺寸的方式包括绝对尺寸或者百分比尺寸。 

所谓绝对尺寸是指为元素的宽度或高度指定一个绝对的值。如图1所示，对于左边的标题部分，可以指定为“宽度＝80px”，右边的输入框部分可以指定为“宽度＝200px”。 

对于绝对尺寸而言，由于左边标题指定宽度为80px，右边输入框部分指定宽度为200px，因此，不论浏览器窗口如何改变大小，页面中元素始终是不动的，其变化结果如图2所示。 

所谓百分比尺寸是指为页面中元素指定相对于元素父容器的百分比尺寸。如图3所示，该示例中以整个页面作为父容器，将左边的标题部分宽度指定为30％，右边的输入框部分指定为70％，那么，随着窗口的变化，页面元素也将根据百分比的规则发生变化，其变化结果如图4所示。 

图5示出了一种典型应用中的页面，整个页面基本分为上中下三个元素，分别是：查询条件区、查询结果展示区、命令按钮区。由于“查询条件区”和“命令按钮区”，所包含的内容是固定的；对于“查询结果展示区域”，所包含的内容是动态的，是根据查询条件查询出来的结果集，取决于数据库中 的记录数。 

对于该页面而言，本领域技术人员期望，无论浏览器窗口如何变化，查询条件区和命令按钮区两部分的高度都固定(例如检索条件区高度为80px，命令按钮区高度为25px)，并且中间的查询结果展示区域尽量充满页面所显示的剩余空间。具体的，上述需求具体可理解为：查询条件区尺寸固定；查询结果展示区域的上边缘紧贴查询条件区的下边缘；查询结果展示区域的下边缘紧贴命令按钮区的上边缘；命令按钮区的下边缘紧贴页面底部且尺寸固定。 

发明人发现，对于上述需求，采用绝对尺寸的方式可以实现对查询条件区和命令按钮区的布局要求，即该两个区域的尺寸固定不变。 

然而，对于查询结果展示区域而言，如果采用绝对尺寸的方式进行布局，则无论窗口尺寸如何变化，查询结果展示区域的尺寸都不会发生变化，不能实现恰好填充所述剩余空间的目的；另一方面，如果采用百分比尺寸进行布局的方式将查询结果展示区域百分比设置为100％，则按照现有技术中浏览器解释百分比布局的原则，“查询结果展示区域”的高度，将会被翻译为整个页面的高度；进而，无论怎样调整窗口大小，“查询条件区尺寸与查询结果展示区域尺寸的和将超过浏览器窗口的尺寸，从而使得命令按钮区会被挤压到页面显示的窗口之外，并且整个页面都将会有一条滚动条。 

综上所述，采用现有的页面布局方法无法满足图5所示页面的需求。 

发明内容

本发明实施例目的在于提供一种WEB页面布局方法。 

本发明目的是通过以下实施例实现的。一种HTML语言形成的Web页面中矩形页面元素布局方法，包括：获取页面布局命令，计算父容器绝对尺寸；遍历所述父容器中的元素，获取具有第一标识的元素绝对尺寸的和；获取所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和的差值；按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面； 

所述获取具有第一标识的元素绝对尺寸包括： 

首先在HTML元素中增加自定义属性，采用一定的标识予以标记，将元素分为具有第一标识的元素和具有第二标识的元素； 

根据元素的自定义属性的标识，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的绝对值；或者， 

获取具有第一标识的元素的属性，获取所述属性中元素尺寸的百分比值，计算所述百分比与所述父容器的绝对尺寸的积，得到绝对值。 

本发明实施例另一目的在于提供一种HTML语言形成的WEB页面中矩形页面元素布局系统。 

为解决上述技术问题，本发明的目的是通过以下技术方案实现的。一种WEB页面布局系统包括：接收单元，用于获取页面布局命令；其中，查找单元，用于遍历父容器中的元素，获取具有第一标识的元素；获取具有第二标识的元素；第一计算单元，用于计算父容器绝对尺寸，获取具有第一标识的元素绝对尺寸的和；对所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和求差获得差值；所述第一计算单元获取具有第一标识的元素绝对尺寸具体为：首先在HTML元素中增加自定义属性，采用一定的标识予以标记，将元素分为具有第一标识的元素和具有第二标识的元素；根据元素的自定义属性的标识，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的绝对值；或者，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的百分比值，计算所述百分比与所述父容器的绝对尺寸的积，得到绝对值。第二计算单元，获取所述差值，按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；页面布局单元，用于根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面。 

以上技术方案可以看出，由于本发明实施例中对页面元素进行了分类，将具有固定尺寸以及根据浏览器大小进行变化的元素设置为一类，按照父容器尺寸以及所述第一类元素(具有第一标识的元素)的尺寸确定(求差)作为计算第二类元素(具有第二类标识的元素)尺寸大小的依据。使得第二类元素能够按要求尽量利用父容器的剩余空间，并且随着父容器尺寸的变化而变化，具有动态适应父容器尺寸变化的功能。 

进一步，当第二类元素尺寸设置为百分之百(相对于父容器与第一类元素绝对尺寸和的差值)时，相对于现有技术，本发明实施例可以实现图5所示的场景，即无论浏览器尺寸如何变化，查询结果展示区域都能够充满浏览器中除查询条件区和命令按钮区之外的空间，提高页面空间利用率，并同时实现了动态适应浏览器尺寸变化的功能。 

进一步，本发明实施例并不限制所述第二类元素的个数。然而，所述第二类元素集合中的元素的属性在于：第二类要求按照预置的比例填充所述父容器的剩余空间。 

进一步，本发明实施例可以实现页面的实时布局，即当浏览器尺寸改变的过程中，系统周期性的触发页面布局命令，使得例如用户拖动浏览器尺寸变化的过程中能够看到该变化过程中页面布局的变化过程；或者，页面布局也可在浏览器尺寸再次被确定后，由用户触发页面布局命令(如发起页面刷新)。 

附图说明

图1为绝对尺寸布局方式下第一布局场景示意图； 

图2为绝对尺寸布局方式下第二布局场景示意图； 

图3为百分比布局方式下第一布局场景示意图； 

图4为百分比布局方式下第二布局场景示意图； 

图5为本发明实施例所要实现的一布局场景示意图； 

图6为本发明实施例方法流程图； 

图7为本发明实施例系统结果示意图。 

具体实施方式

在HTML的页面中，提供表格、层等布局元素的形状都是矩形，对于通常在网页中看到的不规则形状，一般是图像，或者使用JavaScript在页面上绘制出来的，不属于本发明所述布局的范畴。 

本发明实施例目的在于提供一种页面布局的方法和系统。以实现对上述元素页面布局的目的，以下参照附图对本发明实现方式进行具体说明。 

本发明的页面布局方法在于，在页面布局命令的触发下开始执行页面布局的步骤，包括：计算父容器绝对尺寸；遍历所述父容器中的元素，获取具有第一标识的元素绝对尺寸的和；获取所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和的差值；按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面。 

可见，本发明实施例中对页面元素进行了分类，将具有固定尺寸以及根据浏览器大小进行变化的元素设置为一类，按照父容器尺寸以及所述第一类元素(具有第一标识的元素)的尺寸确定(求差)作为计算第二类元素(具有第二类标识的元素)尺寸大小的依据。使得第二类元素能够按要求尽量利用父容器的剩余空间，并且随着父容器尺寸的变化而变化，具有动态适应父容器尺寸变化的功能。 

以下结合附图5所示的布局场景示意图，说明本发明方法实施例的实现方式。图5所示布局场景的页面分为上中下三个元素，分别是：查询条件区、查询结果展示区、命令按钮区；要求无论浏览器尺寸如何变化，所述查询条件区和命钮按钮区尺寸不变，而查询结果展示区填充满页面中剩余的区域。 

参见图5所示的场景示意图，所述浏览器即为上文所述父容器。进而，为实现图5所示的场景，将页面中所述三个元素进行分类，将元素查询条件区和命令按钮区作为第一类元素，在HTML中增加自定义属性并采用一定的标识予以标记；将查询结果展示区作为第二类元素，在HTML中增加自定义属性并采用一定的标识予以标记；由于要求查询结果展示区填充满页面中剩余的区域，因此第二类元素(即查询结果展示区)属性中设置尺寸百分比参数为100％。 

以下实施例仅以改变浏览器高度为例说明本发明的实现方式，其中定义检索条件区高度为80象素，命令按钮区高度为25象素。本实施例流程图参见图6。 

步骤61：计算布局浏览器的客户端高度(clientHeight)或客户端宽度(clientWidth)；浏览器所浏览的Web页面是由多个HTML元素构成的，每个 HTML元素展示在计算机屏幕上时，都具有一个实际的物理尺寸，clientHeight与clientWidth所指的就是这个实际的物理尺寸，默认以像素为单位。大多数的浏览器提供了计算这个物理尺寸的方法；本步骤中要最终获取浏览器客户端高度的绝对尺寸。具体的，浏览器能够解释javascript脚本，javascript的执行过程由浏览器负责完成。浏览器会对脚本的含义做出处理，如：在javascript中，通过window.screen.with属性即可得到当前浏览器窗口的客户端宽度值。 

步骤62：计算浏览器内所有第一类元素的clientHeight或clientWidth并累加。 

本发明实施例通过在HTML元素中增加自定义属性的方式实现元素分类的标识，所有的HTML标签除了可以定义标准属性外，都可以增加自定义的属性，只需要将自定义属性写在元素标签内即可。例如： 

＜div id＝”layout”width＝”80px”custom＝”my-attribute”/＞ 

其中：id、width是div标签的标准属性，custom是自定义的一个属性，值为“my-attribute”。 

所有的HTML标签的属性(包括自定义的属性)，都可以通过JavaScript脚本获取到元素的对象，然后调用其getAttribute(‘属性名’)的方法来获得，例如，上面例子中的custom属性的值，可以通过document.getElementById(‘layout’).getAttribute(‘custom’)方式获得。 

因此，按照上述方式遍历父容器中的元素，按照自定义的属性可查找到标识为第一类的元素，具体到图5所示的实施例为查询条件区和命令按钮区。 

进而，获取所述第一类元素的绝对尺寸。 

一个HTML页面是由很多个元素构成的，如＜HTML＞、＜BODY＞、＜TABLE＞、＜DIV＞等，使用JavaScript脚本(JavaScript脚本由浏览器负责解释和执行)可以与这些元素进行交互，例如：一个＜DIV id＝”mydiv”＞的元素，可以使用mydiv这个id对其引用即可获取这个元素的运行期状态，具体的使用mydiv.clientHeight可以获得这个元素的运行时高度。 

对于第一类元素而言，元素尺寸包括绝对尺寸或者百分比尺寸两种形式。 

对于绝对尺寸而言通过上述方法获取该元素的运行时高度的绝对尺寸；对于百分比尺寸而言，可以通过上述方法获取该元素运行时高度的百分比尺寸，进而将该尺寸与浏览器绝对尺寸求积得到绝对尺寸。 

对所获取的第一类元素的绝对尺寸进行求和。 

步骤63：浏览器的客户端高度尺寸减去浏览器内所述第一类元素的客户端高度尺寸的和，得到高度差值； 

步骤64：按照第二标识的元素百分比参数计算所述第二类元素的绝对尺寸； 

具体到图5所示的场经过，由于要求查询结果展示区充满剩余空间，即所述百分比尺寸为100％，因此设置第二类元素的高度绝对尺寸为步骤63中计算得到的所述差值。 

步骤65：根据具有第一类元素的绝对尺寸以及第二类元素的绝对尺寸布局页面。 

JavaScript脚本提供了对页面元素进行动态操作的能力，使用JavaScript脚本，可以对页面上的元素进行交互，可以修改元素的尺寸属性来达到改变其大小的目的。例如：想改变页面上id为container的元素的高度，首先使用JavaScript脚本根据id获取到元素的对象，然后再对其高度进行赋值，最终达到了改变其高度的效果。 

综上所述，本发明实施例首先根据当时页面的情况，计算各区域的高度绝对尺寸数值，其中对于第二类元素而言，获得页面高度绝对尺寸与第一类元素高度绝对尺寸和的差值作为第二类元素高度绝对尺寸；然后调用JavaScript脚本，将计算好的绝对尺寸数值赋给各个区域的元素。 

可以看出，按照本发明实施例的方法能够实现了图5所示场景的要求，具体的：查询条件区尺寸固定，方便用户随时输入查询条件；查询结果展示区域的上边缘紧贴查询条件区的下边缘；查询结果展示区域的下边缘紧贴命令按钮区的上边缘；命令按钮区的下边缘紧贴页面底部。进而，当窗口改变尺寸时，查询结果展示区域将页面中除查询条件区以及命令按钮区之外的区域进行充分填充，从而在不影响查询条件区及命令按钮区的前提下，最大限 度的提高了页面显示效率。 

在上述实施例基础上，本发明并不限制所述第二类元素的个数。然而，所述第二类元素集合中的元素的属性在于：第二类要求按照预置的比例填充所述父容器的剩余空间。所述多个第二类元素的情况，按照各第二类元素所占父容器中第一类元素之外剩余空间的百分比参数分别计算得到绝对尺寸。 

进一步，本发明实施例可以实现页面的实时布局，即当浏览器尺寸改变的过程中，系统周期性的触发页面布局命令使得页面重新布局。例如用户拖动浏览器边框导致浏览器尺寸变化的过程中，能够看到该过程中各个周期页面布局的状况，即体现出页面布局渐变的过程，并且如果周期值设置的越小，则所述渐变过程展现的越流畅。或者，页面布局也可在浏览器尺寸再次被确定后，由用户触发页面布局命令(如用户点击页面刷新功能键等)。 

在实现页面实时布局中，通过事件通知机制实现浏览器的尺寸变化的监控，具体的：存在很多类型的事件，用户如果关注某个事件，可以在代码中订阅这些感兴趣的事件，并为这个事件指定一个处理函数，当事件发生时，浏览器会通知订阅者发生了此事件，并调用相应的处理函数。 

如上文所述，浏览器支持javascript脚本，本实施例中在页面载入的javascript脚本中，订阅“窗口尺寸发生变化”的这个事件，事件名称为：onresize，并为其指定事件处理函数，将本发明所描述的调整尺寸的逻辑写在这个事件处理函数中，当窗口大小发生了变化时，浏览器会去通知这个事件处理函数，也就是执行这个函数中的逻辑。 

本发明实施例还提供一种页面布局的系统，如图7所示，包括，接收单元71、查找单元72、第一计算单元73、第二计算单元74、页面布局单元75，其中： 

接收单元71，用于获取页面布局命令； 

查找单元72，用于遍历父容器中的元素，获取具有第一标识的元素，并触发第一计算单元；获取具有第二标识的元素，通知第二计算单元； 

第一计算单元73，用于计算父容器绝对尺寸，获取具有第一标识的元素绝对尺寸的和；对所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸 的和求差获得差值； 

第二计算单元74，获取所述差值，按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸； 

页面布局单元75，用于根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面。 

上述系统基础上，所述第一计算单元获取具有第一标识的元素绝对尺寸具体为：获取具有第一标识的元素的属性，获取所述属性中元素尺寸的绝对值；或者，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的百分比值，计算所述百分比与所述父容器的积，得到绝对值。 

上述系统基础上，所述具有第二标识的元素为至少2个；并且，所述第二计算单元，分别按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸。 

上述系统中，所述接收单元检测并获取到周期性发送的页面布局命令，或者按照用户指令触发的页面布局命令。 

以上对本发明实施例进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的实现方式；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。 

Claims (8)

1.一种HTML语言形成的Web页面中矩形页面元素布局的方法，其特征在于，包括：

获取页面布局命令，计算父容器绝对尺寸；遍历所述父容器中的元素，获取具有第一标识的元素绝对尺寸的和；

获取所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和的差值；

按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；

根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面；

所述获取具有第一标识的元素绝对尺寸包括：

首先在HTML元素中增加自定义属性，采用一定的标识予以标记，将元素分为具有第一标识的元素和具有第二标识的元素；

根据元素的自定义属性的标识，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的绝对值；或者，

获取具有第一标识的元素的属性，获取所述属性中元素尺寸的百分比值，计算所述百分比与所述父容器的绝对尺寸的积，得到绝对值。

2.如权利要求1所述的方法，其特征在于：

所述具有第二标识的元素占所述差值的百分比为百分之百。

3.如权利要求1所述的方法，其特征在于：

所述具有第二标识的元素为至少2个，以及分别按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸。

4.如权利要求1至3其中之一所述的方法，其特征在于：

检测并获取到周期性发送的页面布局命令，或者用户触发页面布局命令的发送。

5.一种HTML语言形成的WEB页面中矩形页面元素布局的系统，其特征在于，包括：

接收单元，用于获取页面布局命令；

查找单元，用于遍历父容器中的元素，获取具有第一标识的元素；获取具有第二标识的元素；

第一计算单元，用于计算父容器绝对尺寸，获取具有第一标识的元素绝对尺寸的和；对所述父容器绝对尺寸与所述具有第一标识的元素绝对尺寸的和求差获得差值；所述第一计算单元获取具有第一标识的元素绝对尺寸具体为：首先在HTML元素中增加自定义属性，采用一定的标识予以标记，将元素分为具有第一标识的元素和具有第二标识的元素；根据元素的自定义属性的标识，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的绝对值；或者，获取具有第一标识的元素的属性，获取所述属性中元素尺寸的百分比值，计算所述百分比与所述父容器的绝对尺寸的积，得到绝对值；

第二计算单元，获取所述差值，按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸；

页面布局单元，用于根据具有第一标识的元素的绝对尺寸以及具有第二标识的元素的绝对尺寸布局页面。

6.如权利要求5所述的系统，其特征在于：

所述具有第二标识的元素占所述差值的百分比为百分之百。

7.如权利要求5所述的系统，其特征在于，所述具有第二标识的元素为至少2个；

以及，所述第二计算单元，分别按照具有第二标识的元素占所述差值的百分比计算得到所述的具有第二标识的元素的绝对尺寸。

8.如权利要求5所述的系统，其特征在于：

所述接收单元，检测并获取到周期性发送的页面布局命令，或者按照用户指令触发的页面布局命令。

Images