指向标背景色的设置方法及装置、存储介质、处理器与流程

本发明涉及计算机应用技术领域，具体而言，涉及一种指向标背景色的设置方法及装置、存储介质、处理器。

背景技术：

前端项目中经常用到气泡弹出窗popover和工具提示框文字提示tooltip。popover的默认背景色是白色的，有时候会需要改变一下，然而popover中的三角形指向标的颜色并不会随着popover弹窗的背景色的改变而改变。同样的，tooltip的默认主题也只有两种(dark/light)，即背景色为黑色或白色。在对tooltip的提示框背景色进行修改的时候，三角形指向标的颜色不会随着改变。若要改变popover或tooltip的提示框架中三角形指向标的颜色，需要单独进行代码改写或手动进行颜色设置。目前的操作既费时费力，又影响用户体验的满意度。

针对相关技术中页面提示框的指向标颜色无法随着主框架背景色的改变而改变，需要单独进行更改设置，导致操作麻烦且用户体验差的问题，目前尚未有合理的解决办法。

技术实现要素：

本发明实施例提供了一种指向标背景色的设置方法及装置、存储介质、处理器，以至少解决相关技术中页面提示框的指向标颜色无法随着主框架背景色的改变而改变，需要单独进行更改设置，导致操作麻烦且用户体验差的问题。

根据本发明的一个实施例，提供了一种指向标背景色的设置方法，包括：为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，其中，所述样式名用于区分所述主框架和所述指向标的属性设置；在所述主框架的第一样式名下设置第一背景色变量；在所述指向标的第二样式名下设置第二背景色变量，其中，所述第二背景色变量的设定值直接引用所述第一背景色变量的设定值。

优选地，为页面提示框的主框架和指向标分别定义第一样式名和第二样式名之前，所述方法还包括：为所述页面提示框定义专属样式名，其中，所述专属样式名用于定位所述页面提示框的指向标。

优选地，在所述指向标的第二样式名下设置第二背景色变量包括：为所述页面提示框设置不同指示方向的所述指向标，其中，所述指向标的指示方向至少包括以下之一：上、下、左、右；在所述指向标的第二样式名下，设置不同指示方向的所述第二背景色变量。

优选地，在所述指向标的第二样式名下，设置不同指示方向的所述第二背景色变量之后，所述方法还包括：当所述第一背景色变量的设定值发生变化时，同时更新不同所述指示方向的所述指向标的第二背景色；根据当前界面上的所述页面提示框的指向标的指示方向，调用与其指示方向一致的所述指向标的第二背景色。

优选地，在所述主框架的第一样式名下设置第一背景色变量包括：在所述主框架的第一样式名下设置线条颜色变量和/或填充颜色变量；在所述指向标的第二样式名下设置第二背景色变量包括：在所述指向标的第二样式名下设置线条颜色变量和/或填充颜色变量。

根据本发明实施例的另一个方面，还提供了一种指向标背景色的设置装置，包括：第一定义模块，用于为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，其中，所述样式名用于区分所述主框架和所述指向标的属性设置；第一设置模块，用于在所述主框架的第一样式名下设置第一背景色变量；第二设置模块，用于在所述指向标的第二样式名下设置第二背景色变量，其中，所述第二背景色变量的设定值直接引用所述第一背景色变量的设定值。

优选地，所述第二设置模块包括：第一设置单元，用于为所述页面提示框设置不同指示方向的所述指向标，其中，所述指向标的指示方向至少包括以下之一：上、下、左、右；第二设置单元，用于在所述指向标的第二样式名下，设置不同指示方向的所述第二背景色变量。

优选地，所述装置还包括：更新模块，用于当所述第一背景色变量的设定值发生变化时，同时更新不同所述指示方向的所述指向标的第二背景色；调用模块，用于根据当前界面上的所述页面提示框的指向标的指示方向，调用与其指示方向一致的所述指向标的第二背景色

优选地，所述第一设置模块还用于：为所述主框架设定线条颜色变量和/或填充颜色变量；所述第二设置模块还用于：为所述指向标设定线条颜色变量和/或填充颜色变量。

根据本发明的另一个实施例，还提供了一种存储介质，用于存储程序，所述程序被执行时，用于实现上述方法实施例中任意一项所述的指向标背景色的设置方法。

