CN106682046A - 用于多Tab页的处理方法和装置 - Google Patents

Abstract

本申请公开了一种用于多Tab页的处理方法和装置。该方法包括：在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；确定多个待显示的Tab页；计算多个待显示的Tab页总宽度；以及在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理。通过本申请，解决了相关技术在选择响应式布局的应用系统中，Tab页容易超出网页宽度的问题。

Description

用于多Tab页的处理方法和装置

技术领域

本申请涉及互联网领域，具体而言，涉及一种用于多Tab页的处理方法和装置。

背景技术

目前，在一些应用系统中，例如，绩效系统，使用了大量的标签栏(俗称Tab页)，使用标签栏可以对复杂的内容进行分组，从而将复杂的内容显示简单化以方便用户查看。然而，在绩效系统中，Tab页的数量是不确定的，并且数量还比较多。由于在许多绩效系统中，选择了响应式布局，响应式布局是指一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。由于各种终端大小不一样，所以网站的分辨率、像素等都不一样，增加了页面宽度的不确定性，从而Tab页容易超出网页宽度，导致用户体验度低。

针对相关技术在选择响应式布局的应用系统中，Tab页容易超出网页宽度的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种用于多Tab页的处理方法和装置，以解决相关技术在选择响应式布局的应用系统中，Tab页容易超出网页宽度的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种用于多Tab页的处理方法。该方法包括：在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；确定多个待显示的Tab页；计算多个待显示的Tab页总宽度；以及在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理。

进一步地，计算多个待显示的Tab页总宽度包括：分别确定多个待显示的Tab页中每个待显示的Tab页中字体的字体大小；分别确定多个待显示的Tab页中每个待显示的Tab页中的字数；根据每个待显示的Tab页中字体的字体大小和每个待显示的Tab页中的字数，计算每个待显示的Tab页总宽度；以及根据每个待显示的Tab页总宽度，计算多个待显示的Tab页总宽度。

进一步地，根据每个待显示的Tab页总宽度，计算多个待显示的Tab页总宽度包括：对每个待显示的Tab页总宽度添加预设宽度，得到每个待显示的Tab页实际宽度；以及将每个待显示的Tab页实际宽度进行相加，得到多个待显示的Tab页总宽度。

进一步地，在目标网页中确定Tab页可占据的最大宽度，得到目标宽度包括：在多个网页中确定目标网页；获取目标网页的网页宽度；获取Tab页在目标网页的网页宽度中可占据的最大比例；以及根据网页宽度和最大比例计算最大宽度，并将最大宽度作为目标宽度。

为了实现上述目的，根据本申请的另一方面，提供了一种用于多TAB页的处理装置。该装置包括：第一确定单元，用于在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；第二确定单元，用于确定多个待显示的Tab页；计算单元，用于计算多个待显示的Tab页总宽度；以及处理单元，用于在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理。

进一步地，计算单元包括：第一确定模块，用于分别确定多个待显示的Tab页中每个待显示的Tab页中字体的字体大小；第二确定模块，用于分别确定多个待显示的Tab页中每个待显示的Tab页中的字数；第一计算模块，用于根据每个待显示的Tab页中字体的字体大小和每个待显示的Tab页中的字数，计算每个待显示的Tab页总宽度；以及第二计算模块，用于根据每个待显示的Tab页总宽度，计算多个待显示的Tab页总宽度。

进一步地，第二计算模块还用于对每个待显示的Tab页总宽度添加预设宽度，得到每个待显示的Tab页实际宽度；以及将每个待显示的Tab页实际宽度进行相加，得到多个待显示的Tab页总宽度。

进一步地，第一确定单元包括：第三确定模块，用于在多个网页中确定目标网页；第一获取模块，用于获取目标网页的网页宽度；第二获取模块，用于获取Tab页在目标网页的网页宽度中可占据的最大比例；以及第三计算模块，用于根据网页宽度和最大比例计算最大宽度，并将最大宽度作为目标宽度。

通过本申请，采用以下步骤：在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；确定多个待显示的Tab页；计算多个待显示的Tab页总宽度；以及在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理，解决了相关技术在选择响应式布局的应用系统中，Tab页容易超出网页宽度的问题，通过对多个待显示的Tab页进行分页处理，进而达到了在选择响应式布局的应用系统中，Tab页自动适应网页宽度的效果。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的用于多Tab页的处理方法的流程图；以及

图2是根据本申请实施例的用于多Tab页的处理装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请的实施例，提供了一种用于多Tab页的处理方法。

图1是根据本申请实施例的用于多Tab页的处理方法的流程图。如图1所示，该方法包括以下步骤：

