CN103064683A

CN103064683A - Web环境下多标签页的自定义布局方法及装置

Info

Publication number: CN103064683A
Application number: CN2012105795504A
Authority: CN
Inventors: 靳谊; 陈敏; 林利炜; 陈明远; 万孝雄; 陈威
Original assignee: FUJIAN RONGJI SOFTWARE Co Ltd
Current assignee: FUJIAN RONGJI SOFTWARE Co Ltd
Priority date: 2013-02-19
Filing date: 2013-02-19
Publication date: 2013-04-24

Abstract

本发明公开一种WEB环境下多标签页的自定义布局方法，包括：S1、定义初始组合界面面板的属性；S2、显示第一标签页内容界面；S3、选择第二标签页并对其进行拖拽操作，判断被拖拽到第一标签页内容界面还是标签栏；S4、当被拖拽到第一标签页内容界面时，计算第一标签页内容界面高度和宽度，删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述；S5、当被拖拽到第一标签页标签栏时，删除初始组合界面面板中第二标签页的属性描述以及初始组合界面面板中增加第二标签页属性描述；S6、根据组合界面面板的属性描述在前端进行实时展示。本发明还公开一种WEB环境下多标签页的自定义布局装置。

Description

WEB环境下多标签页的自定义布局方法及装置

技术领域

本发明涉及计算机领域，尤其涉及一种WEB环境下多标签页的自定义布局方法及装置。

背景技术

在WEB环境下，应用JS脚本实现标签页（TAB）切换技术已经被广泛采用。该技术可以在一个页面中显示多标签页（TAB），通过点击不同标签，展示该标签下的内容，如文字、图片或页面风格等。

上述技术的缺点在于：缺点1、可读性差无法实现单页面多标签内容展示：一个页面仅能显示一个标签页的详细信息，通过点击其他标签页进行页面切换，不能在一个页面中直观展示两个标签页详细信息。缺点2、无法实现对标签页面自定义布局：一个标签页的内容通常是固定的，无法通过拖拽来实现对页面进行自定义布局，比如将页面划分成多个窗口或合并窗口。

发明内容

为解决上述问题，本发明采用的一个技术方案是：

提供一种WEB环境下多标签页的自定义布局方法，包括：S1、在XML文件中定义初始组合界面面板的属性，属性包括各个标签页高度、宽度、属性、内容；S2、获取初始组合界面面板的第一标签页选择信号，显示第一标签页内容界面；S3、选择第二标签页并对其进行拖拽操作，判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏；S4、当第二标签页被拖拽到第一标签页内容界面时，通过计算第一标签页内容界面高度和宽度，在XML文件中删除第二标签页的属性描述以及增加新的初始组合界面面板的属性描述；S5、当第二标签页被拖拽到第一标签页标签栏时，在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述；S6、根据XML文件的初始组合界面面板的属性在前端进行实时展示。

本发明采用的另一个技术方案是：

提供一种WEB环境下多标签页的自定义布局装置，包括：初始组合界面面板属性定义单元，用于在XML文件中定义初始组合界面面板的属性，属性包括各个标签页高度、宽度、属性、内容；第一标签页内容界面获取单元，用于获取初始组合界面面板的第一标签页选择信号，显示第一标签页内容界面；第二标签页拖拽单元，用于选择第二标签页并对其进行拖拽操作，判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏；界面拆分单元，用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页内容界面时，通过计算第一标签页内容界面高度和宽度，在XML文件中删除第二标签页的属性描述以及增加新的初始组合界面面板的属性描述；窗口合并单元，用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页标签栏时，在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述；界面展示单元，用于根据XML文件的初始组合界面面板的属性在前端进行实时展示。

本发明的有益效果在于，本发明的WEB环境下多标签页的自定义布局方法及装置，在WEB界面中页面布局可通过标签页的拖拽实现动态、灵活调整布局，便于使用和对比。进一步地，实现在一个窗口多个标签页的灵活展示，当标签页拖动的边缘或标签页群中可以将界面划分成多个窗口或合并窗口，提高可读性，减少了反复查看、查询的工作量。

附图说明

图1是本发明一实施方式中一种WEB环境下多标签页的自定义布局装置的结构框图；

图2是将标签页grid拖拽到标签页form左侧内容界面的示意图；

图3是将标签页grid拖拽到标签页form右侧内容界面的示意图；

图4是将标签页grid拖拽到标签页form上侧内容界面的示意图；

图5是将标签页grid拖拽到标签页form下侧内容界面的示意图；

图6是将标签页grid拖拽到标签页form标签栏上的示意图；

图7是本发明一实施方式中一种WEB环境下多标签页的自定义布局方法的流程图。

具体实施方式

为详细说明本发明的技术内容、构造特征、所实现目的及效果，以下结合实施方式并配合附图详予说明。请参阅图1，是本发明一实施方式中一种WEB环境下多标签页的自定义布局装置的结构框图。一种WEB环境下多标签页的自定义布局装置包括初始组合界面面板属性定义单元、第一标签页内容界面获取单元、第二标签页拖拽单元、界面拆分单元、窗口合并单元。

