CN103064683A - Method and device for custom layout of multiple tabs under WEB environment - Google Patents

Method and device for custom layout of multiple tabs under WEB environment Download PDF

Info

Publication number
CN103064683A
CN103064683A CN2012105795504A CN201210579550A CN103064683A CN 103064683 A CN103064683 A CN 103064683A CN 2012105795504 A CN2012105795504 A CN 2012105795504A CN 201210579550 A CN201210579550 A CN 201210579550A CN 103064683 A CN103064683 A CN 103064683A
Authority
CN
China
Prior art keywords
tab
interface
panel
content
width
Prior art date
Application number
CN2012105795504A
Other languages
Chinese (zh)
Inventor
靳谊
陈敏
林利炜
陈明远
万孝雄
陈威
Original Assignee
福建榕基软件股份有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 福建榕基软件股份有限公司 filed Critical 福建榕基软件股份有限公司
Priority to CN2012105795504A priority Critical patent/CN103064683A/en
Publication of CN103064683A publication Critical patent/CN103064683A/en

Links

Abstract

The invention discloses a method and a device for custom layout of multiple tabs under WEB environment. The method comprises steps of defining properties of an initial combined interface panel; displaying the content interface of a first tab; selecting a second tab, drawing the second tab and determining that the second tab is drawn to the content interface of the first tab or a tab bar of the first tab; when the second tab is drawn to the content interface of the first tab, calculating the height and the width of the content interface of the first tab, deleting the property description of the second tab, modifying the property description of the initial combined interface panel, and adding the property description of a new combined interface panel; when the second tab is drawn to the tab bar of the first tab, deleting the property description of the second tab of the initial combined interface panel, and adding the property description of the second tab to the initial combined interface panel; and according to the property description of the combined interface panel, displaying at the front end in real time. The invention also discloses a device for the custom layout of multiple tabs under the WEB environment.

Description

WEB环境下多标签页的自定义布局方法及装置 Custom layout method and apparatus of the multi-tab WEB environment

技术领域 FIELD

[0001] 本发明涉及计算机领域,尤其涉及一种WEB环境下多标签页的自定义布局方法及 [0001] The present invention relates to computers, and more particularly relates to a method for the custom layout between a WEB environment and multi-tab

>JU ρςα装直。 > JU ρςα loaded straight.

背景技术 Background technique

[0002] 在WEB环境下,应用JS脚本实现标签页(TAB)切换技术已经被广泛采用。 [0002] In WEB environment, applications implemented JS script tab (TAB) switching technology has been widely adopted. 该技术可以在一个页面中显示多标签页(TAB),通过点击不同标签,展示该标签下的内容,如文字、图片或页面风格等。 This technology can display multiple tabs (TAB), by clicking on different labels to show the contents of this tag, such as text, images or page styles in a page.

[0003] 上述技术的缺点在于:缺点1、可读性差无法实现单页面多标签内容展示:一个页面仅能显示一个标签页的详细信息,通过点击其他标签页进行页面切换,不能在一个页面中直观展示两个标签页详细信息。 Disadvantage [0003] that the techniques described above: 1 disadvantage of poor readability can not achieve a single multi-page label content display: a details tab page only a display page mode by clicking the other tab, a page can not be Details of two tabs visual display. 缺点2、无法实现对标签页面自定义布局:一个标签页的内容通常是固定的,无法通过拖拽来实现对页面进行自定义布局,比如将页面划分成多个窗口或合并窗口。 2 disadvantage, the label can not be achieved page custom layout: a tab content is usually fixed and can not be implemented on pages by dragging a custom layout, such as the page is divided into a plurality of windows or merge window.

发明内容 SUMMARY

[0004] 为解决上述问题,本发明采用的一个技术方案是: [0004] To solve the above problems, an aspect of the present invention is that:

[0005] 提供一种WEB环境下多标签页的自定义布局方法,包括:S1、在XML文件中定义初始组合界面面板的属性,属性包括各个标签页高度、宽度、属性、内容;S2、获取初始组合界面面板的第一标签页选择信号,显示第一标签页内容界面;S3、选择第二标签页并对其进行拖拽操作,判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏;S4、当第二标签页被拖拽到第一标签页内容界面时,通过计算第一标签页内容界面高度和宽度,在XML文件中删除第二标签页的属性描述以及增加新的初始组合界面面板的属性描述;S5、当第二标签页被拖拽到第一标签页标签栏时,在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述;S6、根据XML文件的初始组合界面面板的属性 [0005] The method of providing a custom layout in a multi-tab between a WEB environment, comprising: S1, initial composition interface panel defined attributes in the XML file, including attributes of each tab height, width, attributes, content; S2, obtaining initial combination of a first interface panel tab selection signal, the first tag page contents display screen; S3, selecting a second tab and its drag operation, determining a second tab is dragged to a first interface tab content or dragged to the first tab, the tab bar; S4, when the second tab is dragged to the first tab content interface, by calculating the first tab content interface height and width, delete the second in an XML file attribute describes the attribute describes new and increased initial composition of the interface panel tab; S5, when the second tab is a first tab to the dragged tab bar, remove the initial composition of the second interface panel tab in an XML file and increasing a second attribute description tab properties described in the initial composition interface panel comprising a first tab; S6, an initial composition according to the attribute of the XML file interface panel 在前端进行实时展示。 Real-time display in the front.