步骤S101，在目标网页中确定Tab页可占据的最大宽度，得到目标宽度。

在目标网页中获取可以用于确定Tab页可占据的最大宽度的信息，得到目标宽度，也即Tab页可占据的最大宽度。目标网页是终端上所有网页中包含待处理的Tab页的网页。显示目标网页的终端可以是电脑、手机或者平板电脑等带有显示屏幕的终端设备。不同的终端屏幕宽度不同，能够显示的信息量也不一样，在终端屏幕上显示的目标网页的宽度可以用像素作为单位，获取目标网页的窗口宽度信息以确定Tab页在不同终端上可占据的最大宽度。

可选地，在目标网页中确定Tab页可占据的最大宽度，得到目标宽度可以通过以下步骤实现：在多个网页中确定目标网页，通过获取目标网页的网页宽度；获取Tab页在目标网页的网页宽度中可占据的最大比例；以及根据网页宽度和最大比例计算最大宽度，并将最大宽度作为目标宽度。

当前系统中打开的页面可能为多个，首先确定出待处理Tab页宽度的目标网页，该目标网页可以是用户正在浏览的页面，也可以是其它网页。确定目标网页之后，可以是通过使用目标网页使用的脚本语言调用获取目标网页的网页宽度的语句得到网页宽度所占像素的信息，根据设计的展示效果确定的最大宽度在网页宽度中可占据的最大比例，计算出目标宽度占据的像素值大小。

具体地，获取目标网页的窗口宽度(即网页宽度)可以是通过调用目标网页使用的脚本语言的功能来实现，例如，目标网页是使用JavaScript脚本语言来编写的，可以通过调用语句“document.body.clientWidth”来获取目标网页的可见区域的宽度，或者通过调用语句“document.body.offsetWidth”来获取目标网页的包括边线的可见区域宽度，也可以通过调用语句“document.body.scrollWidth”来获取目标网页的正文宽度，根据待展示给用户的效果来选取在目标网页中获取的用于确定Tab页可占据的最大宽度的信息内容。例如，确定出某款手机上的目标网页的窗口宽度是600像素，某款电脑屏幕上的目标网页的窗口宽度是2500像素。本实施例对获取目标网页用于确定Tab页可占据的最大宽度的信息的方法和宽度的单位不做具体限制，根据目标网页所使用的脚本语言和显示目标网页的终端的具体情况而定。

获取用于确定目标宽度的信息可以是在抓取目标网页的窗口宽度之后，将目标网页的窗口宽度直接作为Tab页的显示可占据的最大宽度，但，通常为了显示的美观，预设选取目标网页的窗口宽度的一定比例，例如，取目标网页窗口宽度像素大小的90％作为目标宽度，在目标网页的窗口左边和右边分别留出目标网页窗口宽度的5％的空间，本实施例对目标宽度在目标网页的窗口宽度中占据的具体比例和左右分布比例不做具体限制。例如，确定出某款手机上的目标网页的窗口宽度是600像素，预设Tab页可占据的最大宽度在目标网页的窗口宽度中所占最大比例为80％，则确定出目标宽度为480像素。

步骤S102，确定多个待显示的Tab页。

确定待显示的Tab页的信息，待显示的Tab页可以是多个。待显示的Tab页的信息可以是待显示Tab页的个数、各个待显示Tab页的宽度等。获取各个待显示Tab页的宽度的方法可以是通过使用目标网页的脚本语言来提取。可选地，可以先确定待显示的Tab页的字体大小和字数来计算每个待显示的Tab页的宽度。

步骤S103，计算多个待显示的Tab页总宽度。

在确定出多个待显示的Tab页之后，计算出多个待显示的Tab页总宽度。确定出多个待显示的Tab页的信息可以确定出各个待显示的Tab页宽度，将各个待显示的Tab页宽度进行叠加，可以得到多个待显示的Tab页的总宽度。

可选地，在本申请实施例提供的用于多Tab页的处理方法中，计算多个待显示的Tab页总宽度包括：分别确定多个待显示的Tab页中每个待显示的Tab页中字体的字体大小；分别确定多个待显示的Tab页中每个待显示的Tab页中的字数；根据每个待显示的Tab页中字体的字体大小和每个待显示的Tab页中的字数，计算每个待显示的Tab页总宽度；以及根据每个待显示的Tab页总宽度，计算多个待显示的Tab页总宽度。

