一种选项卡切换方法、装置、计算设备及存储介质与流程

1.本发明涉及计算机技术领域，特别涉及一种选项卡切换方法、装置、计算设备及存储介质。


背景技术：

2.互联网提供的大量信息由于受到页面大小的限制，展示的内容也会受到限制，为了在页面中展示更多的内容，通常采用选项卡增加切换效果。这种切换效果是指在新闻资讯类网站中为了一个模块显示多个列表内容，通过切换不同的类别标题来显示或隐藏当前内容。为了标示当前已选中的选项而添加特殊标记，然后在切换标题选项的过程中，标记位会从当前标题位置移动到下一个标题位置。由于标题的文字宽度不一致，标记位在移动过程中需要动态计算当前标题的宽度，然后添加特殊标记。
3.目前选项卡切换效果大部分都是通过javascript动态计算后直接操作dom来实现，首先使用javascript记录当前标记位的位置，然后在当前标记dom上添加单独的class类名，来标示当前选中的某一项，等需要切换到下一项时再把当前的标记项删除，在下一项添加相应的class类名。该方案使用javascript直接操作dom，这意味着开发者需要掌握各个浏览器的dom接口特性，频繁进行dom操作则会影响性能。且为了达到切换的平滑效果，还需要对标记项进行偏移计算，以便在下一个选项选中的时候当前标记位能够准确移动到下一项。这种方案会影响页面的反应速度，且不易维护。
4.为此，需要一种选项卡切换方法，在切换选项卡的过程中减少对dom直接操作，减少代码量和计算量，从而提高页面的反应速度。


技术实现要素：