[0006] 本发明采用的另一个技术方案是: [0006] Another aspect of the present invention is that:

[0007] 提供一种WEB环境下多标签页的自定义布局装置,包括:初始组合界面面板属性定义单元,用于在XML文件中定义初始组合界面面板的属性,属性包括各个标签页高度、宽度、属性、内容;第一标签页内容界面获取单元,用于获取初始组合界面面板的第一标签页选择信号,显示第一标签页内容界面;第二标签页拖拽单元,用于选择第二标签页并对其进行拖拽操作,判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏;界面拆分单元,用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页内容界面时,通过计算第一标签页内容界面高度和宽度,在XML文件中删除第二标签页的属性描述以及增加新的初始组合界面面板的属性描述;窗口合并单元,用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页标 [0007] Providing a custom layout in multi-tab means between a WEB environment, comprising: a combination of an initial interface panel attribute definition means for defining a combination of the initial properties of the interface panel in the XML file, including attributes of each tab height, width , attributes, content; first interface tab content acquisition unit for acquiring a first initial composition tab panel interface selection signal, the first tag page contents display screen; drag and drop a second tab means for selecting a second tab and its drag operation, determining a second tab is dragged to the first tab is dragged to the contents of the first interface or the tab bar tab; interface splitting unit, configured to, when the second label a second drag unit determines when page tab is dragged to a first interface tab content, calculated by the first tag page contents interface height and width, the second tab delete attributes described in the XML file and add a new initial description attribute combination interface panel; window combining unit, configured to, when the second unit determines a second tab dragged tab is dragged to a first label tab 签栏时,在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述;界面展示单元,用于根据XML文件的初始组合界面面板的属性在前端进行实时展示。 When the check column, deleted attribute describes the interface panel in the initial composition of the second tab and a second tab attribute describes the increase in the initial composition interface panel comprising a first tab in the XML file; interface display unit according to XML the initial property portfolio interface panel files for real-time display in the front.

[0008] 本发明的有益效果在于,本发明的WEB环境下多标签页的自定义布局方法及装置,在WEB界面中页面布局可通过标签页的拖拽实现动态、灵活调整布局,便于使用和对t:匕。 [0008] Advantageous effects of the present invention is to custom layout method and apparatus of the multi-tab WEB context of the present invention, in the WEB interface layout of the pages may be dynamic drag tab, to adjust the layout flexibility, ease of use, and for t: dagger. 进一步地,实现在一个窗口多个标签页的灵活展示,当标签页拖动的边缘或标签页群中可以将界面划分成多个窗口或合并窗口,提高可读性,减少了反复查看、查询的工作量。 Further, to achieve a flexible display in a window with multiple tabs, the tab when dragging the edge or tab group can be divided into multiple windows interface or merge window, to improve readability, reducing repeatedly to view, query workload.

附图说明 BRIEF DESCRIPTION

[0009] 图1是本发明一实施方式中一种WEB环境下多标签页的自定义布局装置的结构框图; [0009] FIG. 1 is a block diagram of one embodiment the WEB environment custom layout multi-tab to an embodiment of the apparatus of the present invention;

[0010] 图2是将标签页grid拖拽到标签页form左侧内容界面的示意图; [0010] FIG. 2 is a schematic view of the contents of the left tab form grid interface tab drag;

[0011] 图3是将标签页grid拖拽到标签页form右侧内容界面的示意图; [0011] FIG. 3 is a right side schematic form the contents of the interface tab tab grid drag;

[0012] 图4是将标签页grid拖拽到标签页form上侧内容界面的示意图; [0012] FIG. 4 is a side schematic form the contents of the interface tab tab grid drag;

[0013] 图5是将标签页grid拖拽到标签页form下侧内容界面的示意图; [0013] FIG. 5 is a grid drag tabs tab side schematic form the contents of the interface;

[0014] 图6是将标签页grid拖拽到标签页form标签栏上的示意图; [0014] FIG. 6 is a schematic view of the tab on the tab bar tab grid form drag;

[0015] 图7是本发明一实施方式中一种WEB环境下多标签页的自定义布局方法的流程图。 [0015] FIG. 7 is a flowchart illustrating the embodiment of the method of multiple custom layout tab between a WEB environment in an embodiment of the present invention.

具体实施方式 Detailed ways

[0016] 为详细说明本发明的技术内容、构造特征、所实现目的及效果,以下结合实施方式并配合附图详予说明。 [0016] The teachings of the present invention in detail, structural features, objects and effects of the implementation, the following embodiments in conjunction with the accompanying drawings and to be described in detail. 请参阅图1,是本发明一实施方式中一种WEB环境下多标签页的自定义布局装置的结构框图。 Please refer to FIG. 1, is a block diagram of the multi-tab device in custom layout between a WEB environment in an embodiment of the present invention. 一种WEB环境下多标签页的自定义布局装置包括初始组合界面面板属性定义单元、第一标签页内容界面获取单元、第二标签页拖拽单元、界面拆分单元、窗口合并单元。 Custom layout apparatus of the multi-tab environment between a WEB interface panel comprising a combination of initial attribute defining unit, a first interface tab content acquisition unit, a second drag unit tabs, the interface splitting unit, combining unit window.

