CN108363814A - 标签设置方法、服务器及标签设置系统 - Google Patents

Abstract

本发明提出一种标签设置方法、服务器及标签设置系统。本发明设置一标签显示数量阈值和末标签隐藏值，根据标签显示区域的宽度，获得一标签的显示宽度，从而，在标签显示区域中均匀的排布待显示的标签，且保证，当标签数量大于标签显示阈值时，末标签可以显露部分，从而，提醒用户后续还存在标签，用户可移动至下一网页显示。

Description

标签设置方法、服务器及标签设置系统

技术领域

本发明涉及互联网技术领域，尤其涉及一种标签设置方法、服务器及标签设置系统。

背景技术

现有的网页设置中，常采用在显示界面中设置导航栏，在导航栏中采用标签的形式链接多个页面，并利用功能性命名或者概述性命名的方式为标签命名，从而为用户提供相应的导航提示。

但是，现有技术中，多采用固定间距的方式，在导航栏中显示多个标签。但是针对用户端不同的显示界面尺寸，其次每当导航栏中标签个数发生变化时，需随时对间距重新进行适配调整，以在导航栏中均匀、美观的显示标签，导致标签个数调整时的过程复杂，工程量大。

发明内容

为解决上述问题，本发明提出一种标签设置方法、服务器及标签设置系统。本发明设置一标签显示数量阈值和末标签隐藏值，根据标签显示区域的宽度，获得一标签的显示宽度，从而，在标签显示区域中均匀的排布待显示的标签，且保证，当标签数量大于标签显示阈值时，末标签可以显露部分，从而，提醒用户后续还存在标签，用户可移动至下一网页显示。

具体地，本发明一方面提供一种标签设置方法，其包括以下步骤：获取标签显示区域的宽度，设置一标签显示数量阈值，末标签隐藏值，在标签显示数量阈值基础上减去末标签隐藏值，获得标签显示数量，以所述标签显示区域的宽度比上所述标签显示数量，计算获得每个标签的显示宽度，获取实际标签数量，根据所述实际标签数量，所述显示宽度，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。

优选地，当所述标签显示区域的宽度为显示界面的宽度时，获取标签显示区域的宽度的步骤包括，获取水平方向上，标签显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面在水平方向上的宽度。

优选地，当显示界面中，所述标签显示区域的同一水平方向上还包括一操作按钮时，获取标签显示区域的宽度的步骤包括：获取水平方向上，所述显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面的宽度，获取所述标签显示区域中的操作按钮远离所述标签显示区域的一边与所述显示界面的水平距离，以及所述操作按钮的宽度，在所述显示界面的宽度的基础上减去所述水平距离及所述操作按钮的宽度，获得所述标签显示区域的宽度。

优选地，所述末标签隐藏值为0.2。

本发明另一方面，还提供一种标签设置方法，所述标签设置方法应用于服务器与用户端之间，所述标签设置方法包括以下步骤：服务器获取用户端显示显示界面中标签显示区域的宽度，设置一标签显示数量阈值，末标签隐藏值，在标签显示数量阈值基础上减去末标签隐藏值，获得标签显示数量，服务器以所述标签显示区域的宽度比上所述标签显示数量，计算获得每个标签的显示宽度，用户端读取实际标签数量，根据所述实际标签数量，所述显示宽度，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。

优选地，当所述标签显示区域的宽度为用户端显示界面的宽度时，所述服务器获取标签显示区域的宽度的步骤包括：获取水平方向上，标签显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面在水平方向上的宽度。

优选地，当所述标签显示区域的同一水平方向上还包括一操作按钮时，所述服务器获取标签显示区域的宽度的步骤包括：所述服务器获取所述用户端的显示界面的水平方向上的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面的宽度，所述服务器获取所述标签显示区域中的操作按钮远离所述标签显示区域的一边与所述显示界面的水平距离，以及所述操作按钮的宽度，在所述显示界面的宽度的基础上减去所述水平距离及所述操作按钮的宽度，获得所述标签显示区域的宽度。

优选地，所述末标签隐藏值为0.2。

优选地，一种服务器，包括处理器和存储设备，所述存储设备存储有计算机程序，其中所述处理器调用并执行所述计算机程序时实现如上所述的标签设置方法。