5.为此，本发明提供一种选项卡切换方法，以力图解决或者至少缓解上面存在的问题。
6.根据本发明的一个方面，提供一种选项卡切换方法，选项卡至少包括第一选项标签和第二选项标签，适于在计算设备中执行，在该方法中，首先，在选项卡上添加css伪元素::after；然后，监听用户对选项卡的鼠标事件，当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到鼠标css伪元素::after内部；继而，基于css伪元素::after内部保存的第一选项标签的尺寸和位置，使用css伪类将鼠标第一选项标签显示为选中状态。当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到css伪元素::after内部；就可以基于css伪元素::after内部保存的第二选项标签的尺寸和位置，使用css伪类将鼠标第二选项标签显示为选中状态，完成了选项卡的切换。
7.可选地，在根据本发明的方法中，可以在css伪元素::after内部设置transition过渡效果，以便在切换选项卡时平滑过渡。
8.可选地，在根据本发明的方法中，可以先声明css自定义属性。然后，通过使用应用
程序接口.setproperty将获取的第一选项标签的尺寸和位置赋值给css自定义属性。最后，使用var()的函数引用css自定义属性的值，以便将第一选项标签的尺寸和位置保存到css伪元素::after的内部。
9.可选地，在根据本发明的方法中，可以通过使用应用程序接口.setproperty将获取的第二选项标签的尺寸和位置赋值给鼠标css自定义属性。然后，使用var()的函数引用css自定义属性的值，以便将第二选项标签的尺寸和位置保存到css伪元素::after的内部。
10.根据本发明的另一方面，提供了一种选项卡切换装置，该装置包括设置模块、监听模块、第一获取模块、第一显示模块、第二获取模块和第二显示模块，其中，设置模块可以在选项卡上添加css伪元素::after。监听模块可以监听用户对选项卡的鼠标事件。第一获取模块在监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到鼠标css伪元素::after内部。第一显示模块可以基于css伪元素::after内部保存的第一选项标签的尺寸和位置，使用css伪类将鼠标第一选项标签显示为选中状态。第二获取模块在监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到css伪元素::after内部。第二显示模块可以基于css伪元素::after内部保存的第二选项标签的尺寸和位置，使用css伪类将鼠标第二选项标签显示为选中状态。
11.可选地，上述装置还包括过渡模块，适于在css伪元素::after内部设置transition过渡效果，以便在切换选项卡时平滑过渡。
12.根据本发明的另一方面，提供了一种计算设备，包括：一个或多个处理器；存储器；以及一个或多个程序，其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行根据本发明的一种选项卡切换方法的任一方法的指令。
13.根据本发明的又一个方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，该指令当由计算设备执行时，使得计算设备执行根据本发明的一种选项卡切换方法中的任一方法。
14.本发明基于javascript和css伪元素配合的方式来完成选项卡的切换，通过把javascript获得的值直接传递给css伪元素内部变量的方式来控制选项卡选中状态的移动，减少了对dom的直接操作；而且不必通过javascript实时计算当前选中位置，从而把这部分工作交给css来完成，能够自适应选项卡不同的宽度，实现了状态层和表现层相分离，代码耦合性更低，更易于维护。
附图说明
15.为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。
16.图1示出了根据本发明一个实施例的计算设备100的结构框图；
17.图2示出了根据本发明一个实施例的选项卡切换方法200的流程示意图；
18.图3示出了根据本发明一个实施例的选项卡切换效果示意图；
19.图4示出了根据本发明一个实施例的选项卡切换装置300的结构示意图。
具体实施方式
20.下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。相同的附图标记通常指代相同的部件或元素。
21.选项卡是一种多个标签页区分不同选项功能的窗口，用户可以在同一页面自由切换不同的选项卡，但是由于各个选项标签的宽度可能不同，在切换时由javascript动态计算当前的标记位会增加代码计算量，从而影响选项卡切换的流畅度。为了减少代码计算量和避免直接操作dom，本方案采用javascript与css相结合的方式，不必通过javascript实时计算当前选中位置，而把这部分工作交给css来完成，不需要直接操作dom，提高了选项卡切换的流畅度。
22.图1示出了根据本发明一个实施例的计算设备100的结构图。如图1所示，在基本的配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。
23.取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器(μp)、微控制器(μc)、数字信息处理器(dsp)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(alu)、浮点数单元(fpu)、数字信号处理核心(dsp核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。
24.取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如ram)、非易失性存储器(诸如rom、闪存等)或者它们的任何组合。计算设备中的物理内存通常指的是易失性存储器ram，磁盘中的数据需要加载至物理内存中才能够被处理器104读取。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。应用122实际上是多条程序指令，其用于指示处理器104执行相应的操作。在一些实施方式中，在一些实施方式中，应用122可以布置为在操作系统上由一个或多个处理器104利用程序数据124执行指令。操作系统120例如可以是linux、windows等，其包括用于处理基本系统服务以及执行依赖于硬件的任务的程序指令。应用122包括用于实现各种用户期望的功能的程序指令，应用122例如可以是浏览器、即时通讯软件、软件开发工具(例如集成开发环境ide、编译器等)等，但不限于此。当应用122被安装到计算设备100中时，可以向操作系统120添加驱动模块。
25.在计算设备100启动运行时，处理器104会从存储器106中读取操作系统120的程序指令并执行。应用122运行在操作系统120之上，利用操作系统120以及底层硬件提供的接口来实现各种用户期望的功能。当用户启动应用122时，应用122会加载至存储器106中，处理器104从存储器106中读取并执行应用122的程序指令。
26.计算设备100还包括储存设备132，储存设备132包括可移除储存器136和不可移除
储存器138，可移除储存器136和不可移除储存器138均与储存接口总线134连接。
27.计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个a/v端口152与诸如显示器或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个i/o端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。
28.网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(rf)、微波、红外(ir)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。
29.计算设备100还包括与总线/接口控制器130相连的储存接口总线134。储存接口总线134与储存设备132相连，储存设备132适于进行数据存储。示例的储存设备132可以包括可移除储存器136(例如cd、dvd、u盘、可移动硬盘等)和不可移除储存器138(例如硬盘驱动器hdd等)。在根据本发明的计算设备100中，应用122包括执行方法200的多条程序指令。
30.图2示出了根据本发明一个实施例的选项卡切换方法200的流程示意图。如图2所示，选项卡切换方法200始于步骤s210，在选项卡上添加css伪元素::after。其中，选项卡可以由多个选项标签和所控制的内容组成，至少包括第一选项标签和第二选项标签。第一选项标签和第二选项标签的宽度可以相同也可以不同，位置可以相邻也可以间隔，本方案对此不做限定。可以通过《div》标签为选项卡添加多个选项标签，以便javascript能够在页面中获取到选项卡的选项标签，html代码如下：
[0031][0032]
在本发明的实施例中，选项卡的选项标签分别为tab、taaaaaaab、ab多文字样式、tabbb，其宽度不同，还可以设置每个标签对应的选项内容，选项标签的数量与选项内容数量应对应相等，可以根据需要添加或删减。
[0033]
在选项卡上添加伪元素可以控制选项标签的样式，例如设置元素的首字母、首行
的样式，在元素的内容之前或之后插入内容等。css中的::before及::after伪元素分别在元素内容的前后添加设定内容，但是添加的内容不是真正的内容或者元素，不能应用标记方法或是javascript中的事件触发器。在伪元素内部可以计算选项标签的尺寸和位置，设置选项标签的颜色和背景。css代码如下：
[0034][0035][0036]
接着执行步骤s220，监听用户对选项卡的鼠标事件，当监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到css伪元素::after内部。
[0037]
可以使用addeventlistener(event,function,usecapture)方法将事件处理程序附加到指定的元素。第一个参数是事件的类型，可以包括click点击、mouseover鼠标移到某元素之上、mousedown鼠标按钮被按下、mouseup鼠标按键被松开等；第二个参数想要在事件发生时调用的函数；第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获，此参数是可选的。在本发明的实施例中，鼠标事件为“mouseover”，即当鼠标指针位于选项标签上方时触发。可以先声明一个自定义属性，使用两个连词线
“‑‑”
声明的特殊格式作为名称，例如
“‑‑
target-width”被选中的选项标签的宽度、
“‑‑
target-left”被选中的选项标签的位置等，同时可以通过javascript的应用程序接口getproperty和setproperty对自定义属性进行读写。然后，通过使用应用程序接口.setproperty将获取的第一选项标签的尺寸和位置赋值给自定义属性。setproperty()语法为object.setproperty(propertyname,value,priority)，其中，propertyname表示创建或修改的属性，value表示新的属性值，priority规定是否需要设置属性的优先级。javascript代码如下：
[0038][0039]
最后，使用var()的函数引用自定义属性的值，以便将第一选项标签的尺寸和位置保存到css伪元素::after的内部。其中，var()函数用于读取自定义属性,将自定义属性当作var()函数的第一个参数传进去。var()函数语法为var(custom-property-name,value)，其中，custom-property-name表示自定义属性的名称，必需以
‑‑
开头，value可选，
在属性不存在的时候使用。在使用css自定义属性要做一些数学计算时，可以通过calc()函数来完成。例如，在上述代码中通过calc(var(
‑‑
target-width,0)*1px)和calc(var(
‑‑
target-left,-299)*1px)计算第一选项标签的宽度和位置。css代码如下：
[0040][0041]
接着执行步骤s230，基于css伪元素::after内部保存的第一选项标签的尺寸和位置，使用css伪类将第一选项标签显示为选中状态。
[0042]
其中，伪类用于定义元素的特殊状态，当选项标签达到一个特定状态时，它可能得到一个伪类的样式，当状态改变时，它又会失去这个样式。因此伪类的功能和class有些类似，它可以用于设置鼠标悬停在选项标签上时的样式。选中状态除了常见的高亮显示、背景阴影，也可以调整字体大小、字体加粗、图标(横杠)等等变化来强调出的被选中的选项标签所对应的内容。对于未选中的选项标签，也需要保持清晰可见的未选中状态，可以起到提醒用户还有其他标签可供选择的作用。
[0043]
随后，执行步骤s240，当监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到css伪元素::after内部。
[0044]
当用户将鼠标移动到第二选项标签时完成选项标签的切换，此时，仍可以通过使用应用程序接口.setproperty将获取的第二选项标签的尺寸和位置赋值给自定义属性。然后，使用var()的函数引用css自定义属性的值，以便将第二选项标签的尺寸和位置保存到css伪元素::after的内部。
[0045]
css代码如下：
[0046]
.ah-tab-tab::after{
[0047]
width:calc(var(
‑‑
target-width,0)*1px)；
[0048]
left:calc(var(
‑‑
target-left,-299)*1px)；}
[0049]
利用var()函数和calc()函数进行选中状态位置上的计算和移动。最后，执行步骤s250，基于css伪元素::after内部保存的第二选项标签的尺寸和位置，使用css伪类将第二选项标签显示为选中状态，完成了选项卡的切换。
[0050]
为了使选项卡切换更加流畅，可以给每一个选项标签添加transition过渡效果，使得在切换选项卡时平滑过渡。可以为width和left属性都添加过渡效果，width是2秒，left也是2秒，css代码如下：
[0051]
.ah-tab-tab::after{
[0052]
transition:left.2s,width.2s；}
[0053]
图3示出了根据本发明一个实施例的选项卡切换效果示意图。如图3所示，当鼠标指针从tab、tab多文字样式、tabbb中任一选项标签移动到taaaaaaab上时，选项卡的选中状态可以准确标记选项标签的位置和宽度，且切换过程流畅无卡顿。
[0054]
从以上方案中可以看出，整个状态的改变在dom上是没有变化的，选中状态的改变
是由css来进行控制，包括位置与宽度。而javascript只是作为数据接口提供给css的var函数一些数据，而不直接对dom进行操作。这样一来，当想要修改选中状态的样式时，就不用修改javascript，而直接修改css就可以。
[0055]
图4示出了根据本发明一个实施例的选项卡切换装置300的结构示意图。如图4所示，该装置300可以包括设置模块310、监听模块320、第一获取模块330、第一显示模块340、第二获取模块350和第二显示模块360。其中，设置模块310可以在选项卡上添加css伪元素::after。监听模块320可以监听用户对选项卡的鼠标事件。第一获取模块330可以在监听到用户对第一选项标签的鼠标事件时，获取第一选项标签的尺寸和位置，并将获取的第一选项标签的尺寸和位置保存到鼠标css伪元素::after内部。第一显示模块340可以基于css伪元素::after内部保存的第一选项标签的尺寸和位置，使用css伪类将鼠标第一选项标签显示为选中状态。第二获取模块350可以在监听到用户对第二选项标签的鼠标事件时，获取第二选项标签的尺寸和位置，并将获取的第二选项标签的尺寸和位置保存到css伪元素::after内部。第二显示模块360可以基于css伪元素::after内部保存的第二选项标签的尺寸和位置，使用css伪类将鼠标第二选项标签显示为选中状态。
[0056]
本发明中的选项卡切换方法，通过把javascript获得的选项标签的宽度和位置接传递给css伪元素内部变量的方式来控制选项卡选中状态的移动，减少了对dom的直接操作，且不必通过javascript实时计算当前选中位置，从而把这部分工作交给css来完成，实现了状态层和表现层相分离，代码耦合性更低，更易于维护。选项卡切换过程中能够自适应选项卡不同的宽度，准确标记选项卡的选中状态，提高切换的流畅度。
[0057]
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
[0058]
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多特征。
[0059]
本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组间可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。
[0060]
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组间组合成一个模块或单元或组间，以及此外可以把它们分成多个子模块或子单元或子组间。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
[0061]
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例
中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。
[0062]
此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。
[0063]
这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如软盘、cd-rom、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。
[0064]
在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的设备停机状态的判断方法。
[0065]
以示例而非限制的方式，计算机可读介质包括计算机存储介质和通信介质。计算机可读介质包括计算机存储介质和通信介质。计算机存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。
[0066]
如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。
[0067]
尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。