[0017] 初始组合界面面板属性定义单元用于在XML文件中定义初始组合界面面板的属性,属性包括各个标签页高度、宽度、属性、内容。 [0017] The initial compositions interface panel attribute definition unit for defining a combination of the initial properties of the interface panel in the XML file, including attributes of each tab height, width, attributes, content. 第一标签页内容界面获取单元,用于获取初始组合界面面板的第一标签页选择信号,显示第一标签页内容界面。 A first interface tab content obtaining unit, configured to obtain a first combination of the initial interface panel tab selection signal, a first display content interface tab. 第二标签页拖拽单元,用于选择第二标签页并对其进行拖拽操作,判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏。 The second tab drag unit for selecting a second tab and its drag operation, determining a second tab is dragged to a first interface or the content tab a first tab is dragged to the tab bar. 界面拆分单元,用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页内容界面时,通过计算第一标签页内容界面高度和宽度,在XML文件中删除第二标签页的属性描述以及增加新组合界面面板的属性描述。 Interface splitting unit, when said second tab when the second drag unit determines tab a first tab is dragged to the interface content, calculated by the first tag page contents interface height and width, in the XML file delete attribute describes the second tab and increase the property description for the new combined interface panel. 窗口合并单元,用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页标签栏时,在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述。 Window combining unit, when said second means determines a second tab dragged tab a first tab is dragged to the tab bar, delete attribute describes the initial composition of the second interface panel tab in an XML file and increasing a second tab properties in the initial composition interface panel comprising a first tab described. 界面展示单元,用于根据XML文件的组合界面面板的属性描述在前端进行实时展示。 Interface display unit for describing the real-time display at the front end based on the attributes of the XML file at interface panel.

[0018] 所述界面拆分单元包括位置判断模块,用于判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面;所述界面拆分单元还包括上界面拆分模块、下界面拆分模块、左界面拆分模块、右界面拆分模块。 [0018] The interface unit includes splitting position determining means for determining a second tab is dragged to the first tag page contents on the interface or the interface or the interface left or right screen interface; splitting said interface unit further comprising splitting the interface module, the interface module is split, the split interface module left and right split interface module. 上界面拆分模块用于当判断第二标签页被拖拽到第一标签页内容界面的上界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度。 The interface module is configured to split, when determining the second tab is dragged to the interface of the first interface tab content in the initial composition of the XML file interface panel modify the height of the first tab content of the original height of the interface half; in the XML file while increasing front panel interface attribute describes the initial composition of the new combinations of properties described interface panel, wherein the properties of the new composition is described in the interface panel half the height of the original height of the first tab content interface, a width of the first the width of the tab content interface. 下界面拆分模块用于当判断第二标签页被拖拽到第一标签页内容界面的下界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度。 The interface module is configured to split, when determining the second tab is dragged to the interface of the first interface tab pages in the XML file initial composition highly modified first tag page contents of the interface for the original height of the interface panel half; in the XML file while increasing the initial composition later described interface panel attributes describe new combinations of properties of the interface panel, wherein the properties of the new composition is described in the interface panel half the height of the original height of the first tab content interface, a width of the first the width of the tab content interface. 左界面拆分模块,用于当判断第二标签页被拖拽到第一标签页内容界面的左界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半,高度为第一标签页内容界面的高度。 Splitting the left interface module, for determining when the second tab is dragged to the left interface of the first interface tab content, modify the width of the first tab, the initial content of the interface in the interface panel combination XML file original width half; in the XML file while increasing front panel interface attribute describes the initial composition of the new combinations of properties described interface panel, wherein the combination of the properties described new interface panel width in a first half of the tab content of the original interface width, height height of the first tab content interface. 右界面拆分模块用于当判断第二标签页被拖拽到第一标签页内容界面的右界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半,高度为第一标签页内容界面的高度。 Interface means for splitting the right when it is determined that the second tab is dragged to the right content interface of the first interface tab, in the combined width of the initial XML file modification of the first tab content of the interface width of the original interface panel half; in the XML file while increasing the initial composition later described interface panel attributes describe new combinations of properties of the interface panel, wherein the combination of the properties described new interface panel width is half the original width of the first tab content interface height height of the first tab content interface.

[0019] 请参阅图2,是将标签页grid拖拽到标签页form左侧内容界面的示意图。 [0019] Please refer to FIG. 2, the tab is a schematic diagram form the interface of the contents of the left tab to the grid drag. 第一步:选择标签页grid将其拖拽到标签页form左侧,平均分割页面为标签页grid和标签页form。 Step One: Select the tab grid drag it to the left tab form, average page is divided into tabs grid and tab form. 具体实现步骤如下:1)计算当前窗口标签页form大小(高度和宽度f2)。 Specific steps are as follows: 1) Calculate the current window size tab form (height and width f2). 2)在XML文件中修改标签页form的宽度为(f2/2),并删除标签页grid的描述内容。 2) modify the label page in the form of an XML file width (f2 / 2), and delete the description of the tab grid. 3)同时在XML文件中增加新组合界面面板的属性描述(即新增标签页grid),包括高度、宽度、属性、内容等,其中标签页grid高度不变,宽度为标签页form的一半,即高度为(fI)和宽度(f2/2)。 3) while adding new property combinations described in the XML file interface panel (i.e. the new grid tabs), including height, width, attributes, content, etc., wherein tabs grid constant height, a half width of the tab form, i.e. height (fI) and a width (f2 / 2). 第二步:根据XML文件内容,在原标签页面上显示标签页grid和标签页form,其中标签页grid在左侧,标签页form在右侧。 Step two: the contents of the XML file, display tabs and tab form grid on the original tab page, which tab grid on the left tab form on the right.

