页面控件展示方法、装置及计算机可读存储介质与流程

1.本发明涉及计算机技术领域，具体而言，涉及一种页面控件展示方法、装置、计算机可读存储介质及电子设备。


背景技术：

2.页面控件展示情况，不仅影响软件产品的运行效率，更影响用户的体验。目前在遇到页面控件各种不同展示状态时，通常是仅变更文字内容以进行展示，对于不同的展示状态，无法实现较为明显的区分，用户体验效果不佳。


技术实现要素：

3.鉴于此，本发明提出了一种页面控件展示方法、装置、计算机可读存储介质及电子设备，以解决现有技术中页面控件的展示状态不易于用户区分的问题。
4.第一方面，本发明实施例提供了一种页面控件展示方法，所述方法包括：监听目标控件的触发事件，基于所述触发事件触发所述目标控件所对应的列表显示；接收用户对所述列表中的选项的选择操作信息，根据所选择的选项切换所述目标控件的展示状态。
5.进一步地，所述方法还包括：确定所述目标控件在展示页面上所对应的页面区域，根据所选择的选项切换所述页面区域的展示状态。
6.进一步地，所述监听目标控件的触发事件，基于所述触发事件触发所述目标控件所对应的列表显示，包括：当监听到目标控件的触发事件时，将所述目标控件所对应的列表中的所有选项加载至展示页面。
7.进一步地，所述根据所选择的选项切换所述目标控件的展示状态，包括：向服务器发送切换请求，所述切换请求中至少包括目标控件信息以及所选择的选项信息；接收服务器基于所述目标控件信息以及所选择的选项信息所返回的展示效果信息，基于所述展示效果信息切换所述目标控件的展示状态。
8.进一步地，所述根据所选择的选项切换所述目标控件的展示状态，包括：基于所述目标控件信息以及所选择的选项信息在本地查找对应的展示效果信息，基于所述展示效果信息切换所述目标控件的展示状态。
9.进一步地，所述展示效果包括：显示颜色、显示样式以及显示字体。
10.第二方面，本发明实施例还提供了一种页面控件展示装置，所述装置包括：目标控件触发单元，用于监听目标控件的触发事件，基于所述触发事件触发所述目标控件所对应的列表显示；目标控件切换单元，用于接收用户对所述列表中的选项的选择操作信息，根据所选择的选项切换所述目标控件的展示状态。
11.进一步地，所述装置还包括：页面区域切换单元，用于确定所述目标控件在展示页面上所对应的页面区域，根据所选择的选项切换所述页面区域的展示状态。
12.进一步地，所述目标控件触发单元，还用于：当监听到目标控件的触发事件时，将所述目标控件所对应的列表中的所有选项加载至展示页面。
13.进一步地，所述根据所选择的选项切换所述目标控件的展示状态，包括：向服务器发送切换请求，所述切换请求中至少包括目标控件信息以及所选择的选项信息；接收服务器基于所述目标控件信息以及所选择的选项信息所返回的展示效果信息，基于所述展示效果信息切换所述目标控件的展示状态。
14.进一步地，所述根据所选择的选项切换所述目标控件的展示状态，包括：基于所述目标控件信息以及所选择的选项信息在本地查找对应的展示效果信息，基于所述展示效果信息切换所述目标控件的展示状态。
15.进一步地，所述展示效果包括：显示颜色、显示样式以及显示字体。
16.第三方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现本发明各实施例提供的方法。
17.第四方面，本发明实施例还提供了一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现本发明各实施例提供的方法。
18.本发明实施例提供的页面控件展示方法及装置，通过监听目标控件的触发事件，触发目标控件所对应的列表显示，并根据用户从列表中所选择的选项切换目标控件的展示状态，可以实现不同状态下的数据都具有不同的展示效果，可以是用户更好更快地区分不同状态下的数据，便于用户筛选到符合自己状态需求的数据，极大的提高了用户的使用体验。
附图说明
19.图1为本发明一个示例性的实施例提供的系统架构示意图；
20.图2为本发明一个示例性的实施例提供的页面控件展示方法的流程图；
21.图3为本发明一个示例性的实施例提供的页面控件展示方法的界面示意图；
22.图4为本发明一个示例性的实施例提供的页面控件展示装置的结构示意图；
23.图5为本发明一个示例性的实施例提供的电子设备的框图。
具体实施方式
24.现在参考附图介绍本发明的示例性实施方式，然而，本发明可以用许多不同的形式来实施，并且不局限于此处描述的实施例，提供这些实施例是为了详尽地且完全地公开本发明，并且向所属技术领域的技术人员充分传达本发明的范围。对于表示在附图中的示例性实施方式中的术语并不是对本发明的限定。在附图中，相同的单元/元件使用相同的附图标记。
25.除非另有说明，此处使用的术语(包括科技术语)对所属技术领域的技术人员具有通常的理解含义。另外，可以理解的是，以通常使用的词典限定的术语，应当被理解为与其相关领域的语境具有一致的含义，而不应该被理解为理想化的或过于正式的意义。
26.图1为本发明一个示例性的实施例提供的系统架构示意图。
27.如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105、106、107和108。网络103用以在终端设备101、102、103和服务器105、106、107、108之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆
等等。
28.用户110可以使用终端设备101、102、103通过网络104与服务器105、106、107、108交互，以访问各种服务，例如浏览网页、下载数据等。终端设备101、102、103上可以安装有各种客户端应用，例如可以接入统一资源定位符url云服务的应用，包括但不限于浏览器、安全应用等。
29.终端设备101、102、103可以是各种电子设备，包括但不限于个人电脑、智能手机、智能电视、平板电脑、个人数字助理、电子书阅读器等等。
30.服务器105、106、107、108可以是提供各种服务的服务器。服务器可以响应于用户的服务请求而提供服务。可以理解，一个服务器可以提供一种或多种服务，同一种服务也可以由多个服务器来提供。
31.应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
32.图2为本发明一个示例性的实施例提供的页面控件展示方法的流程图。
33.如图2所示，该方法包括：
34.步骤s201：监听目标控件的触发事件，基于触发事件触发目标控件所对应的列表显示。
35.进一步地，步骤s201，包括：
36.当监听到目标控件的触发事件时，将目标控件所对应的列表中的所有选项加载至展示页面。
37.目标控件的触发事件，可以根据需求预先设置的，触发事件可以为点击事件，也可以为滚动事件。
38.图3为本发明一个示例性的实施例提供的页面控件展示方法的界面示意图。如图3所示，当监听到点击跟进状态栏的下拉按钮时，将跟进状态栏中所有的状态选项(包括：未处理、跟进中、无意向以及有意向)加载至页面展示。
39.步骤s202：接收用户对列表中的选项的选择操作信息，根据所选择的选项切换目标控件的展示状态。
40.展示状态信息可以保存在客户端本地，也可以保存于服务器端。
41.进一步地，根据所选择的选项切换目标控件的展示状态，包括：
42.向服务器发送切换请求，切换请求中至少包括目标控件信息以及所选择的选项信息；
43.接收服务器基于目标控件信息以及所选择的选项信息所返回的展示效果信息，基于展示效果信息切换目标控件的展示状态。
44.进一步地，展示效果包括：显示颜色、显示样式以及显示字体。
45.例如，向服务器发送跟进状态栏由“未处理”切换至“跟进中”的请求，接收服务器返回的字体的rgb色值是(0,255,0)，跟进状态栏切换为绿色字体的“跟进中”。
46.通过服务端保存展示效果信息，利于组件的复用，提高开发效率。
47.进一步地，根据所选择的选项切换目标控件的展示状态，包括：
48.基于目标控件信息以及所选择的选项信息在本地查找对应的展示效果信息，基于展示效果信息切换目标控件的展示状态。
49.例如，可以提供自定义功能，用户可以在客户端自行设定不同选项对应的展示效果，并在设定完成后，将所设定的映射关系保存在客户端本地。
50.通过客户端本地保存展示效果信息，便于用户根据需求自定义展示效果，同时本地加载运行，提高了展示状态切换的效率。
51.在一些实施例中，可以维护包括控件信息、选项信息和展示效果信息的映射表。第一映射表中包括控件信息与选项信息的映射关系，例如控件a与选项b、c、d、e有映射关系，则控件a的下拉菜单被触发时，可以展示出选项b、c、d、e。第二映射表中包括选项信息与展示效果信息的映射关系，例如选项b与展示效果r具有映射关系，当选项b被选择后，控件a将以展示效果r来展示选项b所对应的展示信息。其中，第一映射表和第二映射表可以在同一张表中，或者也可以在不同的表中。
52.映射表可以被置于服务端，由页面开发者进行维护，此时客户端在执行选择操作时均需发送请求到服务端。映射表也可以被置于客户端，用户可以在客户端自定义映射关系，此时客户端在执行选择操作时不需要发送请求到客户端。
53.进一步地，该方法还包括：
54.确定目标控件在展示页面上所对应的页面区域，根据所选择的选项切换页面区域的展示状态。
55.页面区域可以为与目标控件具有直接关联关系的事件所组成的区域，具体地，可以为目标控件所在的行或列。
56.例如，跟进状态栏为“未处理”时，“未处理”呈红色，并且“未处理”所在行的页面底色为浅红色；当跟进状态栏由“未处理”切换至“跟进中”时，状态栏“跟进中”呈绿色，并且该行的页面底色对应变为浅绿色。
57.在一些实施例中，目标控件所对应的页面区域也可以由用户自行设定。具体而言，可以在页面中展示自定义控件，用户触发自定义控件后，确定当前页面的布局信息，在当前页面之上建立与当前页面具有同样布局的虚拟图层，虚拟图层中对应于当前页面的不同组件具有同样位置的虚拟组件。该虚拟组件可以通过点击等操作来进行设定，以对应到目标控件。
58.相应地，选项对应的展示效果可以是页面相应的展示区域的显示颜色、显示样式以及显示字体。
59.通过目标控件所对应的页面区域跟随目标控件的切换对应切换展示状态，使得每个状态下的数据都具有非常直观的展示，便于用户快速筛选到所需数据。
60.上述实施例，通过监听目标控件的触发事件，触发目标控件所对应的列表显示，并根据用户从列表中所选择的选项切换目标控件的展示状态，可以实现不同状态下的数据都具有不同的展示效果，可以是用户更好更快地区分不同状态下的数据，便于用户筛选到符合自己状态需求的数据，极大的提高了用户的使用体验。
61.图4为本发明一个示例性的实施例提供的页面控件展示装置的结构示意图。
62.如图4所示，该装置包括：
63.目标控件触发单元401，用于监听目标控件的触发事件，基于触发事件触发目标控件所对应的列表显示。
64.进一步地，目标控件触发单元401，还用于：
65.当监听到目标控件的触发事件时，将目标控件所对应的列表中的所有选项加载至展示页面。
66.目标控件的触发事件，可以根据需求预先设置的，触发事件可以为点击事件，也可以为滚动事件。
67.图3为本发明一个示例性的实施例提供的页面控件展示方法的界面示意图。如图3所示，当监听到点击跟进状态栏的下拉按钮时，将跟进状态栏中所有的状态选项(包括：未处理、跟进中、无意向以及有意向)加载至页面展示。
68.目标控件切换单元402，用于接收用户对列表中的选项的选择操作信息，根据所选择的选项切换目标控件的展示状态。
69.展示状态信息可以保存在客户端本地，也可以保存于服务器端。
70.进一步地，根据所选择的选项切换目标控件的展示状态，包括：
71.向服务器发送切换请求，切换请求中至少包括目标控件信息以及所选择的选项信息；
72.接收服务器基于目标控件信息以及所选择的选项信息所返回的展示效果信息，基于展示效果信息切换目标控件的展示状态。
73.进一步地，展示效果包括：显示颜色、显示样式以及显示字体。
74.例如，向服务器发送跟进状态栏由“未处理”切换至“跟进中”的请求，接收服务器返回的字体的rgb色值是(0,255,0)，跟进状态栏切换为绿色字体的“跟进中”。
75.通过服务端保存展示效果信息，利于组件的复用，提高开发效率。
76.进一步地，根据所选择的选项切换目标控件的展示状态，包括：
77.基于目标控件信息以及所选择的选项信息在本地查找对应的展示效果信息，基于展示效果信息切换目标控件的展示状态。
78.例如，可以提供自定义功能，用户可以在客户端自行设定不同选项对应的展示效果，并在设定完成后，将所设定的映射关系保存在客户端本地。
79.通过客户端本地保存展示效果信息，便于用户根据需求自定义展示效果，同时本地加载运行，提高了展示状态切换的效率。
80.进一步地，该装置还包括：
81.页面区域切换单元，用于确定目标控件在展示页面上所对应的页面区域，根据所选择的选项切换页面区域的展示状态。
82.页面区域可以为与目标控件具有直接关联关系的事件所组成的区域，具体地，可以为目标控件所在的行或列。
83.例如，跟进状态栏为“未处理”时，“未处理”呈红色，并且“未处理”所在行的页面底色为浅红色；当跟进状态栏由“未处理”切换至“跟进中”时，状态栏“跟进中”呈绿色，并且该行的页面底色对应变为浅绿色。
84.通过目标控件所对应的页面区域跟随目标控件的切换对应切换展示状态，使得每个状态下的数据都具有非常直观的展示，便于用户快速筛选到所需数据。
85.上述实施例，通过监听目标控件的触发事件，触发目标控件所对应的列表显示，并根据用户从列表中所选择的选项切换目标控件的展示状态，可以实现不同状态下的数据都具有不同的展示效果，可以是用户更好更快地区分不同状态下的数据，便于用户筛选到符
合自己状态需求的数据，极大的提高了用户的使用体验。
86.图5为本发明一个示例性的实施例提供的电子设备的框图。如图5所示，电子设备包括一个或多个处理器510和存储器520。
87.处理器510可以是中央处理单元(cpu)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。
88.存储器520可以包括一个或多个计算机程序产品，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(ram)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(rom)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器510可以运行所述程序指令，以实现上文所述的本发明的各个实施例的页面控件展示方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置530和输出装置540，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。
89.此外，该输入装置530还可以包括例如键盘、鼠标等等。
90.该输出装置540可以向外部输出各种信息。该输出设备540可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。
91.当然，为了简化，图5中仅示出了该电子设备中与本发明有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。
92.示例性计算机程序产品和计算机可读存储介质除了上述方法和设备以外，本发明的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本发明各种实施例的页面控件展示方法中的步骤。
93.所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本发明实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如java、c 等，还包括常规的过程式程序设计语言，诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。
94.此外，本发明的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本发明各种实施例的页面控件展示方法中的步骤。
95.所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。
96.以上结合具体实施例描述了本发明的基本原理，但是，需要指出的是，在本发明中
提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本发明的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本发明为必须采用上述具体的细节来实现。
97.本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
98.本发明中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。
99.可能以许多方式来实现本发明的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本发明的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本发明的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本发明实施为记录在记录介质中的程序，这些程序包括用于实现根据本发明的方法的机器可读指令。因而，本发明还覆盖存储用于执行根据本发明的方法的程序的记录介质。
100.还需要指出的是，在本发明的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本发明的等效方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本发明。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本发明的范围。因此，本发明不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。
101.为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本发明的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。