CN103279345B - 一种对页面元素进行锁定的方法及装置 - Google Patents

Abstract

本发明提供一种对页面元素进行锁定的方法及装置，属于网络通信领域。所述方法包括：获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的第一偏移值；在指定节点下生成高度为0的遮盖层容器；获取所述遮盖层容器相对于页面左上角的第二偏移值；在所述遮盖层容器下生成透明的遮盖层，所述遮盖层采用层叠样式表的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为所述第一偏移值与所述第二偏移值之差，其z‑index值大于所述页面元素的z‑index值。本发明以简单的方式实现了对页面中的任意页面元素的锁定。

Description

一种对页面元素进行锁定的方法及装置

技术领域

本发明涉及网络通信领域，特别涉及一种对页面元素进行锁定的方法及装置。

背景技术

在进行网页(web)用户界面(user interface，ui)开发的时候，经常会遇到需要禁止用户点击某些界面元素(页面元素)，即对页面元素进行锁定的需求。在标准的超文本标记语言(Hyper Text Markup Language，HTML)中，只有表单(form)元素标签可以使用禁用(disabled)属性，例如，对于表单中的输入框(input)和选择框(select)等控件，开发人员可以直接通过设置disabled属性将其禁用。

由于ui控件和产品需求的多样性，很多时候需要禁用网页中的一些链接或者其它ui控件。但对于普通的链接，需要根据事件绑定的方式，来单独为每一个需要禁用的链接元素编写禁用代码；而对于自行开发或者第三方开发的ui控件，则需要修改源代码，才能添加“禁止用户点击”的功能。

可见，现有技术对网页中的页面元素进行锁定的实现方式比较复杂，需要进一步改进和完善。

发明内容

有鉴于此，本发明的目的是提供一种对页面元素进行锁定的方法及装置，能够以简单的方式实现对页面中的任意页面元素的锁定。

为实现上述目的，本发明提供技术方案如下：

一种对页面元素进行锁定的方法，包括：

获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的第一偏移值；

在指定节点下生成高度为0的遮盖层容器；

获取所述遮盖层容器相对于页面左上角的第二偏移值；

在所述遮盖层容器下生成透明的遮盖层，所述遮盖层采用层叠样式表的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为所述第一偏移值与所述第二偏移值之差，其z-index值大于所述页面元素的z-index值。

上述的方法，其中，还包括：将所述页面元素设置为半透明。

上述的方法，其中：所述指定节点为所述页面元素的父元素。

上述的方法，其中，还包括：当所述指定节点为body节点时，将所述遮盖层容器的宽度设置为页面实际内容的宽度，将所述遮盖层容器的对齐方式设置为与页面实际内容的对齐方式相同。

上述的方法，其中：当所述页面元素为子界面元素时，所述指定节点为所述子界面元素的直接父元素。

一种对页面元素进行锁定的装置，包括：

第一获取单元，用于获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的第一偏移值；

遮盖层容器生成单元，用于在指定节点下生成高度为0的遮盖层容器；

第二获取单元，用于获取所述遮盖层容器相对于页面左上角的第二偏移值；

遮盖层生成单元，用于在所述遮盖层容器下生成透明的遮盖层，所述遮盖层采用层叠样式表的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为所述第一偏移值与所述第二偏移值之差，其z-index值大于所述页面元素的z-index值。

上述的装置，其中，还包括：设置单元，用于将所述页面元素设置为半透明。

上述的装置，其中：所述指定节点为所述页面元素的父元素。

上述的装置，其中，所述遮盖层容器生成单元进一步用于：当所述指定节点为body节点时，将所述遮盖层容器的宽度设置为页面实际内容的宽度，将所述遮盖层容器的对齐方式设置为与页面实际内容的对齐方式相同。

上述的装置，其中：当所述页面元素为子界面元素时，所述指定节点为所述子界面元素的直接父元素。。

与现有技术需要为每个禁用的页面元素分别编写禁用代码相比，本发明为所有的html标签提供了一个锁定(lock)方法，在该lock方法中，通过创建一个遮盖层元素，将目标页面元素遮挡，从而产生“被禁用”的效果，如此，以简单的方式实现了对页面中的任意页面元素的锁定。

附图说明

图1是根据本发明实施例的对页面元素进行锁定的方法流程图；

图2是根据本发明实施例的对页面元素进行锁定的装置结构图；

图3是本发明实施例中对页面元素进行锁定前的页面示意图；

图4是本发明实施例中对页面元素进行锁定后的页面示意图。

具体实施方式

以下结合附图对本发明进行详细描述。