[0020] 请参阅图3,是将标签页grid拖拽到标签页form右侧内容界面的示意图。 [0020] Please refer to FIG. 3, the tab is a schematic diagram form the interface right of the content to drag tab grid. 第一步:选择标签页grid将其拖拽到标签页form右侧,将平均分割页面为标签页grid和标签页form。 Step One: Select the tab grid drag it to the right side of the tab form, the page is divided into tabs average grid and tab form. I)计算当前窗口标签页form大小(高度fl和宽度f2)。 I) calculate the current window size tab form (height and width fl f2). 2)在XML文件中修改标签页form的宽度为(f2/2) ,并删除标签页grid的描述内容。 2) modify the label page in the form of an XML file width (f2 / 2), and delete the description of the tab grid. 3)同时在XML文件中增加新组合界面面板的属性定义(即新增标签页grid),包括高度、宽度、属性、内容等,其中标签页grid高度不变,宽度为标签页form的一半,即高度为(fl)和宽度(f2/2)。 3) the definition of a new attribute points at interface panel in an XML file (i.e. the new grid tabs), including height, width, attributes, content, etc., wherein tabs grid constant height, a half width of the tab form, i.e. height (fl) and a width (f2 / 2). 第二步:根据XML文件内容,在原标签页面上显示标签页grid和标签页form,其中标签页grid在左侧,标签页form在右侧。 Step two: the contents of the XML file, display tabs and tab form grid on the original tab page, which tab grid on the left tab form on the right.

[0021] 请参阅图4,是将标签页grid拖拽到标签页form上侧内容界面的示意图。 [0021] Please refer to FIG. 4, is a side schematic form the contents of the interface tab tab grid drag. 第一步:选择标签页grid将其拖拽到标签页form上侧,将平均分割页面为标签页grid和标签页form。 Step: Select the tab grid drag it to form the side tab, the page is divided equally tabs and tab grid form. 具体实现步骤如下:1)计算当前窗口标签页form大小(高度f!和宽度f2)。 Specific steps are as follows: 1) Calculate the current window size tab form (height and width f f2)!. 2)在XML文件中修改标签页form的高度为(fl/2),并删除标签页grid的描述内容。 2) modify the label page in the form of an XML file height (fl / 2), and delete the description of the tab grid. 3)同时在XML文件中增加新组合界面面板的属性描述(即新增标签页grid),包括高度、宽度、属性、内容等,其中标签页grid高度不变,高度为标签页form的一半,即高度为(fl/2)和宽度(f2)。 3) while adding new property combinations described in the XML file interface panel (i.e. the new grid tabs), including height, width, attributes, content, etc., wherein tabs grid constant height, half height form the tab, i.e. height (fl / 2) and a width (f2). 第二步:根据XML文件内容,在原标签页面上显示标签页form和标签页grid,其中标签页form在下侧,标签页grid在上侧。 Step two: the XML file contents page is displayed on the original label and tag form tab page grid, which form the lower side of the tab, the tab on the side of the grid.

[0022] 请参阅图5,是将标签页grid拖拽到标签页form下侧内容界面的示意图。 [0022] Please refer to FIG. 5, is a schematic side view of the contents of the interface tab tab grid form drag. 第一步:选择标签页grid将其拖拽到标签页form右侧,将平均分割页面为标签页grid和标签页form。 Step One: Select the tab grid drag it to the right side of the tab form, the page is divided into tabs average grid and tab form. I)计算当前窗口标签页form大小(高度fl和宽度f2)。 I) calculate the current window size tab form (height and width fl f2). 2)在XML文件中修改标签页form的高度为(fl/2),并删除标签页grid的描述内容。 2) modify the label page in the form of an XML file height (fl / 2), and delete the description of the tab grid. 3)同时在XML文件中增加新组合界面面板的属性定义(即新增标签页grid),包括高度、宽度、属性、内容等,其中标签页grid高度不变,高度为标签页form的一半,即高度为(fl/2)和宽度(f2)。 3) the definition of a new attribute points at interface panel in an XML file (i.e. the new grid tabs), including height, width, attributes, content, etc., wherein tabs grid constant height, half height form the tab, i.e. height (fl / 2) and a width (f2). 第二步:根据XML文件内容,在原标签页面上显示标签页form和标签页grid,其中标签页form在上侧,标签页grid在下侧。 Step 2: According XML file content, form and display tab tab tab page in the original grid, which form on the side of the tab, the tab grid the lower side.

