CN106372070A

CN106372070A - 一种图形界面中数据的展示方法及装置

Info

Publication number: CN106372070A
Application number: CN201510427596.8A
Authority: CN
Inventors: 张鑫旭
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2015-07-20
Filing date: 2015-07-20
Publication date: 2017-02-01
Anticipated expiration: 2035-07-20
Also published as: CN106372070B

Abstract

本发明公开了一种图形界面中数据的展示方法及装置，其中该方法包括:通过图形界面中预设的选项卡控件获取触发指令；根据触发指令，获取选项卡控件对应的选项卡容器内预设的文本框；将光标的焦点定位在文本框上；基于被定位的文本框，将选项卡容器定位到预设视图区域，并在预设视图区域对选项卡容器中的数据进行展示。本发明实施例通过对选项卡控件的触发，将光标焦点定位在文本框上，文本框被定位时，如果其所在的选项卡容器在视图区域之外，则浏览器可以让其出现在浏览器视图区域中，并对选项卡容器中的数据进行展示，从而可在浏览器较低的版本浏览器下支持选项卡切换，提高兼容性。

Description

一种图形界面中数据的展示方法及装置

技术领域

本发明属于通信技术领域，尤其涉及一种图形界面中数据的展示方法及装置。

背景技术

windows里，可通过多个标签页来区分不同选项功能的窗口，用户点击选项卡，可将当前展示界面切换到对应的标签页。现有技术中大多是使用层叠样式表(CSS，Cascading Style Sheets)来实现选项卡切换效果的。CSS是能够真正做到网页表现与内容分离的一种样式设计语言，其网页表现可以通过超文本标记语言(HTML，Hyper Text Markup Language)部分来确定，而内容则是由CSS部分来实现。其中，CSS可以通过CSS选择器来对HTML页面中的元素实现一对一，一对多或者多对一的控制。

以单选框:checked伪类选择技术为例，在现有方案中，一般都会采用CSS3高级选择器来实现，比如在HTML部分，可以使用标签(label)作为选项卡点击按钮，切换的容器标签前面设置单选框(radio)；而在CSS部分，通过:checked伪类和CSS的兄弟选择器，设置容器标签(div)为不显示(display:none)，被选中的单选框相邻的div容器标签显示(display:block)。由于这里的单选框的id(身份标识号)值和选项卡label元素的for属性值相等，因此，点击选项卡，会让对应的单选框选中，触发:checked伪类，从而控制对应的容器元素显示与隐藏，实现选项卡切换效果。

该技术主要是基于:checked伪类选择器实现选项卡切换，但是由于:checked所使用的选择器是CSS3高级选择器，需要IE 9以及以上版本浏览器才支持，因此该技术目前无法应用在传统网页上，只能应用在移动端或者对浏览器兼容性要求不高的项目。

发明内容

本发明的目的在于提供一种图形界面中数据的展示方法及装置，旨在在浏览器较低的版本浏览器下支持选项卡切换，提高兼容性。

为解决上述技术问题，本发明实施例提供以下技术方案：

一种图形界面中数据的展示方法，其中包括：

通过图形界面中预设的选项卡控件获取触发指令；

根据所述触发指令，获取所述选项卡控件对应的选项卡容器内预设的文本框；

将光标的焦点定位在所述文本框上；

基于被定位的文本框，将所述选项卡容器定位到预设视图区域，并在所述预设视图区域对所述选项卡容器中的数据进行展示。

为解决上述技术问题，本发明实施例还提供以下技术方案：

一种图形界面中数据的展示装置，其中包括：

指令获取单元，用于通过图形界面中预设的选项卡控件获取触发指令；

文本框获取单元，用于根据所述触发指令，获取所述选项卡控件对应的选项卡容器内预设的文本框；

焦点定位单元，用于将光标的焦点定位在所述文本框上；

容器定位单元，用于基于被定位的文本框，将所述选项卡容器定位到预设视图区域；

展示单元，用于在所述预设视图区域对所述选项卡容器中的数据进行展示。