初始组合界面面板属性定义单元用于在XML文件中定义初始组合界面面板的属性，属性包括各个标签页高度、宽度、属性、内容。第一标签页内容界面获取单元，用于获取初始组合界面面板的第一标签页选择信号，显示第一标签页内容界面。第二标签页拖拽单元，用于选择第二标签页并对其进行拖拽操作，判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏。界面拆分单元，用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页内容界面时，通过计算第一标签页内容界面高度和宽度，在XML文件中删除第二标签页的属性描述以及增加新组合界面面板的属性描述。窗口合并单元，用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页标签栏时，在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述。界面展示单元，用于根据XML文件的组合界面面板的属性描述在前端进行实时展示。

所述界面拆分单元包括位置判断模块，用于判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面；所述界面拆分单元还包括上界面拆分模块、下界面拆分模块、左界面拆分模块、右界面拆分模块。上界面拆分模块用于当判断第二标签页被拖拽到第一标签页内容界面的上界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半；同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述，其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半，宽度为第一标签页内容界面的宽度。下界面拆分模块用于当判断第二标签页被拖拽到第一标签页内容界面的下界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半；同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述，其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半，宽度为第一标签页内容界面的宽度。左界面拆分模块，用于当判断第二标签页被拖拽到第一标签页内容界面的左界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半；同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述，其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半，高度为第一标签页内容界面的高度。右界面拆分模块用于当判断第二标签页被拖拽到第一标签页内容界面的右界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半；同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述，其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半，高度为第一标签页内容界面的高度。

请参阅图2，是将标签页grid拖拽到标签页form左侧内容界面的示意图。第一步：选择标签页grid将其拖拽到标签页form左侧，平均分割页面为标签页grid和标签页form。具体实现步骤如下：1）计算当前窗口标签页form大小（高度和宽度f2）。2）在XML文件中修改标签页form的宽度为(f2/2)，并删除标签页grid的描述内容。3）同时在XML文件中增加新组合界面面板的属性描述（即新增标签页grid），包括高度、宽度、属性、内容等，其中标签页grid高度不变，宽度为标签页form的一半，即高度为（f1）和宽度(f2/2)。第二步：根据XML文件内容，在原标签页面上显示标签页grid和标签页form，其中标签页grid在左侧，标签页form在右侧。

请参阅图3，是将标签页grid拖拽到标签页form右侧内容界面的示意图。第一步：选择标签页grid将其拖拽到标签页form右侧，将平均分割页面为标签页grid和标签页form。1）计算当前窗口标签页form大小（高度f1和宽度f2）。2）在XML文件中修改标签页form的宽度为(f2/2)，并删除标签页grid的描述内容。3）同时在XML文件中增加新组合界面面板的属性定义（即新增标签页grid），包括高度、宽度、属性、内容等，其中标签页grid高度不变，宽度为标签页form的一半，即高度为（f1）和宽度(f2/2)。第二步：根据XML文件内容，在原标签页面上显示标签页grid和标签页form，其中标签页grid在左侧，标签页form在右侧。

请参阅图4，是将标签页grid拖拽到标签页form上侧内容界面的示意图。第一步：选择标签页grid将其拖拽到标签页form上侧，将平均分割页面为标签页grid和标签页form。具体实现步骤如下：1）计算当前窗口标签页form大小（高度f1和宽度f2）。2）在XML文件中修改标签页form的高度为(f1/2)，并删除标签页grid的描述内容。3）同时在XML文件中增加新组合界面面板的属性描述（即新增标签页grid），包括高度、宽度、属性、内容等，其中标签页grid高度不变，高度为标签页form的一半，即高度为（f1/2）和宽度(f2)。第二步：根据XML文件内容，在原标签页面上显示标签页form和标签页grid，其中标签页form在下侧，标签页grid在上侧。

请参阅图5，是将标签页grid拖拽到标签页form下侧内容界面的示意图。第一步：选择标签页grid将其拖拽到标签页form右侧，将平均分割页面为标签页grid和标签页form。1）计算当前窗口标签页form大小（高度f1和宽度f2）。2）在XML文件中修改标签页form的高度为(f1/2)，并删除标签页grid的描述内容。3）同时在XML文件中增加新组合界面面板的属性定义（即新增标签页grid），包括高度、宽度、属性、内容等，其中标签页grid高度不变，高度为标签页form的一半，即高度为（f1/2）和宽度(f2)。第二步：根据XML文件内容，在原标签页面上显示标签页form和标签页grid，其中标签页form在上侧，标签页grid在下侧。