具体地，获取待显示的Tab页的字体大小和字数也可以通过使用目标网页的脚本语言来提取，具体地，可以通过获取Tab页的字体种类、字体大小和字数，通过Tab页的字体种类和字体大小查询出对应的单个字体像素宽度，再与字数相乘得到待显示的Tab页的像素宽度，可以通过这种方式确定出多个待显示的Tab页的宽度信息。例如，某个Tab页的字体为宋体，字体大小为五号，在终端中单字所占的像素宽度为15像素，该Tab页的字数为8个字，则该Tab页在终端中所占的像素宽度为120像素。在确定出各个待显示的Tab页宽度之后，将各个待显示的Tab页宽度进行叠加，可以得到多个待显示的Tab页的总宽度。

可选地，在本申请实施例提供的用于多Tab页的处理方法中，根据每个待显示的Tab页总宽度，计算多个待显示的Tab页总宽度包括：对每个待显示的Tab页总宽度添加预设宽度，得到每个待显示的Tab页实际宽度；以及将每个待显示的Tab页实际宽度进行相加，得到多个待显示的Tab页总宽度。

为了显示的美观，提升用户体验度，可以在每个待显示的Tab页的总宽度增加预设宽度，使得每个Tab页两端留有空白。增加预设宽度可以是按照预设增加比例增加每个待显示的Tab页的总宽度，得到每个待显示的Tab页实际宽度，也即每个待显示的Tab页的增加宽度可能不相同，例如，对每个待显示的Tab页的总宽度增加30％，某待显示的Tab页的总宽度是100像素，则该待显示的Tab页实际宽度是130像素。增加预设宽度也可以是直接在每个待显示的Tab页的总宽度上增加预设宽度，例如，某待显示的Tab页的总宽度是100像素，所有待显示的Tab页的增加预设宽度是20像素，则该待显示的Tab页实际宽度是120像素。在待显示的Tab页中，文字可以是在Tab页的中央，也可以是按预设显示比例显示在Tab页中。

步骤S104，在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理。

当目标宽度小于多个待显示的Tab页总宽度时，根据目标宽度对多个待显示的Tab页进行分页处理。例如，某手机的目标宽度是480像素，多个待显示的Tab页的各个宽度分别是80像素、120像素、90像素、150像素、70像素、……，Tab页宽度为80像素、120像素、90像素和150像素等多个待显示的Tab页的总宽度为440像素，目标宽度大于多个待显示的Tab页总宽度，不对多个待显示的Tab页进行分页处理；Tab页宽度为80像素、120像素、90像素、150像素和70像素的多个待显示的Tab页总宽度为510像素，目标宽度小于多个待显示的Tab页总宽度，对多个待显示的Tab页进行分页处理，不在目标网页中显示像素为70像素的Tab页及其它Tab页。

通过本申请实施例提供的用于多Tab页的处理方法，能够根据不同的环境，例如，终端屏幕能够显示的宽度的不同，网页在屏幕中所占的比例的不同，来对待显示的Tab页进行分页处理，呈现出更好的展示效果。

本申请实施例提供的用于多Tab页的处理方法，通过在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；确定多个待显示的Tab页；计算多个待显示的Tab页总宽度；以及在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理，解决了相关技术在选择响应式布局的应用系统中，Tab页容易超出网页宽度的问题，通过对多个待显示的Tab页进行分页处理，进而达到了在选择响应式布局的应用系统中，Tab页自动适应网页宽度的效果。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种用于多Tab页的处理装置，需要说明的是，本申请实施例的用于多Tab页的处理装置可以用于执行本申请实施例所提供的用于多Tab页的处理方法。以下对本申请实施例提供的用于多Tab页的处理装置进行介绍。

图2是根据本申请实施例的用于多Tab页的处理装置的示意图。如图2所示，该装置包括：第一确定单元10，第二确定单元20，计算单元30和处理单元40。

第一确定单元10用于在目标网页中确定Tab页可占据的最大宽度，得到目标宽度。

第二确定单元20用于确定多个待显示的Tab页。

计算单元30用于计算多个待显示的Tab页总宽度。

处理单元40用于在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理。

本申请实施例提供的用于多Tab页的处理装置，通过第一确定单元10在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；第二确定单元20确定多个待显示的Tab页；计算单元30计算多个待显示的Tab页总宽度；处理单元40在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理，解决了相关技术在选择响应式布局的应用系统中，Tab页容易超出网页宽度的问题，进而达到了在选择响应式布局的应用系统中，Tab页自动适应网页宽度的效果。

可选地，在本申请实施例提供的用于多Tab页的处理装置中，计算单元30包括：第一确定模块，用于分别确定多个待显示的Tab页中每个待显示的Tab页中字体的字体大小；第二确定模块，用于分别确定多个待显示的Tab页中每个待显示的Tab页中的字数；第一计算模块，用于根据每个待显示的Tab页中字体的字体大小和每个待显示的Tab页中的字数，计算每个待显示的Tab页总宽度；以及第二计算模块，用于根据每个待显示的Tab页总宽度，计算多个待显示的Tab页总宽度。