相对于现有技术，本实施例，通过对选项卡控件的触发，将光标焦点定位在文本框上，文本框被定位时，如果其所在的选项卡容器在视图区域之外，则浏览器可以通过改变选项卡容器的滚动位置让其出现在浏览器视图区域中，并对选项卡容器中的数据进行展示，从而形成了选项卡切换效果；相对于基于:checked伪类选择器实现选项卡切换的方式，本实施例可在浏览器较低的版本浏览器下支持选项卡切换，提高兼容性。

附图说明

下面结合附图，通过对本发明的具体实施方式详细描述，将使本发明的技术方案及其它有益效果显而易见。

图1是本发明第一实施例提供的图形界面中数据的展示方法的流程示意图；

图2a为本发明第二实施例提供的图形界面中数据的展示方法的流程示意图；

图2b和图2c为本发明第二实施例的场景示意；

图3为本发明第三实施例的场景示意；

图4为本发明第四实施例提供的图形界面中数据的展示装置的结构示意图。

具体实施方式

请参照图式，其中相同的组件符号代表相同的组件，本发明的原理是以实施在一适当的运算环境中来举例说明。以下的说明是基于所例示的本发明具体实施例，其不应被视为限制本发明未在此详述的其它具体实施例。

在以下的说明中，本发明的具体实施例将参考由一部或多部计算机所执行的步骤及符号来说明，除非另有述明。因此，这些步骤及操作将有数次提到由计算机执行，本文所指的计算机执行包括了由代表了以一结构化型式中的数据的电子信号的计算机处理单元的操作。此操作转换该数据或将其维持在该计算机的内存系统中的位置处，其可重新配置或另外以本领域测试人员所熟知的方式来改变该计算机的运作。该数据所维持的数据结构为该内存的实体位置，其具有由该数据格式所定义的特定特性。但是，本发明原理以上述文字来说明，其并不代表为一种限制，本领域测试人员将可了解到以下所述的多种步骤及操作亦可实施在硬件当中。

本文所使用的术语「模块」可看做为在该运算系统上执行的软件对象。本文所述的不同组件、模块、引擎及服务可看做为在该运算系统上的实施对象。而本文所述的装置及方法优选的以软件的方式进行实施，当然也可在硬件上进行实施，均在本发明保护范围之内。

第一实施例

在该实施例中，图形界面中数据的展示方法可集成在终端上运行，该终端可以为笔记型计算机、平板PC(Personal Computer)、手机等具备储存单元并安装有微处理器而具有运算能力的终端机构成。

一种图形界面中数据的展示方法，包括：通过图形界面中预设的选项卡控件获取触发指令；根据触发指令，获取选项卡控件对应的选项卡容器内预设的文本框；将光标的焦点定位在文本框上；基于被定位的文本框，将选项卡容器定位到预设视图区域，并在预设视图区域对选项卡容器中的数据进行展示。

如图1所示，该图形界面中数据的展示方法，具体流程如下：

在步骤S101中，通过图形界面中预设的选项卡控件获取触发指令。

其中，该选项卡控件可具体为一标签(label)元素，该触发指令可以由用户通过点击该label元素所触发。

可以理解的是，当图形界面中设置有多个选项卡控件，则该触发指令可以用于根据对选项卡控件的触发，进行选项卡切换；对应的，每一选项卡控件对应一选项卡容器。

进一步的，通过图形界面中预设的选项卡控件获取触发指令之前，还可以包括：

(1)在图形界面中设置多个结构背景元素(如div元素)，并将这些结构背景元素确定为选项卡容器；

其中，选项卡容器是指选项卡对应的内容模块，可以采用div元素进行设计；比如，每个选项卡容器利用overflow:hidden(溢出隐藏)属性，被隐藏放置在一个大容器(也可以为div元素)中。其中，overflow为CSS中设置当对象的内容超过其指定高度及宽度时对其进行隐藏。

(2)在每一所述选项卡容器内设置一文本框；