请参阅图6，是将标签页grid拖拽到标签页form标签栏上的示意图。第一步：准备一个面板中存在多个标签页（标签form和标签grid）。第二步：选择标签页grid将其拖拽到标签页form的标签栏上，将标签页grid和标签页form进行窗口合并。具体实现步骤如下：1）计算当前标签页form面板的行列大小（高度fcols、宽度frows）、计算当前窗口标签页grid面板行列大小（高度gcols、宽度grows）。2）在XML文件中修改标签页form的高度为(fcols+gcols)，宽度为（frows+grows），并删除标签页grid的描述内容。3）同时在XML文件中form的组合界面面板上新增标签页grid描述，包括高度、宽度、属性、内容等。第三步：根据XML文件内容，在原标签页面上显示标签页form和标签页grid，其中标签页grid作为标签列表显示在标签页form页面上。

请参阅图7，是本发明一实施方式中一种WEB环境下多标签页的自定义布局方法的流程图。一种WEB环境下多标签页的自定义布局方法包括：

步骤S1、在XML文件中定义初始组合界面面板的属性，属性包括各个标签页高度、宽度、属性、内容；

步骤S2、获取初始组合界面面板的第一标签页选择信号，显示第一标签页内容界面；

步骤S3、选择第二标签页并对其进行拖拽操作，判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏；

步骤S4、当第二标签页被拖拽到第一标签页内容界面时，计算第一标签页内容界面高度和宽度，在XML文件中删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述；

步骤S5、当第二标签页被拖拽到第一标签页标签栏时，在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述；

步骤S6、根据XML文件的组合界面面板的属性在前端进行实时展示。

其中，所述步骤S4具体包括步骤：S41、判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面；

所述步骤S4中“修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述”具体包括：

S42、当判断第二标签页被拖拽到第一标签页内容界面的上界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半；同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述，其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半，宽度为第一标签页内容界面的宽度；

S43、当判断第二标签页被拖拽到第一标签页内容界面的下界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半；同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述，其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半，宽度为第一标签页内容界面的宽度；

S44、当判断第二标签页被拖拽到第一标签页内容界面的左界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半；同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述，其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半，高度为第一标签页内容界面的高度；

S42、当判断第二标签页被拖拽到第一标签页内容界面的右界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半；同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述，其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半，高度为第一标签页内容界面的高度。

本发明的有益效果在于，本发明的WEB环境下多标签页的自定义布局方法及装置，在WEB界面中页面布局可通过标签页的拖拽实现动态、灵活调整布局，便于使用和对比。进一步地，实现在一个窗口多个标签页的灵活展示，当标签页拖动到边缘或标签页群中可以将界面划分成多个窗口或合并窗口，提高可读性，减少了反复查看、查询的工作量。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种WEB环境下多标签页的自定义布局方法，其特征在于，包括：

S1、在XML文件中定义初始组合界面面板的属性，属性包括各个标签页高度、宽度、属性、内容；

S2、获取初始组合界面面板的第一标签页选择信号，显示第一标签页内容界面；

S3、选择第二标签页并对其进行拖拽操作，判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏；

S4、当第二标签页被拖拽到第一标签页内容界面时，计算第一标签页内容界面高度和宽度，在XML文件中删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述；

S5、当第二标签页被拖拽到第一标签页标签栏时，在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述；

S6、根据XML文件的组合界面面板的属性在前端进行实时展示。

2.根据权利要求1所述一种WEB环境下多标签页的自定义布局方法，其特征在于，所述步骤S4具体包括步骤：S41、判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面；所述步骤S4中“修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述；”具体包括：

3.一种WEB环境下多标签页的自定义布局装置，其特征在于，包括：

初始组合界面面板属性定义单元，用于在XML文件中定义初始组合界面面板的属性，属性包括各个标签页高度、宽度、属性、内容；

第一标签页内容界面获取单元，用于获取初始组合界面面板的第一标签页选择信号，显示第一标签页内容界面；

第二标签页拖拽单元，用于选择第二标签页并对其进行拖拽操作，判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏；

界面拆分单元，用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页内容界面时，计算第一标签页内容界面高度和宽度，在XML文件中删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述；

窗口合并单元，用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页标签栏时，在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述；

界面展示单元，用于根据XML文件的组合界面面板的属性在前端进行实时展示。

4.根据权利要求3所述一种WEB环境下多标签页的自定义布局装置，其特征在于，所述界面拆分单元包括位置判断模块，用于判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面；所述界面拆分单元还包括：

上界面拆分模块，用于当判断第二标签页被拖拽到第一标签页内容界面的上界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半；同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述，其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半，宽度为第一标签页内容界面的宽度；

下界面拆分模块，用于当判断第二标签页被拖拽到第一标签页内容界面的下界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半；同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述，其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半，宽度为第一标签页内容界面的宽度；

左界面拆分模块，用于当判断第二标签页被拖拽到第一标签页内容界面的左界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半；同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述，其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半，高度为第一标签页内容界面的高度；

右界面拆分模块，用于当判断第二标签页被拖拽到第一标签页内容界面的右界面时，在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半；同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述，其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半，高度为第一标签页内容界面的高度。