本发明另一方面，在于提供一种标签设置系统，所述标签设置系统包括服务器与用户端；服务器获取用户端显示显示界面中标签显示区域的宽度，设置一标签显示数量阈值，末标签隐藏值，在标签显示数量阈值基础上减去末标签隐藏值，获得标签显示数量，服务器以所述标签显示区域的宽度比上所述标签显示数量，计算获得每个标签的显示宽度，用户端读取实际标签数量，根据所述实际标签数量，所述显示宽度，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。

优选地，当所述标签显示区域的宽度为用户端显示界面的宽度时，所述服务器获取标签显示区域的宽度的步骤包括：获取水平方向上，标签显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面在水平方向上的宽度。

优选地，当所述标签显示区域的同一水平方向上还包括一操作按钮时，所述服务器获取标签显示区域的宽度的步骤包括：所述服务器获取所述用户端的显示界面的水平方向上的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面的宽度，所述服务器获取所述标签显示区域中的操作按钮远离所述标签显示区域的一边与所述显示界面的水平距离，以及所述操作按钮的宽度，在所述显示界面的宽度的基础上减去所述水平距离及所述操作按钮的宽度，获得所述标签显示区域的宽度。

优选地，所述末标签隐藏值为0.2。

采用了上述技术方案后，与现有技术相比，具有以下有益效果：

1.本发明标签设置方法适配性强，可以适应不同的显示界面；

2.利用本发明的方法，当增加或者减少待显示标签数量时，可实现快速调整，减少工作量，提高工作效率；

3.本发明的标签设置方法，采用末标签部分显露的方法，提示用户后续还存在标签，避免用户忽视或遗漏后续标签内容。

附图说明

图1为符合本发明一优选实施例中的标签设置方法的流程示意图；

图2为符合实施例一的一标签实显示态示意图；

图3为符合实施例二的一标签显示状态示意图。

具体实施方式

以下结合附图与具体实施例进一步阐述本发明的优点。

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”

在本发明的描述中，需要理解的是，术语“纵向”、“横向”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。

在本发明的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本发明及区别每一步骤，因此不能理解为对本发明的限制。

参阅图1，其为符合本发明一优选实施例的标签设置方法的流程示意图。从图中可以看出，本实施例中所提供的标签设置方法主要包括下述步骤：

服务器获取用户端的显示界面中用于显示标签的区域，也即标签显示区域的宽度a；

根据网站的需求，结合显示字体的大小、字间距、用户视觉感受等因素，设置一在上述标签显示区域中显示的标签数量的最大上限，也即一标签显示数量阈值n；同时，根据常规的阅读习惯，显示界面的最右边的标签应当为末标签，本实施例中，还设置一末标签隐藏值k，也即末标签允许不显示的大小，该大小的单位为数量单位个，则该末标签隐藏值小于1大于0；从而，在标签显示数量阈值n基础上减去末标签隐藏值k，可获得标签显示数量n-k；

进一步地，以上述标签显示区域的宽度a比上标签显示数量n-k，计算获得每个标签的显示宽度a/(n-k)，

从而，获取实际标签数量m后，根据该实际标签数量m，显示宽度a/(n-k)，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。则当实际标签数量m小于标签显示数量阈值n时，m个标签可以a/(n-k)为宽度，居中显示于用户端的显示界面中，且每个标签均为完整显示；当实际标签数量m大于或者等于标签显示阈值n时，将显示n个标签，且第n个标签将显示1-k部分。

在一优选实施例中，根据用户视力感受及字体大小、字体间距等因素，设置末标签隐藏值为0.2，可以实现在不影响标签显示效果的情况下，实现提醒用户还有多余标签。

另外，考虑到不同的网站需求，会在显示界面中标签显示区域一侧设置相应的操作按钮，以实现滚动标签的效果，所以，以下将就是否存在上述操作按钮两种形式，具体详细介绍本发明的应用。

实施例一

当网页中的导航栏，也即标签显示区域的两侧均不设置操作按钮时，则用户端的显示界面的宽度等于标签显示区域的宽度；当该网页具有m1个标签预设置于上述标签显示区域时，可通过以下步骤实现：

通过获取显示界面水平方向上的两个端点的坐标，即可计算获得该显示界面也即标签显示区域的宽度a1；

在标签显示数量阈值n1基础上减去末标签隐藏值k1，可获得标签显示数量n1-k1；

将上述的宽度a1除以标签显示数量n1-k1，获得每个标签的显示宽度a1/(n1-k1)；