(3)在所述图形界面中设置标签元素；

(4)将标签元素对应绑定到文本框，并将标签元素确定为预设的选项卡控件。

比如，在图形界面中放置了N个选项卡容器(div元素)，则在图形界面中放置N个label元素(N为正整数)，在每一选项卡容器内放置一个文本框input(如单行文本框或多行文本框)，将该label元素作为选项卡控件以接收用户的触发指令。

其中，将label元素绑定到文本框可以具体指，label元素的for属性值对应的是单行文本框或多行文本框，即文本框的ID(身份标识号)值与label元素的for属性值一一对应。

在这样的情况下，基于HTML的一个特性(以下简称特性a)，当点击一个label元素，如果其for属性值对应的是单行文本框或多行文本框，则这些文本框会被focus(焦点定位)。

当然的，在设置好结构背景元素、标签元素以及文本框后，还可以进一步分别对其位置和尺寸进行设置，比如限定选项卡容器的高度等于视图区域的高度等等。可以理解的是，其位置和尺寸可以根据具体的应用场景进行设置，此处不作具体限定。

在步骤S102中，根据所述触发指令，获取所述选项卡控件对应的选项卡容器内预设的文本框。

在步骤S103中，将光标的焦点定位在所述文本框上。

其中，所述步骤S102与步骤S103可具体为：

基于前述的HTML的特性a，当点击label元素，如果其for属性值对应的是文本框，则这些文本框会被定位。由此，可根据该触发指令，将光标的焦点定位在文本框上。

在步骤S104中，基于被定位的文本框，将所述选项卡容器定位到预设视图区域，并在所述预设视图区域对所述选项卡容器中的数据进行展示。

可以理解的是，基于被定位的文本框，将对应选项卡容器定位到预设视图区域可以依照以下HTML特性(以下简称特性b)进行实现：

当浏览器中某一元素在被focus的时候，如果其在对应容器的视图区域之外，浏览器会尝试通过改变容器的滚动位置让其出现在浏览器视图区域中。进而，可以在所述预设视图区域对选项卡容器中的数据进行展示，实现了选项卡容器内容的显示。

当选项卡设置有多个时，本实施例利用前述HTML特性a和特性b可实现选项卡切换效果。可具体的，比如：

选项卡控件是label元素，每个选项卡容器(即切换容器)内部放置有一个input单行文本框，其id值与label的for属性值一一对应，每个选项卡容器被overflow:hidden隐藏在一个大容器中。于是，当用于点击label按钮的时候，对应选项卡容器内部的单行文本框被focus，从而该选项卡容器被定位到最顶层容器的视区范围内，形成了选项卡切换效果。

由上述可知，本实施例提供的图形界面中数据的展示方法，通过对选项卡控件的触发，将光标焦点定位在文本框上，文本框被定位时，如果其所在的选项卡容器在视图区域之外，则浏览器可以通过改变选项卡容器的滚动位置让其出现在浏览器视图区域中，并对选项卡容器中的数据进行展示，从而形成了选项卡切换效果；相对于基于:checked伪类选择器实现选项卡切换的方式，本实施例可在浏览器较低的版本浏览器下支持选项卡切换，提高兼容性。

第二实施例

根据第一实施例所描述的方法，以下将举例作进一步详细说明。

该实施例中，图形界面中数据的展示方法可用于：在图形界面中，根据用户发送的切换指令完成选项卡切换的效果，从而将选项卡对应的内容模块内的数据进行展示。请参阅图2a，为本发明第二实施例提供的图形界面中数据的展示方法的流程示意，具体流程如下：

在步骤S201中，在图形界面中设置多个结构背景元素，并将结构背景元素确定为选项卡容器。

在步骤S202中，根据预设的排列方式，确定对选项卡容器进行垂直排列。

在步骤S203中，在选项卡容器内设置一文本框，在图形界面中设置标签元素。

在步骤S204中，将标签元素绑定到文本框，并将标签元素确定为预设的选项卡控件。