[0023] 请参阅图6,是将标签页grid拖拽到标签页form标签栏上的示意图。 [0023] Referring to FIG. 6, is a schematic diagram tabs on the tab bar tab grid form drag. 第一步:准备一个面板中存在多个标签页(标签form和标签grid)。 Step one: Prepare a multiple tab (label form and label grid) panel. 第二步:选择标签页grid将其拖拽到标签页form的标签栏上,将标签页grid和标签页form进行窗口合并。 Step two: Select the tab grid drag it to the tab bar tab form, the grid will tabs and tab form of window merger. 具体实现步骤如下:1)计算当前标签页form面板的行列大小(高度fcols、宽度frows)、计算当前窗口标签页grid面板行列大小(高度gcols、宽度grows)。 Specific steps are as follows: 1) calculate the current size ranks form tab panel (height fcols, width frows), calculating a current window panel tab line grid size (height gcols, width grows). 2)在XML文件中修改标签页form的高度为(fcols+gcols),宽度为(frows+grows),并删除标签页grid的描述内容。 2) modify the label page in the form of an XML file height (fcols + gcols), width (frows + grows), and delete the description of the tab grid. 3)同时在XML文件中form的组合界面面板上新增标签页grid描述,包括高度、宽度、属性、内容等。 3) while adding the XML file in the form of compositions described grid interface panel tab, including the height, width, attributes, content and the like. 第三步:根据XML文件内容,在原标签页面上显示标签页form和标签页grid,其中标签页grid作为标签列表显示在标签页form页面上。 Step 3: XML file content, display tabs and tab grid form on the original tab page, which tab grid is displayed on the tab page form as a tag list.

[0024] 请参阅图7,是本发明一实施方式中一种WEB环境下多标签页的自定义布局方法的流程图。 [0024] Please refer to FIG. 7 is a flowchart of a method of custom layout of a multi-tab of one embodiment of the present invention under the WEB environment. 一种WEB环境下多标签页的自定义布局方法包括: Custom layout method in a multi-tab between a WEB environment comprising:

[0025] 步骤S1、在XML文件中定义初始组合界面面板的属性,属性包括各个标签页高度、宽度、属性、内容; [0025] step S1, the initial composition interface panel defined attributes in the XML file, including attributes of each tab height, width, attributes, content;

[0026] 步骤S2、获取初始组合界面面板的第一标签页选择信号,显示第一标签页内容界面; [0026] Step S2, the initial composition acquiring a first tab panel interface selection signal, the first tag page contents display screen;

[0027] 步骤S3、选择第二标签页并对其进行拖拽操作,判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏; [0027] Step S3, the selected tab and subjected to a second drag operation, determining a second tab is dragged to the first tab is dragged to the contents of the first interface or the tab bar tab;

[0028] 步骤S4、当第二标签页被拖拽到第一标签页内容界面时,计算第一标签页内容界面高度和宽度,在XML文件中删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述; [0028] step S4, when the second tab is a first tab content dragged to the interface, calculating a first tab content interface height and width, delete the attribute description of the second tab in the XML file, to modify the initial composition attribute describes the properties of the interface panel and an increase in the interface panel of the new composition described;

[0029] 步骤S5、当第二标签页被拖拽到第一标签页标签栏时,在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述; [0029] step S5, when the second tab is a first tab to the dragged tab bar, and delete attributes described in the second tab comprising a first tab in the initial composition of the initial composition in the interface panel XML file the addition of a second interface panel tab attribute description;

[0030] 步骤S6、根据XML文件的组合界面面板的属性在前端进行实时展示。 [0030] Step S6, the composition according to the attribute of the XML file interface panel display in real time at the front end.

[0031] 其中,所述步骤S4具体包括步骤:S41、判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面; [0031] wherein said step comprises the step S4: S41, determines whether the second tab is dragged to the interface or the interface or interface left or right page content interface of the first interface tab;

[0032] 所述步骤S4中“修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述”具体包括: [0032] The step S4 'to modify the initial composition of the interface panel and an increase in new combinations of properties described interface panel attribute description "comprises:

[0033] S42、当判断第二标签页被拖拽到第一标签页内容界面的上界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度; [0033] S42, when it is judged the second tab is dragged to the interface between the first tab content interface, the interface panel to modify the initial height of the first combination of tab pages in the XML file interface to half its original height; XML file while increasing front panel interface attribute describes the initial composition of the new combinations of properties described interface panel, wherein the properties of the new composition is described in the interface panel half the height of the original height of the first tab content interface, a width of the first tab the interface width of the content;

[0034] S43、当判断第二标签页被拖拽到第一标签页内容界面的下界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度; [0034] S43, when the second tab is determined to be dragged to the interface between the first tab content interface, the interface panel to modify the initial height of the first combination of tab pages in the XML file interface to half its original height; XML file while increasing the initial composition later described interface panel attributes describe new combinations of properties of the interface panel, wherein the properties of the new composition is described in the interface panel half the height of the original height of the first tab content interface, a width of the first tab the interface width of the content;

[0035] S44、当判断第二标签页被拖拽到第一标签页内容界面的左界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半,高度为第一标签页内容界面的高度; [0035] S44, when it is judged the second tab is dragged to the left interface of the first interface tab content, modify the width of the first tab, the initial content of the interface composition in the XML file interface panel half their original width; while an initial composition in an XML file attribute describes the front panel interface is increased describe new combinations of properties of the interface panel, wherein the tab width is half the first width of the original contents of the interface properties of the new composition described interface panel, the height of the first tab height page content interface;

[0036] S42、当判断第二标签页被拖拽到第一标签页内容界面的右界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半,高度为第一标签页内容界面的高度。 [0036] S42, when it is judged the second tab is dragged to the right content interface of the first interface tab, modify the width of the first tab initial content of the interface composition in the XML file interface panel half their original width; XML file while increasing the initial composition later described interface panel attributes describe new combinations of properties of the interface panel, wherein the combination of the properties described new interface panel width is half the original width of the first tab content interface, a first height highly tab content interface.