可选地，在本申请实施例提供的用于多Tab页的处理装置中，第二计算模块还用于对每个待显示的Tab页总宽度添加预设宽度，得到每个待显示的Tab页实际宽度；以及将每个待显示的Tab页实际宽度进行相加，得到多个待显示的Tab页总宽度。

可选地，在本申请实施例提供的用于多Tab页的处理装置中，第一确定单元10包括：第三确定模块，用于在多个网页中确定目标网页；第一获取模块，用于获取目标网页的网页宽度；第二获取模块，用于获取Tab页在目标网页的网页宽度中可占据的最大比例；以及第三计算模块，用于根据网页宽度和最大比例计算最大宽度，并将最大宽度作为目标宽度。

所述用于多Tab页的处理装置包括处理器和存储器，上述第一确定单元，第二确定单元，计算单元和处理单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元实现相应功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数进行多Tab页的分页处理。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品的实施例，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；确定多个待显示的Tab页；计算多个待显示的Tab页总宽度；以及在目标宽度小于多个待显示的Tab页总宽度时，对多个待显示的Tab页进行分页处理。

需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (8)

1.一种用于多Tab页的处理方法，其特征在于，包括：

在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；

确定多个待显示的Tab页；

计算所述多个待显示的Tab页总宽度；以及

在所述目标宽度小于所述多个待显示的Tab页总宽度时，对所述多个待显示的Tab页进行分页处理。

2.根据权利要求1所述的方法，其特征在于，计算所述多个待显示的Tab页总宽度包括：

分别确定所述多个待显示的Tab页中每个待显示的Tab页中字体的字体大小；

分别确定所述多个待显示的Tab页中每个待显示的Tab页中的字数；

根据所述每个待显示的Tab页中字体的字体大小和所述每个待显示的Tab页中的字数，计算所述每个待显示的Tab页总宽度；以及

根据所述每个待显示的Tab页总宽度，计算所述多个待显示的Tab页总宽度。

3.根据权利要求2所述的方法，其特征在于，根据所述每个待显示的Tab页总宽度，计算所述多个待显示的Tab页总宽度包括：

对所述每个待显示的Tab页总宽度添加预设宽度，得到所述每个待显示的Tab页实际宽度；以及

将所述每个待显示的Tab页实际宽度进行相加，得到所述多个待显示的Tab页总宽度。

4.根据权利要求1所述的方法，其特征在于，在目标网页中确定Tab页可占据的最大宽度，得到目标宽度包括：

在多个网页中确定所述目标网页；

获取所述目标网页的网页宽度；

获取Tab页在所述目标网页的网页宽度中可占据的最大比例；以及

根据所述网页宽度和所述最大比例计算所述最大宽度，并将所述最大宽度作为所述目标宽度。

5.一种用于多Tab页的处理装置，其特征在于，包括：

第一确定单元，用于在目标网页中确定Tab页可占据的最大宽度，得到目标宽度；

第二确定单元，用于确定多个待显示的Tab页；

计算单元，用于计算所述多个待显示的Tab页总宽度；以及

处理单元，用于在所述目标宽度小于所述多个待显示的Tab页总宽度时，对所述多个待显示的Tab页进行分页处理。

6.根据权利要求5所述的装置，其特征在于，所述计算单元包括：

第一确定模块，用于分别确定所述多个待显示的Tab页中每个待显示的Tab页中字体的字体大小；

第二确定模块，用于分别确定所述多个待显示的Tab页中每个待显示的Tab页中的字数；

第一计算模块，用于根据所述每个待显示的Tab页中字体的字体大小和所述每个待显示的Tab页中的字数，计算所述每个待显示的Tab页总宽度；以及

第二计算模块，用于根据所述每个待显示的Tab页总宽度，计算所述多个待显示的Tab页总宽度。

7.根据权利要求6所述的装置，其特征在于，所述第二计算模块还用于对所述每个待显示的Tab页总宽度添加预设宽度，得到所述每个待显示的Tab页实际宽度；以及将所述每个待显示的Tab页实际宽度进行相加，得到所述多个待显示的Tab页总宽度。

8.根据权利要求5所述的装置，其特征在于，所述第一确定单元包括：

第三确定模块，用于在多个网页中确定所述目标网页；

第一获取模块，用于获取所述目标网页的网页宽度；

第二获取模块，用于获取Tab页在所述目标网页的网页宽度中可占据的最大比例；以及

第三计算模块，用于根据所述网页宽度和所述最大比例计算所述最大宽度，并将所述最大宽度作为所述目标宽度。