可以理解的是，步骤S201和步骤S202为对选项卡容器的设置，步骤S203和步骤S204为对标签元素以及文本框的设置。

其中，选项卡容器是指选项卡对应的内容模块，可以采用div元素进行设计；另外，由于div元素默认为垂直排列，因此在设置选项卡容器时可将该排列方式进行预先设定。

在多个选项卡容器(div元素)设置后，选项卡容器按照预先设置的排列方式进行垂直排列；在图形界面中放置N个label元素(N为正整数)，在每一选项卡容器内放置一个文本框input(如单行文本框或多行文本框)，将该label元素作为选项卡控件以接收用户的触发指令。

对于每一选项卡容器，放置文本框后，将label元素与该文本框进行一一绑定，即设置label元素的for属性值对应该文本框的ID值。

比如，可具体的，图形界面中设置了两个选项卡控件(选项卡1和选项卡2)，以供用户进行选择切换，HTML部分可设计如下：

</div>

其中，label标签对应的是点击的选项卡按钮(即选项卡控件)，并且，在每个选项卡容器前面插入一个input单行文本框，该单行文本框id值与label标签的for属性值正好一致，以形成绑定、关联效果。

在步骤S205中，对选项卡容器内的文本框的原始样式进行去除，并对文本框的尺寸进行限定。

在步骤S206中，对选项卡容器内的文本框进行定位并存储位置信息。

可以理解的是，步骤S205和步骤S206是在选项卡容器中放置了文本框后，对进行其尺寸和位置进行限定。

基于前述对HTML部分的设计，CSS部分可具体设计如下：

.box{height:200px；overflow:hidden；}

.box>div{height:100％；position:relative；}

.box input{

position:absolute；top:0；

height:100％；width:1px；

border:0；padding:0；margin:0；

clip:rect(0 0 0 0)；

}

其中，(一)在.box设计部分

“height:200px；overflow:hidden；”是指限定大容器的视图区域的高度，同时，限定的高度以外的内容不可见。容易想到的是，这里的200像素高是示意值，不同的项目可以有不同的设计，高度值会不一样，此处仅为举例。

由于该实施例中选项卡容器.box>div是垂直排列，因此在限定选项卡容器高度时，可设计“height:100％；position:relative”，指限定每个选项卡容器.box>div的高度正好和视图区域的高度匹配，这样当选项卡容器focus定位的时候，视图区域正好显示对应选项卡容器内的内容，没有溢出或者空白。

(二)在input单行文本框设计部分

“position:absolute”是指让文本框绝对定位，不会影响正常的布局。其中，“top:0；”是对文本框上下定位的位置信息，并且，文本框左右定位在选项卡容器内的任意地方，此处不作限定。

“height:100％；width:1px；”是文本框尺寸的限定，高度上设定所述文本框的高度等于所述选项卡容器的高度；宽度上设定其大于0px，由于在一些低版本IE浏览器下面，如果width值是0文本框无法被focus，此处以“width:1px；”为例，对其实现不构成限定。

“border:0；padding:0；margin:0；”是去掉文本框的原始的样式，以免对定位准确性造成影响。

“clip:rect(0 0 0 0)；”为CSS的剪裁属性，可以让文本框不可见，即对选项卡容器内的文本框进行隐藏处理，从根本上避免此辅助文本框对正常布局的影响。

在步骤S207中，通过图形界面中设置的两个选项卡控件获取选择指令。

在步骤S208中，根据选择指令，获取对应的选项卡控件所属的选项卡容器内的文本框，并将光标的焦点定位在所述文本框上。

在步骤S209中，获取被定位的文本框的位置信息，基于该位置信息，将对应的选项卡容器定位到预设视图区域。

在步骤S210中，在预设视图区域对选项卡容器中的数据进行展示。

可以理解的是，步骤S207至步骤S210是基于步骤S201至步骤S206的设计进行的场景应用。