[0037] 本发明的有益效果在于,本发明的WEB环境下多标签页的自定义布局方法及装置,在WEB界面中页面布局可通过标签页的拖拽实现动态、灵活调整布局,便于使用和对t:匕。 [0037] Advantageous effects of the present invention is to custom layout method and apparatus of the multi-tab WEB context of the present invention, in the WEB interface layout of the pages may be dynamic drag tab, to adjust the layout flexibility, ease of use, and for t: dagger. 进一步地,实现在一个窗口多个标签页的灵活展示,当标签页拖动到边缘或标签页群中可以将界面划分成多个窗口或合并窗口,提高可读性,减少了反复查看、查询的工作量。 Further, to achieve a flexible display in a window with multiple tabs, drag to the edge when the tab or tab group can be divided into multiple windows interface or merge window, to improve readability, reducing repeatedly to view, query workload.

[0038] 以上所述仅为本发明的实施例,并非因此限制本发明的专利范围,凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本发明的专利保护范围内。 [0038] The embodiments described above are only embodiments of the present invention, not intended to limit the scope of the present invention, all utilize the present specification and drawings taken equivalent structures or equivalent process, or other direct or indirect application Related technical fields shall fall within the scope of protection of the present invention.

Claims (4)

1. 一种WEB环境下多标签页的自定义布局方法,其特征在于,包括: 51、在XML文件中定义初始组合界面面板的属性,属性包括各个标签页高度、宽度、属性、内容; 52、获取初始组合界面面板的第一标签页选择信号,显示第一标签页内容界面; 53、选择第二标签页并对其进行拖拽操作,判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏; 54、当第二标签页被拖拽到第一标签页内容界面时,计算第一标签页内容界面高度和宽度,在XML文件中删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述; 55、当第二标签页被拖拽到第一标签页标签栏时,在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述; 56、根 Custom layout of the multi tab A WEB environment, characterized by comprising: 51, interface panel initial composition defined attributes in the XML file, including attributes of each tab height, width, attributes, content; 52 obtaining a first initial composition tab panel interface selection signal, the first tag page contents display interface; 53, select the second tab and its drag operation, determining a second tab is dragged to a first tab SUMMARY interface is dragged to a first tab bar tab; 54, when the second tab is a first tab content dragged to the interface, the interface is calculated first tag page height and width of the content, deleting the first file in XML description of two properties tab, modify the properties of the initial composition described in the interface panel and an increase in new combinations of properties described interface panel; and 55, when the second tab is a first tab to the dragged tab bar, remove the initial XML file attribute describes the combination of a second interface panel and tab a second tab attribute describes the increase in the initial composition interface panel comprising a first tab; 56, root XML文件的组合界面面板的属性在前端进行实时展示。 Combination of attributes XML file interface panel for real-time display in the front.
2.根据权利要求1所述一种WEB环境下多标签页的自定义布局方法,其特征在于,所述步骤S4具体包括步骤:S41、判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面;所述步骤S4中“修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述;”具体包括: 542、当判断第二标签页被拖拽到第一标签页内容界面的上界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度; 543、当判断第二标签页被拖拽到第一标签页内容界面的下界面时,在XML文件中初始组合界面面板中修改第一标签页内 The custom layout method of the multi-tab in claim 1. A WEB environment, wherein said step comprises the step S4: S41, determines whether the second tab is dragged to the contents of the first tab interface or the interface or the interface left or right screen interface; step S4, "initial composition to modify the properties described in the interface panel and an increase in new combinations of properties described interface panel;" specifically includes: 542, when it is judged the second tab when it is dragged to the interface between the first tab content interface, the interface panel to modify the initial height of the first combination of tab pages in the XML file interface to half its original height; attribute describes the interface panel while the initial composition in an XML file Adding properties previously described new combination interface panel, wherein the properties of the new composition is described in the interface panel height half the height of the original content of the first interface tab, the tab width is the width of the first content interface; 543, when determining the second when the tab is dragged to the interface of the first interface tab content, modifying the first tab page in the initial composition in an XML file interface panel 界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度; 544、当判断第二标签页被拖拽到第一标签页内容界面的左界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半,高度为第一标签页内容界面的高度; S42、当判断第二标签页被拖拽到第一标签页内容界面的右界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面 Half of the original height of the interface height; while increasing attributes in the XML file is described later new combination interface panel interface panel attribute describes the initial composition, wherein the interface properties of the new composition described panel height as the first tabs SUMMARY original height interface half the width of the first width of the tab content interface; 544, when it is judged the second tab is dragged to the left interface of the first interface tab content, a combination of the initial XML file in the first interface panel modified tag interface pages width half their original width; while increasing the XML file attribute describes new compositions interface panel front panel interface attribute describes the initial composition, wherein the combination of the properties described new interface panel width of a first tab content half the width of the interface of the original height of the height of the first tab content interface; S42, when it is judged the second tab a first tab is dragged to the right interface interface content, modify XML file interface panel in the initial composition tab width of the first half of the original content of the interface width; while the initial composition in an XML file interface surface 板属性描述的后面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半,高度为第一标签页内容界面的高度。 Attribute Description rear panel increases attribute describes new compositions interface panel, wherein a width of half the original width of the first tab content description interface in the new compositions the properties of the interface panel, the height of the height of the first tab content interface.
3. —种WEB环境下多标签页的自定义布局装置,其特征在于,包括: 初始组合界面面板属性定义单元,用于在XML文件中定义初始组合界面面板的属性,属性包括各个标签页高度、宽度、属性、内容; 第一标签页内容界面获取单元,用于获取初始组合界面面板的第一标签页选择信号,显示第一标签页内容界面; 第二标签页拖拽单元,用于选择第二标签页并对其进行拖拽操作,判断第二标签页被拖拽到第一标签页内容界面还是被拖拽到第一标签页标签栏; 界面拆分单元,用于当所述第二标签页拖拽单元确定第二标签页被拖拽到第一标签页内容界面时,计算第一标签页内容界面高度和宽度,在XML文件中删除第二标签页的属性描述、修改初始组合界面面板的属性描述以及增加新组合界面面板的属性描述; 窗口合并单元,用于当所述第二标签页拖拽单元确 3. - custom layout apparatus of the multi-tab species WEB environment, characterized by comprising: an initial composition interface panel attribute definition means for defining a combination of the initial properties of the interface panel in the XML file, including attributes of each tab height , width, attributes, content; first interface tab content acquisition unit for acquiring a first initial composition tab panel interface selection signal, the first tag page contents display screen; drag and drop a second tab means for selecting the second tab and its drag operation, determining a second tab is dragged to the first tab is dragged to the contents of the first interface or the tab bar tab; interface splitting unit which, when the first second tab drag unit determines the second tab is a first tab to the dragged content interface, calculating a first tab content interface height and width, delete the attribute description of the second tab in the XML file, to modify the initial composition attribute describes the properties of the interface panel and an increase in the interface panel of the new composition described; window combining unit, configured to, when the second drag unit determines tab 第二标签页被拖拽到第一标签页标签栏时,在XML文件中删除初始组合界面面板中第二标签页的属性描述以及在含有第一标签页的初始组合界面面板中增加第二标签页属性描述; 界面展示单元,用于根据XML文件的组合界面面板的属性在前端进行实时展示。 The second tab is a first tab to the dragged tab bar, delete attribute describes the initial composition of the second interface panel tab in the XML file and the second increase in the initial composition tag interface panel comprising a first tab page attribute description; interface display unit configured to display real-time interface at the front end panel according to the combinations of attributes in an XML document.
4.根据权利要求3所述一种WEB环境下多标签页的自定义布局装置,其特征在于,所述界面拆分单元包括位置判断模块,用于判断第二标签页被拖拽到第一标签页内容界面的上界面或下界面或左界面或右界面;所述界面拆分单元还包括: 上界面拆分模块,用于当判断第二标签页被拖拽到第一标签页内容界面的上界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度; 下界面拆分模块,用于当判断第二标签页被拖拽到第一标签页内容界面的下界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的高度为原高度的 4. The custom layout multi-tab means between a WEB environment in claim 3, wherein said interface unit includes splitting position determining means for determining a second tab is dragged to a first tab pages interface or the interface or the interface left or right screen interface; splitting said interface unit further comprises: a dividing module interface, for determining when the second tab is a first tab to the dragged content interface at the interface, the interface panel to modify the initial height of the first combination of tab pages in the XML file interface to half its original height; in the XML file while increasing the attributes described in the preceding combination interface panel interface panel initial combination of properties described wherein the combination of properties of the new interface panel description half the height of the first tab page contents interface original height, width of the first width of the tab content interface; the interface dividing module, configured to, when determining the second tab dragged when dragged the interface of the first interface tab content in the initial composition of the XML file interface panel modify the height of the first tab content of the original height of the interface 半;同时在XML文件中初始组合界面面板属性描述的后面增加新组合界面面板的属性描述,其中新组合界面面板的属性描述中高度为第一标签页内容界面原高度的一半,宽度为第一标签页内容界面的宽度; 左界面拆分模块,用于当判断第二标签页被拖拽到第一标签页内容界面的左界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始组合界面面板属性描述的前面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面原宽度的一半,高度为第一标签页内容界面的高度; 右界面拆分模块,用于当判断第二标签页被拖拽到第一标签页内容界面的右界面时,在XML文件中初始组合界面面板中修改第一标签页内容界面的宽度为原宽度的一半;同时在XML文件中初始 Semi; in the XML file while increasing the initial composition later described interface panel attributes describe new combinations of properties of the interface panel, wherein the properties of the new composition is described in the interface panel half the height of the original height of the first tab content interface, a width of the first the width of the tab content interface; split left interface module, for determining when a second tab a first tab is dragged to the left the contents of the interface when the interface, the interface panel to modify the initial composition of the first tab in the XML file half the width of the original contents of the interface width; while increasing the XML file attribute describes new compositions interface panel front panel interface attribute describes the initial composition, wherein the combination of the properties described new interface panel width of a first interface tab content half the width of the original height of the height of the first tab content interface; the right split interface module, for determining when the second tab is dragged to the right content interface of the first interface tab, in the initial XML file modifying the first interface panel combined content interface tab width is half of its original width; while the initial XML file 合界面面板属性描述的后面增加新组合界面面板的属性描述,其中在新组合界面面板的属性描述中宽度为第一标签页内容界面的原宽度的一半,高度为第一标签页内容界面的高度。 Rear panel attribute describes the bonding interface increases attribute describes new compositions interface panel, wherein the combination of the properties described new interface panel width is half the original width of the first content interface tab, the tab height is the height of the first interface content .
CN2012105795504A 2013-02-19 2013-02-19 Method and device for custom layout of multiple tabs under WEB environment CN103064683A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN2012105795504A CN103064683A (en) 2013-02-19 2013-02-19 Method and device for custom layout of multiple tabs under WEB environment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN2012105795504A CN103064683A (en) 2013-02-19 2013-02-19 Method and device for custom layout of multiple tabs under WEB environment