本发明为所有的html标签提供了一个锁定(lock)方法，调用此方法之后，可以实现“锁定”(禁止用户点击)任意页面元素的功能，达到防止用户点击的作用。另外，还可以提供对应的unlock方法用于解锁被锁定的页面元素。

基本原理如下：通过创建一个遮盖层元素，将目标元素遮挡，从而产生“被禁用”的效果；再通过一些技术手段，当目标元素发生位置变化，或者被隐藏的时候，同步调整遮盖层元素的位置或者可见性，使其不影响其余的页面元素和功能。

具体为：调用lock方法之后，先计算待锁定的目标元素的宽高以及目标元素相对于页面左上角的偏移值(offset)；再创建一个透明的遮盖层元素，将此遮盖元素的宽高设为目标元素的宽高，并使用层叠样式表(CascadingStyle Sheets，CSS)的绝对定位属性和计算出来的目标元素offset，计算遮盖元素的offset，使得此遮盖元素与目标元素重合；再为遮盖层元素设置一个很大的z-index值，使遮盖元素位于目标元素的上方。

这样，用户点击目标元素时，实际上点击的是遮盖元素，就达到了“锁定点击”的目的。另外，还可以将目标元素设置为半透明，使其带有“被禁用”的视觉效果，例如，可以将目标元素的不透明度设置为50％～95％。

由于页面宽度会根据实际情况变化，目标元素的offset值也会随时发生变化，所以本发明还使用了一些技术手段，来保证遮盖元素可以适应目标元素的位置变化；

另外，当目标元素被隐藏之后，也需要将遮盖层元素同步调整为隐藏，以避免影响页面功能(如果不调整，则其仍然存在，会遮挡其他未被禁用的界面元素)。

图1是根据本发明实施例的对页面元素进行锁定的方法流程图。参照图1，所述方法可以包括如下步骤：

步骤101，当需要对某个页面元素进行锁定时，调用lock方法；

在本发明实施例中，为所有的页面元素创建了一个lock方法，每个页面元素都可以调用该lock方法，页面元素在调用该lock方法时，可以根据需要指定相应的参数，调用lock方法后，会执行从步骤102开始的流程。

步骤102，获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的偏移值offset1；

步骤103，在指定节点下生成高度为0的遮盖层容器；

所述指定节点为所述页面元素的父元素(包括body元素)，并根据此遮盖层容器生成的位置设置其宽度和对齐方式。

默认情况下，使用body节点作为“指定节点”，此情况下，需要所述遮盖层容器的宽度设置为页面实际内容的宽度，将所述遮盖层容器的对齐方式设置为与页面实际内容的对齐方式相同。例如，若页面内容采用“居中”的方式显示，则需要将此遮盖层容器也设置为“居中”(包括但不仅限于使用层叠样式表的“自动外边距(margin：auto)”属性，或者使用“文字居中对齐(text-align：center)”)。又例如，若页面内容采用“左对齐”的方式显示，则需要将此遮盖层容器也是设置为“左对齐”。

在使用参数指定此“指定节点”的情况下，则此遮盖层容器的宽度和对齐方式不需要设置(浏览器会将其宽度设置为其直接父元素的宽度)，或者根据需要，设置为所需值。

另外，当所述目标元素为子界面元素时，所述指定节点优选为所述子界面元素的直接父元素。

步骤104，获取所述遮盖层容器相对于页面左上角的偏移值offset2；

步骤105，在所述遮盖层容器下生成透明的遮盖层；

其中，所述遮盖层采用CSS的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为offset1与offset2之差，其z-index值大于所述页面元素的z-index值，例如，可以取一个很大的值999999，这样，能够保证遮盖层元素位于所述待锁定的目标元素之上。

步骤106，将所述目标元素设置为半透明。

其中，步骤106为可选步骤，可以根据需要进行取舍，目的是为了使得目标元素在视觉上具有被禁用的效果。

由于页面的宽度会随着浏览器窗口而变化，本发明实施例的上述方法包含了使得遮盖层可以自动适应页面宽度变化的处理。假定所有的页面内容都会居中显示，宽度为960px(固定宽度和自动居中这是网页制作的惯例)：

1、在页面顶部(body)创建一个“遮盖层容器”，将其宽度设置为960像素，高度为0，以避免对页面内容产生影响，然后将其设置为居中对齐；

2、所有的遮盖层都会被创建到此“遮盖层容器”下，由于页面内容和“遮盖层容器”都是自动居中的，在页面宽度变化的时候，遮盖层和被锁定的元素没有相对位移。

以上两点可保证遮盖层在绝大多数情况下恰好盖住被锁定的元素。