如图2b所示，当用户点击选项卡1按钮的时候，对应选项卡容器1内部的单行文本框1被focus，从而该选项卡容器1被定位到最顶层容器的视区范围内，如图2c所示，当用户点击选项卡2按钮的时候，对应选项卡容器2内部的单行文本框2被focus，从而该选项卡容器2被定位到最顶层容器的视区范围内，形成了选项卡1和选项卡2切换效果。

可以理解的是，步骤S207至步骤S210与第一实施例中步骤S101至步骤S104的内容相似，可根据相关内容进行具体实现，此处不再赘述。

第三实施例

区别于第二实施例，本实施例主要针对将选项卡容器(即div元素)进行水平排列的场景进行分析说明。

首先，在图形界面中设置两个div元素，并将其确定为选项卡容器，其中在图形界面设置有选项卡1(label元素)，在选项卡容器1内设置文本框1，并将选项卡1绑定到文本框1；在图形界面设置有选项卡2(label元素)，在选项卡容器2内设置文本框2，并将选项卡2绑定到文本框2。其后，对HTML部分进行设计如下：

</div>

其中，HTML部分和第二实施例中HTML部分的设计是一致的，label标签对应的是点击的选项卡按钮(即选项卡控件)，并且，在每个选项卡容器前面插入一个input单行文本框，该单行文本框id值与label标签的for属性值正好一致，以形成绑定、关联效果。

由于div元素默认为垂直排列的，因此，若将div元素进行水平排列，还需要一些额外的处理；同时，Chrome浏览器下的有光标focus居中定位特性，因此，也需要一些其他技术处理。因此，CSS部分可进行如下设计：

.box{white-space:nowrap；position:relative；overflow:hidden；}

.box>div{

display:inline-block；position:relative；

*display:inline；*zoom:1；

}

.box input{

position:absolute；left:0；

width:50％；padding:0 0 0 50％；

border:0；margin:0；

clip:rect(0 0 0 0)；

}

其中，父级.box中的“white-space:nowrap；”以及选项卡内容模块.box>div中的“display:inline-block；”是实现水平排列效果的。

对于文本框input，若div元素是垂直排列的，则设定所述文本框的高度等于所述选项卡容器的高度；该实施例div元素使用水平排列，因此设定所述文本框的宽度等于所述选项卡容器的宽度。但是，Chrome/Opera浏览器下input被focus的时候，光标是被定位在视图区域容器的中间的，因此，还需要设定“width:50％；padding:0 0 0 50％；”，即对光标位置做50％的偏移。

如图3所示，选项卡容器1与选项卡容器2水平排列，当用户点击选项卡1按钮的时候，对应选项卡容器1内部的单行文本框1被focus，从而该选项卡容器1被定位到最顶层容器的视区范围内。

可以理解的是，当用户点击选项卡2按钮的时候，对应选项卡容器2内部的单行文本框2被focus，从而该选项卡容器2被定位到最顶层容器的视区范围内，形成了选项卡1和选项卡2切换效果。

可以理解的是，在该实施例中没有详述的部分，可以参见上文针对图形界面中数据的展示方法的详细描述，例如，该实施例中其他未描述的CSS代码的作用和上述实施例一致，可参考上述实施例相关内容，此处不再赘述。

第四实施例

为便于更好的实施本发明实施例提供的图形界面中数据的展示方法，本发明实施例还提供一种基于上述图形界面中数据的展示方法的装置。其中名词的含义与上述图形界面中数据的展示的方法中相同，具体实现细节可以参考方法实施例中的说明。

如图4所示，本发明所述图形界面中数据的展示装置可以包括指令获取单元401、文本框获取单元402、焦点定位单元403、容器定位单元404以及展示单元405。

其中所述指令获取单元，用于通过图形界面中预设的选项卡控件获取触发指令；

进一步的，所述装置还可以包括：设置单元，用于在图形界面中设置多个结构背景元素；第一确定单元，用于将所述结构背景元素确定为选项卡容器；第二确定单元，用于根据预设的排列方式，确定对所述选项卡容器进行水平排列或垂直排列