设置标签的显示宽度为a1/(n1-k1)，以显示界面的中轴为基准，当m1＜n1时，在标签显示区域内以界面中轴为中心，成组居中显示m1个标签；当m1≥n1时，参阅图2，在标签显示区域内以界面中轴为中心，成组居中显示n1个标签，其中，第n1个标签将显示1-k1部分。

实施例二

当网页中的导航栏中，也即标签显示区域的一侧设置有操作按钮时，标签显示区域应当位于操作按钮的一侧，则标签显示区域的宽度等于显示界面的宽度减去操作按钮远离标签显示区域的一侧距离显示界面的水平距离c1，及操作按钮的宽度c2，则当该网页具有m2个标签预设置于上述标签显示区域时，可通过以下步骤实现：

获取水平方向上，用户端显示界面的两个端点的坐标值，随后根据该坐标值，计算获得标签显示界面的宽度a2；

获取标签显示区域中的操作按钮远离该标签显示区域的一边与显示界面的水平距离c1，以及该操作按钮的宽度c2，

则，在显示界面的宽度a2的基础上减去上述水平距离c1及所述操作按钮的宽度c2，可获得该标签显示区域的宽度a2-c1-c2；

在标签显示数量阈值n2基础上减去末标签隐藏值k2，可获得标签显示数量n2-k2；

将上述的宽度a2-c1-c2除以标签显示数量n2-k2，获得每个标签的显示宽度a2-c1-c2/(n2-k2)；

设置标签的显示宽度为a2-c1-c2/(n2-k2)，以显示界面的中轴为基准，当m2＜n2时，在标签显示区域内以界面中轴为中心，成组居中显示m2个标签；当m2≥n2时，参阅图3，在标签显示区域内以界面中轴为中心，成组居中显示n2个标签，其中，第n2个标签将显示1-k2部分。

例如，当本实施例具体适用于iPhone SE时，基于iPhone SE的显示界面尺寸及用户视觉感受，设定标签显示阈值n2＝6，末标签隐藏值k2＝0.2，则当在iPhone SE的导航栏中设置一宽度c2＝22px的操作按钮，且该操作按钮远离该标签显示区域的一边与显示界面的水平距离c1＝12px，而iphone SE本身显示界面的宽度为320px，则此时每个标签的显示宽度应为(320-22-12)px/(6-0.2)＝49px。则，当实际标签的个数大于或者等于6时，可在iPhone SE中，该网页的导航栏中显示6个标签，其中前5个标签中每个标签的宽度均为49px，而第6个标签仅显示80％，其宽度为39.2px；当实际标签的个数小于6时，则基于本实施例的方法，该网页的导航栏中以iPhone SE显示界面的中轴为中心成组居中显示5个或4或3或2或1个标签；

又例如，当本实施例具体适用于iPhone 7时，且在导航栏中同时设定有操作按钮的情况下，也可设定n2＝6，k2＝0.2，c2＝22px，c1＝12px，则基于iPhone 7本身显示界面的宽度为375px，则此时每个标签的显示宽度应为(375-22-12)px/(6-0.2)＝59px。则，当实际标签的个数大于或者等于6时，可在iPhone 7中，该网页的导航栏中显示6个标签，其中前5个标签中每个标签的宽度均为59px，而第6个标签仅显示80％，其宽度为47.2px；当实际标签的个数小于6时，则基于本实施例的方法，该网页的导航栏中以iPhone 7显示界面的中轴为中心成组居中显示5个或4或3或2或1个标签；

综上所述，本发明标签设置方法适配性强，可以适应不同的显示界面；利用本发明的方法，当增加或者减少待显示标签数量时，可实现快速调整，减少工作量，提高工作效率；本发明的标签设置方法，采用末标签部分显露的方法，提示用户后续还存在标签，避免用户忽视或遗漏后续标签内容。

应当注意的是，本发明的实施例有较佳的实施性，且并非对本发明作任何形式的限制，任何熟悉该领域的技术人员可能利用上述揭示的技术内容变更或修饰为等同的有效实施例，但凡未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何修改或等同变化及修饰，均仍属于本发明技术方案的范围内。

Claims (13)

1.一种标签设置方法，其特征在于，包括以下步骤：

获取标签显示区域的宽度，

设置一标签显示数量阈值，末标签隐藏值，在标签显示数量阈值基础上减去末标签隐藏值，获得标签显示数量，