Publications (1)

Publication Number Publication Date
CN103064683A true CN103064683A (en) 2013-04-24

Family

ID=48107321

Family Applications (1)

Application Number Title Priority Date Filing Date
CN2012105795504A CN103064683A (en) 2013-02-19 2013-02-19 Method and device for custom layout of multiple tabs under WEB environment

Country Status (1)

Country Link
CN (1) CN103064683A (en)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104462490A (en) * 2014-12-22 2015-03-25 上海斐讯数据通信技术有限公司 Display method for list details
CN104516723A (en) * 2013-09-26 2015-04-15 联想(北京)有限公司 Widget processing method and device
CN104731486A (en) * 2013-12-19 2015-06-24 鸿合科技有限公司 Method and device for deleting page

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040113948A1 (en) * 2002-12-16 2004-06-17 Khatoun Shahrbabaki Detachable tabs presenting accessed objects in a multi-tab interface
CN101561748A (en) * 2009-05-21 2009-10-21 阿里巴巴集团控股有限公司 Display method and Display device of the tag detail in IM software
CN102098233A (en) * 2009-12-11 2011-06-15 阿里巴巴集团控股有限公司 Method and system for controlling communication window in instant messenger
CN102402577A (en) * 2010-09-09 2012-04-04 微软公司 Drag-able tabs
US20120131497A1 (en) * 2010-11-18 2012-05-24 Google Inc. Orthogonal Dragging on Scroll Bars

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040113948A1 (en) * 2002-12-16 2004-06-17 Khatoun Shahrbabaki Detachable tabs presenting accessed objects in a multi-tab interface
CN101561748A (en) * 2009-05-21 2009-10-21 阿里巴巴集团控股有限公司 Display method and Display device of the tag detail in IM software
CN102098233A (en) * 2009-12-11 2011-06-15 阿里巴巴集团控股有限公司 Method and system for controlling communication window in instant messenger
CN102402577A (en) * 2010-09-09 2012-04-04 微软公司 Drag-able tabs
US20120131497A1 (en) * 2010-11-18 2012-05-24 Google Inc. Orthogonal Dragging on Scroll Bars

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
HTTP://WWW.VIPCN.COM: "《360浏览器2012官方 官网v4.1.0209最新版》", 《清风网站HTTP://WWW.VIPCN.COM/WANGLUORUANJIAN/ZHUYELIULAN/106278.HTML》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104516723A (en) * 2013-09-26 2015-04-15 联想(北京)有限公司 Widget processing method and device
CN104731486A (en) * 2013-12-19 2015-06-24 鸿合科技有限公司 Method and device for deleting page
CN104462490A (en) * 2014-12-22 2015-03-25 上海斐讯数据通信技术有限公司 Display method for list details