所述设置单元，还可以用于在所述选项卡容器内设置一文本框，在所述图形界面中设置标签元素；所述第一确定单元，还可以用于将所述标签元素对应绑定到所述文本框，并将所述标签元素确定为预设的选项卡控件。

当然的，在设置好结构背景元素、标签元素以及文本框后，还可以进一步分别对其位置和尺寸进行设置，比如限定选项卡容器的高度等于视图区域的高度等等。可以理解的是，其位置和尺寸可以根据具体的应用场景进行设置。

比如：可具体的，所述装置还可以包括：尺寸限定单元，用于对选项卡容器内的文本框的原始样式进行去除，并对所述文本框的尺寸进行限定；还可以用于限定可视区域的高度等于所述选项卡容器的高度。

进一步的，所述尺寸限定单元可以包括：

第一限定子单元，用于当确定出对所述选项卡容器进行垂直排列时，设定所述文本框的高度等于所述选项卡容器的高度；

第二限定子单元，用于当确定出对所述选项卡容器进行水平排列时，设定所述文本框的宽度等于所述选项卡容器的宽度。

优选的，所述装置还可以包括：处理单元，用于对选项卡容器内的文本框进行隐藏处理。

更进一步的，所述装置还可以包括：文本框定位单元，用于对选项卡容器内的文本框进行定位并存储位置信息；

则所述容器定位单元404，用于获取被定位的文本框的位置信息，基于所述位置信息，将对应的选项卡容器定位到预设视图区域。

文本框获取单元，用于根据所述触发指令，获取所述选项卡控件对应的选项卡容器内预设的文本框；焦点定位单元，用于将光标的焦点定位在所述文本框上；

容器定位单元，用于基于被定位的文本框，将所述选项卡容器定位到预设视图区域；展示单元，用于在所述预设视图区域对所述选项卡容器中的数据进行展示。

具体实施时，以上各个单元可以作为独立的实体来实现，也可以进行任意组合，作为同一或若干个实体来实现，以上各个单元的具体实施可参见前面的方法实施例，在此不再赘述。

由上述可知，本实施例提供的图形界面中数据的展示装置，通过对选项卡控件的触发，将光标焦点定位在文本框上，文本框被定位时，如果其所在的选项卡容器在视图区域之外，则浏览器可以通过改变选项卡容器的滚动位置让其出现在浏览器视图区域中，并对选项卡容器中的数据进行展示，从而形成了选项卡切换效果；相对于基于:checked伪类选择器实现选项卡切换的方式，本实施例可在浏览器较低的版本浏览器下支持选项卡切换，提高兼容性。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见上文针对图形界面中数据的展示方法的详细描述，此处不再赘述。

本发明实施例提供的所述图形界面中数据的展示装置，譬如为计算机、平板电脑、具有触摸功能的手机等等，所述图形界面中数据的展示装置与上文实施例中的图形界面中数据的展示方法属于同一构思，在所述图形界面中数据的展示装置上可以运行所述图形界面中数据的展示方法实施例中提供的任一方法，其具体实现过程详见所述图形界面中数据的展示方法实施例，此处不再赘述。

需要说明的是，对本发明所述图形界面中数据的展示方法而言，本领域普通测试人员可以理解实现本发明实施例所述图形界面中数据的展示方法的全部或部分流程，是可以通过计算机程序来控制相关的硬件来完成，所述计算机程序可存储于一计算机可读取存储介质中，如存储在终端的存储器中，并被该终端内的至少一个处理器执行，在执行过程中可包括如所述图形界面中数据的展示方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)等。

对本发明实施例的所述图形界面中数据的展示装置而言，其各功能模块可以集成在一个处理芯片中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中，所述存储介质譬如为只读存储器，磁盘或光盘等。

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

Claims

1.一种图形界面中数据的展示方法，其特征在于，包括：

通过图形界面中预设的选项卡控件获取触发指令；

将光标的焦点定位在所述文本框上；

2.根据权利要求1所述的图形界面中数据的展示方法，其特征在于，所述通过图形界面中预设的选项卡控件获取触发指令之前，还包括：