另外，一些页面包含类似选项卡的可切换界面。对于这种可切换的界面，本发明实施例的上述方法包含了使得遮盖层仅遮盖某个子界面元素的处理方法，使得此子界面隐藏时，其下被锁定的元素对应的遮盖层随之隐藏，不对页面其它元素造成影响：

在调用锁定方法时，通过指定“parent”参数，在被锁定元素的直接父元素下单独创建“遮盖层容器”，如此就可以保证遮盖层位于对应的子界面内，当子界面被隐藏的时候，遮盖层也随之被隐藏。

进一步，为了避免创建过多的“遮盖层容器”而影响页面性能，还可以通过参数指定一个容器(即多个元素的共同父元素)，在此容器下创建“遮盖层容器”供多个锁定元素使用。

图3是本发明实施例中对页面元素进行锁定前的页面示意图，图4是本发明实施例中对页面元素进行锁定后的页面示意图。从图3和图4中可以看出(图中遮罩层即是遮盖层)，本发明实施例通过创建一个遮盖层元素，将目标元素遮挡，就可以产生“被禁用”的效果。

对应于上述方法，本发明实施例还提供一种对页面元素进行锁定的装置。参照图2，所述装置包括第一获取单元10、遮盖层容器生成单元20、第二获取单元30和遮盖层生成单元40，其中：

第一获取单元10，用于获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的第一偏移值。

遮盖层容器生成单元20，用于在指定节点下生成高度为0的遮盖层容器。其中，所述指定节点为所述页面元素的父元素(包括body元素)。当所述指定节点为body节点时，将所述遮盖层容器的宽度设置为页面实际内容的宽度，将所述遮盖层容器的对齐方式设置为与页面实际内容的对齐方式相同。另外，当所述页面元素为子界面元素时，所述指定节点还可以为所述子界面元素的直接父元素。

第二获取单元30，用于获取所述遮盖层容器相对于页面左上角的第二偏移值。

遮盖层生成单元40，用于在所述遮盖层容器下生成透明的遮盖层，所述遮盖层采用层叠样式表的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为所述第一偏移值与所述第二偏移值之差，其z-index值大于所述页面元素的z-index值。

为了使得目标元素在视觉上具有被禁用的效果，所述装置还可以包括一个设置单元(图中未示出)，用于将所述页面元素设置为半透明。

综上所述，本发明实施例为所有的html标签提供了一个lock方法，在该lock方法中，通过创建一个遮盖层元素，将目标页面元素遮挡，从而产生“被禁用”的效果，如此，以简单的方式实现了对页面中的任意页面元素的锁定。

需要说明的是，在附图的流程图示出的步骤可以在诸如设置有一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。另外，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (8)

1.一种对页面元素进行锁定的方法，其特征在于，包括：

获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的第一偏移值；

在指定节点下生成高度为0的遮盖层容器，其中，所述指定节点为所述页面元素的父元素；

获取所述遮盖层容器相对于页面左上角的第二偏移值；

在所述遮盖层容器下生成透明的遮盖层，所述遮盖层采用层叠样式表的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为所述第一偏移值与所述第二偏移值之差，其z-index值大于所述页面元素的z-index值。

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

将所述页面元素设置为半透明。

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

当所述指定节点为body节点时，将所述遮盖层容器的宽度设置为页面实际内容的宽度，将所述遮盖层容器的对齐方式设置为与页面实际内容的对齐方式相同。

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

当所述页面元素为子界面元素时，所述指定节点为所述子界面元素的直接父元素。

5.一种对页面元素进行锁定的装置，其特征在于，包括：

第一获取单元，用于获取待锁定的页面元素的宽度、高度和所述页面元素相对于页面左上角的第一偏移值；

遮盖层容器生成单元，用于在指定节点下生成高度为0的遮盖层容器，其中，所述指定节点为所述页面元素的父元素；

第二获取单元，用于获取所述遮盖层容器相对于页面左上角的第二偏移值；

遮盖层生成单元，用于在所述遮盖层容器下生成透明的遮盖层，所述遮盖层采用层叠样式表的绝对定位属性，其宽度、高度为所述页面元素的宽度、高度，其相对于遮盖层容器左上角的偏移值为所述第一偏移值与所述第二偏移值之差，其z-index值大于所述页面元素的z-index值。

6.如权利要求5所述的装置，其特征在于，还包括：

设置单元，用于将所述页面元素设置为半透明。

7.如权利要求5所述的装置，其特征在于，所述遮盖层容器生成单元进一步用于：

当所述指定节点为body节点时，将所述遮盖层容器的宽度设置为页面实际内容的宽度，将所述遮盖层容器的对齐方式设置为与页面实际内容的对齐方式相同。

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

当所述页面元素为子界面元素时，所述指定节点为所述子界面元素的直接父元素。