Similar Documents

Publication Publication Date Title
AU2006230578B2 (en) Method and system for transferring web browser data between web browsers
US7634715B2 (en) Effects applied to images in a browser
US8689123B2 (en) Application reporting in an application-selectable user interface
US7721197B2 (en) System and method of displaying content on small screen computing devices
US20100115430A1 (en) Universal content referencing, packaging, distribution system, and a tool for customizing web content
US8407576B1 (en) Situational web-based dashboard
US9262036B2 (en) Website image carousel generation
US20100063785A1 (en) Visualizing Relationships among Components Using Grouping Information
US20140075296A1 (en) Generating a Cover for a Section of a Digital Magazine
US8593666B2 (en) Method and system for printing a web page
US20110307772A1 (en) Scrolling in Large Hosted Data Set
US7886226B1 (en) Content based Ad display control
US9489349B2 (en) Page template selection for content presentation in a digital magazine
US20100064251A1 (en) Toggling window display state by screen in a multi-screened desktop environment
US20100079462A1 (en) method and system for generating and displaying an interactive dynamic view of bi-directional impact analysis results for multiply connected objects
WO2008042977A2 (en) Environment-constrained dynamic page layout
US9483444B2 (en) Dynamic layout engine for a digital magazine
CA2718119C (en) Techniques to modify a document using a latent transfer surface
WO2014081483A1 (en) Providing note based annotation of content in e-reader
US20090199127A1 (en) Previewing target display areas
US9483855B2 (en) Overlaying text in images for display to a user of a digital magazine
US20160232140A1 (en) Systems and methods for remote dashboard image generation
WO2002075602A3 (en) Web page color accuracy
CN102257489B (en) Visualization bidirectional grid and associated updates
US20100010893A1 (en) Video overlay advertisement creator

Legal Events

Date Code Title Description
C06 Publication
C10 Entry into substantive examination
C02 Deemed withdrawal of patent application after publication (patent law 2001)