根据本发明的另一个实施例，还提供了一种处理器，用于运行程序，其中，所述程序被运行时用于执行：上述方法实施例中任意一项所述的指向标背景色的设置方法。

通过本发明实施例，为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，以便用于区分所述主框架和所述指向标的属性设置，然后将指向标的背景色变量与主框架的背景色变量绑定，使得指向标的背景色变量设定值直接引用主框架的背景色变量设定值，解决了相关技术中页面提示框的指向标颜色无法随着主框架背景色的改变而改变，需要单独进行更改设置，导致操作麻烦且用户体验差的问题，使得页面提示框指向标的背景色可以随着主框架背景色的改变而改变，改善了用户体验。

附图说明

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

图1是本发明实施例的一种指向标背景色的设置方法的移动终端的硬件结构框图；

图2是本发明实施例中指向标背景色的设置方法的流程图；

图3是根据本发明实施例的指向标背景色的设置装置的结构框图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

实施例1

本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。以运行在移动终端上为例，图1是本发明实施例的一种指向标背景色的设置方法的移动终端的硬件结构框图。如图1所示，移动终端10可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器mcu或可编程逻辑器件fpga等的处理装置)和用于存储数据的存储器104，可选地，上述移动终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述移动终端的结构造成限定。例如，移动终端10还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的调度吞吐量的获取方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至移动终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括移动终端10的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(networkinterfacecontroller，简称为nic)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(radiofrequency，简称为rf)模块，其用于通过无线方式与互联网进行通讯。

本发明实施例提供了一种指向标背景色的设置方法。图2是本发明实施例中指向标背景色的设置方法的流程图，如图2所示，该方法包括：

步骤s201，为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，其中，样式名用于区分主框架和指向标的属性设置；

步骤s203，在主框架的第一样式名下设置第一背景色变量；

步骤s205，在指向标的第二样式名下设置第二背景色变量，其中，第二背景色变量的设定值直接引用第一背景色变量的设定值。

通过上述方法，为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，其中，样式名用于区分主框架和指向标的属性设置；在主框架的第一样式名下设置第一背景色变量；在指向标的第二样式名下设置第二背景色变量，其中，第二背景色变量的设定值直接引用第一背景色变量的设定值，解决了相关技术中页面提示框的指向标颜色无法随着主框架背景色的改变而改变，需要单独进行更改设置，导致操作麻烦且用户体验差的问题，使得指向标的背景色可以随着页面提示框主框架背景色的改变而改变，改善了用户体验。

需要说明的是，本发明实施例中涉及的页面提示框可以是popover或tooltip，以及其他种类的可以在计算机界面上弹出或批注的提示框。在主框架的第一样式名下设置第一背景色变量可以包括：在主框架的第一样式名下设置线条颜色变量和/或填充颜色变量；在指向标的第二样式名下设置第二背景色变量可以包括：在指向标的第二样式名下设置线条颜色变量和/或填充颜色变量。

根据本发明实施例的一个优选实施方式，上述步骤s201之前，所述方法还包括：为页面提示框定义专属样式名，其中，专属样式名用于定位页面提示框的指向标。

例如，给popover定义一个固定的样式名，比如“my-popover”，可以根据这个样式名来定位到内部的三角形指向标(如果不单独给定一个样式名，后续设定的样式有可能会影响到局部内其他的popover的默认背景色)。给popover的主框架定义一个第一样式名，可以是“my-popover_mainframe”,给指向标定义一个第二样式名，可以是“my-popover_arrow”。

根据本发明实施例的一个优选实施方式，上述步骤s203可以通过以下步骤实现：为页面提示框设置不同指示方向的指向标，其中，指向标的指示方向至少包括以下之一：上、下、左、右；在指向标的第二样式名下，设置不同指示方向的第二背景色变量。

在指向标的第二样式名下，设置不同指示方向的第二背景色变量之后，上述方法还包括：当第一背景色变量的设定值发生变化时，同时更新不同指示方向的指向标的第二背景色；根据当前界面上的页面提示框的指向标的指示方向，调用与其指示方向一致的指向标的第二背景色。

界面上的页面提示框程序可以根据当前指向标的指示方向，直接获取到对应的指向标更新后的颜色，例如，当前界面的指向标指示方向为“top”，那么界面内的页面提示框可以直接调用对应的“top”方向的指向标的背景色。

例如，根据这个样式名来分别定位到三角形指向标后，给三角形指向标分别设定四个方向的边框颜色，如下：