以所述标签显示区域的宽度比上所述标签显示数量，计算获得每个标签的显示宽度，获取实际标签数量，根据所述实际标签数量，所述显示宽度，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。

2.如权利要求1所述的标签设置方法，其特征在于，

当所述标签显示区域的宽度为显示界面的宽度时，获取标签显示区域的宽度的步骤包括，

获取水平方向上，标签显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面在水平方向上的宽度。

3.如权利要求1所述的标签设置方法，其特征在于，

当显示界面中，所述标签显示区域的同一水平方向上还包括一操作按钮时，获取标签显示区域的宽度的步骤包括，

获取水平方向上，所述显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面的宽度，

获取所述标签显示区域中的操作按钮远离所述标签显示区域的一边与所述显示界面的水平距离，以及所述操作按钮的宽度，

在所述显示界面的宽度的基础上减去所述水平距离及所述操作按钮的宽度，获得所述标签显示区域的宽度。

4.如权利要求1-3任一所述的标签设置方法，其特征在于，

所述末标签隐藏值为0.2。

5.一种标签设置方法，其特征在于，所述标签设置方法应用于服务器与用户端之间，所述标签设置方法包括以下步骤：

服务器获取用户端显示显示界面中标签显示区域的宽度，

设置一标签显示数量阈值，末标签隐藏值，在标签显示数量阈值基础上减去末标签隐藏值，获得标签显示数量，

服务器以所述标签显示区域的宽度比上所述标签显示数量，计算获得每个标签的显示宽度，

用户端读取实际标签数量，根据所述实际标签数量，所述显示宽度，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。

6.如权利要求5所述的标签设置方法，其特征在于，

当所述标签显示区域的宽度为用户端显示界面的宽度时，所述服务器获取标签显示区域的宽度的步骤包括，

获取水平方向上，标签显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面在水平方向上的宽度。

7.如权利要求5所述的标签设置方法，其特征在于，

当所述标签显示区域的同一水平方向上还包括一操作按钮时，所述服务器获取标签显示区域的宽度的步骤包括，

所述服务器获取所述用户端的显示界面的水平方向上的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面的宽度，

所述服务器获取所述标签显示区域中的操作按钮远离所述标签显示区域的一边与所述显示界面的水平距离，以及所述操作按钮的宽度，

在所述显示界面的宽度的基础上减去所述水平距离及所述操作按钮的宽度，获得所述标签显示区域的宽度。

8.如权利要求5-7任一所述的标签设置方法，其特征在于，

所述末标签隐藏值为0.2。

9.一种服务器，包括处理器和存储设备，所述存储设备存储有计算机程序，其特征在于，

所述处理器调用并执行所述计算机程序时实现如权利要求1-4任一项所述的标签设置方法。

10.一种标签设置系统，其特征在于，所述标签设置系统包括服务器与用户端；

服务器获取用户端显示显示界面中标签显示区域的宽度，

设置一标签显示数量阈值，末标签隐藏值，在标签显示数量阈值基础上减去末标签隐藏值，获得标签显示数量，

服务器以所述标签显示区域的宽度比上所述标签显示数量，计算获得每个标签的显示宽度，

用户端读取实际标签数量，根据所述实际标签数量，所述显示宽度，以显示界面的中轴为基准，在所述标签显示区域内成组居中显示至少一个标签。

11.如权利要求10所述的标签设置系统，其特征在于，

当所述标签显示区域的宽度为用户端显示界面的宽度时，所述服务器获取标签显示区域的宽度的步骤包括，

获取水平方向上，标签显示界面的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面在水平方向上的宽度。

12.如权利要求10所述的标签设置系统，其特征在于，

当所述标签显示区域的同一水平方向上还包括一操作按钮时，所述服务器获取标签显示区域的宽度的步骤包括，

所述服务器获取所述用户端的显示界面的水平方向上的两个端点的坐标值，根据所述坐标值，计算获得所述标签显示界面的宽度，

所述服务器获取所述标签显示区域中的操作按钮远离所述标签显示区域的一边与所述显示界面的水平距离，以及所述操作按钮的宽度，

在所述显示界面的宽度的基础上减去所述水平距离及所述操作按钮的宽度，获得所述标签显示区域的宽度。

13.如权利要求10-12任一所述的标签设置系统，其特征在于，

所述末标签隐藏值为0.2。