在图形界面中设置多个结构背景元素，并将所述结构背景元素确定为选项卡容器；

根据预设的排列方式，确定对所述选项卡容器进行水平排列或垂直排列。

3.根据权利要求2所述的图形界面中数据的展示方法，其特征在于，所述通过图形界面中预设的选项卡控件获取触发指令之前，还包括：

在所述选项卡容器内设置一文本框；

在所述图形界面中设置标签元素；

将所述标签元素对应绑定到所述文本框，并将所述标签元素确定为预设的选项卡控件。

4.根据权利要求3所述的图形界面中数据的展示方法，其特征在于，所述在所述选项卡容器内设置一文本框之后，还包括：

对选项卡容器内的文本框的原始样式进行去除，并对所述文本框的尺寸进行限定。

5.根据权利要求4所述的图形界面中数据的展示方法，其特征在于，所述对所述文本框的尺寸进行限定包括：

当确定出对所述选项卡容器进行垂直排列时，设定所述文本框的高度等于所述选项卡容器的高度；

当确定出对所述选项卡容器进行水平排列时，设定所述文本框的宽度等于所述选项卡容器的宽度。

6.根据权利要求2至5任一项所述的图形界面中数据的展示方法，其特征在于，所述在所述选项卡容器内设置一文本框之后，还包括：

对选项卡容器内的文本框进行定位并存储位置信息；

则所述基于被定位的文本框，将所述选项卡容器定位到预设视图区域，包括：获取被定位的文本框的位置信息；基于所述位置信息，将对应的选项卡容器定位到预设视图区域。

7.根据权利要求2至5任一项所述的图形界面中数据的展示方法，其特征在于，所述在所述选项卡容器内设置一文本框之后，还包括：

对选项卡容器内的文本框进行隐藏处理。

8.根据权利要求3至5任一项所述的图形界面中数据的展示方法，其特征在于，所述在图形界面中设置多个结构背景元素，并将所述结构背景元素确定为选项卡容器之后，还包括：

限定选项卡容器的高度等于所述视图区域的高度。

9.一种图形界面中数据的展示装置，其特征在于，包括：

焦点定位单元，用于将光标的焦点定位在所述文本框上；

10.根据权利要求9所述的图形界面中数据的展示装置，其特征在于，所述装置还包括：

设置单元，用于在图形界面中设置多个结构背景元素；

第一确定单元，用于将所述结构背景元素确定为选项卡容器；

第二确定单元，用于根据预设的排列方式，确定对所述选项卡容器进行水平排列或垂直排列。

11.根据权利要求10所述的图形界面中数据的展示装置，其特征在于，所述设置单元，还用于在所述选项卡容器内设置一文本框，在所述图形界面中设置标签元素；

所述第一确定单元，还用于将所述标签元素对应绑定到所述文本框，并将所述标签元素确定为预设的选项卡控件。

12.根据权利要求11所述的图形界面中数据的展示装置，其特征在于，所述装置还包括：

尺寸限定单元，用于对选项卡容器内的文本框的原始样式进行去除，并对所述文本框的尺寸进行限定。

13.根据权利要求12所述的图形界面中数据的展示装置，其特征在于，所述尺寸限定单元包括：

14.根据权利要求10至13任一项所述的图形界面中数据的展示装置，其特征在于，所述装置还包括：

文本框定位单元，用于对选项卡容器内的文本框进行定位并存储位置信息；

则所述容器定位单元，用于获取被定位的文本框的位置信息，基于所述位置信息，将对应的选项卡容器定位到预设视图区域。

15.根据权利要求10至13任一项所述的图形界面中数据的展示装置，其特征在于，所述装置还包括：

处理单元，用于对选项卡容器内的文本框进行隐藏处理。

16.根据权利要求12或13所述的图形界面中数据的展示装置，其特征在于，所述尺寸限定单元，还用于限定所述选项卡容器的高度等于所述视图区域的高度。