这样，无论将popover的placement设置为哪个方向的定位，这个方向上的三角形指向标都已经设置了相应的颜色，会跟着placement自动切换了。如果css样式是用scss等可定义变量的语言写的，那么可以先定义一个popover的默认背景色的变量，用来存储需要设置的popover的背景色，如：“$popover-bgcolor:pink；”，那么在给popover和三角形指向标设置背景色的时候，直接引用这个变量，比如：“border-left-color:$popover-bgcolor；”，那么想要改变popover的背景色并且让三角形指向标同时改变颜色就更简单了，只需要修改这个“$popover-bgcolor”的颜色就可以了，其他的地方都不需要更改。

tooltip改变背景色的方式同上，此处不再赘述。

通过本发明实施例提供的指向标背景色的设置方法，可在给前端项目库中常用的popover和tooltip改变背景色的同时改变三角形小图标颜色；提高用户的使用体验，对用户更友好。

实施例2

在本实施例中还提供了一种指向标背景色的设置装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图3是根据本发明实施例的指向标背景色的设置装置的结构框图，如图3所示，该装置包括：第一定义模块30，用于为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，其中，样式名用于区分主框架和指向标的属性设置；第一设置模块32，用于在所述主框架的第一样式名下设置第一背景色变量；第二设置模块34，用于在所述指向标的第二样式名下设置第二背景色变量，其中，第二背景色变量的设定值直接引用第一背景色变量的设定值。

通过上述装置，第一定义模块30为页面提示框的主框架和指向标分别定义样式名，其中，样式名用于区分所述主框架和所述指向标的属性设置；第一设置模块32在所述主框架的第一样式名下设置第一背景色变量；第二设置模块34在所述指向标的第二样式名下设置第二背景色变量，其中，第二背景色变量的设定值直接引用第一背景色变量的设定值，解决了相关技术中页面提示框的指向标颜色无法随着主框架背景色的改变而改变，需要单独进行更改设置，导致操作麻烦且用户体验差的问题，使得指向标的背景色可以随着页面提示框背景色的改变而改变，改善了用户体验。

需要说明的是，本发明实施例中涉及的页面提示框可以是popover或tooltip，以及其他种类的可以在计算机界面上弹出或批注的提示框。为主框架设置第一背景色变量包括：为页面提示框的主框架设定线条颜色变量和/或填充颜色变量；为页面提示框的指向标设置第二背景色变量包括：为指向标设定线条颜色变量和/或填充颜色变量。

根据本发明实施例的一个优选实施方式，所述装置还包括：第二定义模块，用于为页面提示框定义专属样式名，其中，专属样式名用于定位页面提示框的指向标。

根据本发明实施例的一个优选实施方式，第二设置模块包括：第一设置单元，用于为页面提示框设置不同指示方向的指向标，其中，指向标的指示方向至少包括以下之一：上、下、左、右；第二设置单元，用于在所述指向标的第二样式名下，设置不同指示方向的所述第二背景色变量。

根据本发明实施例的一个优选实施方式，第一设置模块还用于：为页面提示框的主框架设定线条颜色变量和/或填充颜色变量；第二设置模块还用于：为指向标设定线条颜色变量和/或填充颜色变量。

根据本发明实施例的一个优选实施方式，所述装置还包括：更新模块，用于当第一背景色变量的设定值发生变化时，同时更新不同指示方向的指向标的第二背景色；调用模块，用于根据当前界面上的页面提示框的指向标的指示方向，调用与其指示方向一致的指向标的第二背景色。

本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述指向标背景色的设置方法。

本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述指向标背景色的设置方法。

本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：(方法权项步骤，独权+从权)。本文中的设备可以是服务器、pc、pad、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

为页面提示框的主框架和指向标分别定义第一样式名和第二样式名，其中，样式名用于区分主框架和指向标的属性设置；在主框架的第一样式名下设置第一背景色变量；在指向标的第二样式名下设置第二背景色变量，其中，第二背景色变量的设定值直接引用第一背景色变量的设定值。

优选地，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

为页面提示框定义专属样式名，其中，专属样式名用于定位页面提示框的指向标。

优选地，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：

为页面提示框设置不同指示方向的指向标，其中，指向标的指示方向至少包括以下之一：上、下、左、右；在指向标的第二样式名下，设置不同指示方向的第二背景色变量。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。存储器是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

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