CN113568540A - Web应用中的功能菜单显示方法、装置、设备及介质 - Google Patents
Web应用中的功能菜单显示方法、装置、设备及介质 Download PDFInfo
- Publication number
- CN113568540A CN113568540A CN202110862412.6A CN202110862412A CN113568540A CN 113568540 A CN113568540 A CN 113568540A CN 202110862412 A CN202110862412 A CN 202110862412A CN 113568540 A CN113568540 A CN 113568540A
- Authority
- CN
- China
- Prior art keywords
- function menu
- menu
- display
- function
- web application
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000007667 floating Methods 0.000 claims abstract description 65
- 230000008707 rearrangement Effects 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 3
- 230000006870 function Effects 0.000 description 243
- 238000010586 diagram Methods 0.000 description 16
- 230000000007 visual effect Effects 0.000 description 6
- 230000004044 response Effects 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例公开了Web应用中的功能菜单显示方法、装置、设备及介质。该方法包括:在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;以平铺的方式将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;其中,功能菜单元素包括:一级功能菜单项或者与一级功能菜单匹配的至少一个层级的下级功能菜单项。通过本发明实施例的技术方案,能够实现Web应用功能菜单可伸缩、可扩展、不占用太多空间且用户操作方便。
Description
技术领域
本发明实施例涉及计算机Web应用前端领域,尤其涉及一种Web应用中的功能菜单显示方法、装置、设备及介质。
背景技术
随着互联网技术的兴起,在计算机设备的管理与交互中,基于Web方式的应用成为目前的主流。
在现有技术中,随着功能模块的不断增加扩展,大多数Web应用通常采用顶部导航或者左侧导航或者两者相结合的方式,解决越来越多的导航入口及导航菜单无处安放的问题。其中,在图1示出了现有技术中的一种功能菜单顶部导航的显示示意图;在图2中示出了现有技术中的一种功能菜单左侧自动折叠导航的显示示意图。
如图1所示,顶部导航的方式比较适合功能模块较少的情况,如果功能模块较多,则更多的入口菜单将无法摆放,并且,因为空间有限,通过翻页方式又影响交互效果;如图2所示,左侧自动折叠导航的方式可以一定程度减少空间占用,但对于用户来讲需要先找到菜单位置使之弹出,再找到对应功能菜单,此时会遮盖或者排挤内容区影响整体页面布局。
发明内容
本发明实施例提供一种Web应用中的功能菜单显示方法、装置、设备及介质,以提供一种新的Web应用功能菜单的显示控制方式,以满足人们日益增长的便捷化、个性化功能菜单显示需求。
第一方面,本发明实施例提供了一种Web应用中的功能菜单显示方法,包括:
在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
第二方面,本发明实施例还提供了一种Web应用中的功能菜单显示装置,该装置包括:
第一浮层展示模块,用于在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
功能菜单元素集合获取模块,用于在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
第二浮层展示模块,用于以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
第三方面,本发明实施例还提供了一种计算机设备,所述计算机设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如本发明任一实施例所述的Web应用中的功能菜单显示方法。
第四方面,本发明实施例还提供了一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如本发明任一实施例所述的Web应用中的功能菜单显示方法。
本发明实施例的技术方案通过在检测到对Web应用的显示页面中目标控件的选择时,将第一显示区域内的一级导航菜单栏进行浮层展示,在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,以平铺的方式将各功能菜单元素填充于二级导航菜单栏中,并将第二显示区域内的二级导航菜单栏进行浮层展示,使得Web应用中的功能菜单可以快捷展现,本发明实施例的技术方案创造性的提供了一种新的Web应用中的功能菜单显示方式,满足人们日益增长的便捷化、个性化功能菜单显示需求,特别是在Web功能菜单中的功能菜单项繁多且组织架构复杂的应用场景中,可以使得用户在较佳的视觉效果下,便捷且快速的获取所需的功能菜单项。
附图说明
图1为现有技术中的一种功能菜单顶部导航的显示示意图;
图2为现有技术中的一种功能菜单左侧自动折叠导航的显示示意图;
图3是本发明实施例一中的一种Web应用中的功能菜单显示方法的流程图;
图4a是本发明实施例一所适用的一种Web应用中的目标控件未被选择时,Web应用的显示页面的默认显示状态示意图;
图4b是本发明实施例一所适用的一种Web应用中的目标控件被选择时,在显示页面的第一显示区域内,将一级导航菜单栏浮层展示的示意图;
图4c是本发明实施例一所适用的一种当对一级导航菜单栏中的功能菜单入口控件进行选择时,对Web应用中的二级导航菜单栏浮层展示示意图;
图5是本发明实施例二中的一种Web应用中的功能菜单显示方法的流程图;
图6是本发明实施例二所适用的一种Web应用中的快捷功能菜单项示意图;
图7是本发明实施例三中的一种Web应用中的功能菜单显示装置的结构示意图;
图8是本发明实施例四中的一种计算机设备的结构示意图。
具体实施方式
下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是,此处所描述的具体实施例仅仅用于解释本发明,而非对本发明的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本发明相关的部分而非全部结构。
实施例一
图3为本发明实施例一提供的一种Web应用中的功能菜单显示方法的流程图,本实施例可适用于将Web应用中的功能菜单快捷展现的情况,该方法可以由Web应用中的功能菜单显示装置来执行,该装置可采用硬件和/或软件的方式实现,并一般可以集成在Web应用内部,并在Web应用下载至浏览器客户端后,在浏览器客户端内触发执行。
如图1所示,该方法具体包括如下步骤:
S110、在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示。
其中,目标控件指的是在Web应用的显示页面中放置的可视化图形元件,如按钮、文件编辑框等,大多数目标控件具有执行功能或通过事件引发代码运行并完成响应的功能。在本实施例中,所述目标控件用于为一级导航菜单栏提供入口,也即,所述目标控件用于将一级导航菜单栏进行浮层展示。
第一显示区域指的是用于显示一级导航菜单栏的区域;一级导航菜单栏指的是包含功能菜单入口控件的导航菜单栏主菜单。用户通过点击该一级导航菜单栏的区域中的功能菜单入口控件,可以相应在新的显示区域内显示完整的功能菜单层级架构。当然,本领域技术人员可以理解的是,在该一级导航菜单栏中还可以包括用户自定义配置的一项或者多项功能菜单项,或者用户倾向性频繁点击的一项或者多项功能菜单项,本实施例对此并不进行限制。
本领域技术人员可以理解的是,在通过浏览器加载Web应用后,该Web应用中包括的各项内容会以显示页面的形式在该浏览器内被显示出来。具体的,该第一显示区域具体是指浏览器中,用于完整显示该显示页面的显示区域的一部分,该第一显示区域可以为上述显示区域的上部、下部、左侧或者右侧等,本实施例对此并不进行限制。
其中,浮层展示指的是以在现有页面顶层浮现的形式显示一级导航菜单栏,使用浮层展示可使得原有显示区域中所显示的各项内容的显示布局保持不变,不会因为在该第一显示区域内显示第一导航菜单栏,而挤压了显示页面中的原始显示内容,使得该原始显示内容发生了布局变化,提升了用户的使用感。
从视觉角度考虑,左上角是用户视觉视线的第一个热点区域,因此,在一个可选的实施例中,可以将该目标控件设置在所述显示页面的左上角。
一般来说,目前常用的各种Web应用均在最上部设置有全局标题栏,相应的,可以适应性的将所述目标控件设置于所述显示页面上部的全局标题栏的最左侧,以使得用户快速在显示页面中,定位目标控件(也即,一级导航菜单栏的入口)所在的位置。可选的,可以针对该目标控件设置一个标识明显的小图标,并将一级导航菜单栏作为浮层收纳到这个小图标中,方便用户找到一级导航菜单栏的入口。
其中,在图4a中示出了本发明实施例一所适用的一种Web应用中的目标控件未被选择时,Web应用的显示页面的默认显示状态示意图。如图4a所示,在Web页面的所述显示页面上部的全局标题栏的最左侧,设置一个“XXX应用系统”的目标控件,当该目标控件未被选择时,可以在该显示页面的显示区域内显示所需显示的各项内容数据。
图4b是本发明实施例一所适用的一种Web应用中的目标控件被选择时,在显示页面的第一显示区域内,将一级导航菜单栏浮层展示的示意图。如图4b所示,当用户在该显示页面中选择了该目标控件,可以在该显示页面的最左侧(第一显示区域),弹出一级导航菜单栏,并在该一级导航菜单栏中对功能菜单入口控件进行展示。
S120、在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合。
其中,功能菜单入口控件,用于提供完整的功能菜单层级架构的展示入口,该功能菜单层级架构中,包括有与Web页面匹配的功能菜单元素集合。该功能菜单元素集合中包括有一个或者多个功能菜单元素,每个功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
可以理解的是,一个Web应用可以包含有多个功能菜单项,每个功能菜单项在被选择后,可以相应触发执行与各功能菜单项匹配的应用功能。但是,上述多个功能菜单项和文件夹中文件的索引方式类似,可能是位于某一个具体的功能菜单层级下的,例如,“下载”功能是位于“常用功能”这个功能菜单项下的一个具体的功能菜单项。也即,该功能菜单层级架构由多个功能菜单元素构成,而每个功能菜单元素可以是一个具体的功能菜单项,也可以是具体功能菜单结构下的一个或者多个功能菜单项。
具体的,当对一级导航菜单栏中的功能菜单入口控件进行选择时,则将与Web页面匹配的功能菜单元素集合进行用户展示,便于用户对所需的功能菜单项的选择。
S130、以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示。
二级导航菜单栏指的是一级导航菜单栏下的子菜单栏,用于以平铺的方式,将各功能菜单元素在第二显示区域内,进行用户展示。
其中,第二显示区域指的是Web应用显示页面中用于对二级导航菜单栏进行显示的区域。
在本实施例的一个可选的实施方式中,可以将第一显示区域设置于所述显示页面的最左侧,并将所述第二显示区域与所述第一显示区域贴近设置。也即,第二显示区域的设置位置接近显示页面中部。具体的,可以通过一个半透明或者不透明的浮层,将该二级导航菜单栏在第二显示区域内进行展示。
其中,之所以将第二显示区域与第一显示区域进行区别,且以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,就是为了能够在二级导航菜单栏中,将各功能菜单元素进行完整展示,避免用户通过滑动进度条的方式,在一个很小的显示区域内上下或者左右滑动获取所需的功能菜单项,以进一步缩短用户获取所需功能菜单项的时间。
如图4c所示,即为本发明实施例所适用的一种当对一级导航菜单栏中的功能菜单入口控件进行选择时,对Web应用中的二级导航菜单栏浮层展示示意图。
如图4c所示,当用户在该显示页面中选择了一级导航菜单栏中的功能菜单入口控件,可以在紧挨该显示页面的右侧(第二显示区域),弹出二级导航菜单栏,并在该二级导航菜单栏中对一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项进行展示。
本发明实施例的技术方案通过在检测到对Web应用的显示页面中目标控件的选择时,将第一显示区域内的一级导航菜单栏进行浮层展示,在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,以平铺的方式将各功能菜单元素填充于二级导航菜单栏中,并将第二显示区域内的二级导航菜单栏进行浮层展示,使得Web应用中的功能菜单可以快捷展现,本发明实施例的技术方案创造性的提供了一种新的Web应用中的功能菜单显示方式,满足人们日益增长的便捷化、个性化功能菜单显示需求,特别是在Web功能菜单中的功能菜单项繁多且组织架构复杂的应用场景中,可以使得用户在较佳的视觉效果下,便捷且快速的获取所需的功能菜单项。
实施例二
图5为本发明实施例二提供的一种Web应用中的功能菜单显示方法的流程图。在本实施例中,将在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示,具体为:获取目标数量的快捷功能菜单项,并以列表的方式,将各所述快捷功能菜单项和所述功能菜单入口控件,填充于一级导航菜单栏中;在所述第一显示区域内,将所述一级导航菜单栏进行浮层展示;
相应的,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示之后,所述方法还包括:在检测到对一级导航菜单栏中的目标快捷功能菜单项的选择,触发执行与所述目标快捷功能菜单项匹配的应用功能。
如图5所示,该方法具体包括如下步骤:
S210、在检测到对Web应用的显示页面中目标控件的选择时,获取目标数量的快捷功能菜单项,并以列表的方式,将各所述快捷功能菜单项和所述功能菜单入口控件,填充于一级导航菜单栏中。
其中,目标数量指的是获取的快捷功能菜单项的数量,所述目标数量可以为根据用户使用习惯通过统计菜单使用率得到的快捷功能菜单项设定的数量,也可以为人工设定的快捷功能菜单项的数量,本实施例对此不进行限制。
快捷功能菜单项指的是帮助用户在第一时间里迅速找到自己想要的功能的菜单。示例性的,将“打开音乐播放器”功能以快捷功能菜单的方式设定于一级导航菜单栏中,则当用户想打开音乐播放器时,即可直接使用快捷功能菜单,而不用再去菜单栏中一级级选择音乐播放器。
如图6所示为本实施例所适用的一种Web应用中的快捷功能菜单项示意图。如图6所示,可以在功能菜单入口控件的下方,以列表的形式将各快捷功能菜单项填充于一级导航菜单栏中,便于用户的使用。
可选的,在获取目标数量的快捷功能菜单项之前,所述方法还可以包括:
根据菜单项的标准显示尺寸和所述第一显示区域的显示面积,计算所述第一显示区域能够以列表形式完整显示的菜单项数量值;根据所述菜单项数量值,计算所述目标数量,其中所述目标数量小于所述菜单项数量值;在与所述Web应用对应的全部功能菜单项中,选取所述目标数量的功能菜单项,作为所述快捷功能菜单项。
在一个具体的实施例中,若菜单项的标准显示尺寸为30mm*30mm,第一显示区域的显示面积为90000mm2,则第一显示区域能够以列表形式完整显示的菜单项数量值即为10,因此,可选择小于10的数值作为目标数量,以此在Web应用对应的全部功能菜单项中选取目标数量的功能菜单项,作为所述快捷功能菜单项。
上述技术方案能够使得第一显示区域以列表形式完整显示出最大数量的菜单项,既避免了资源的浪费,又可以在不引入滑动进度条的前提下,最大程度上将功能菜单项设定为快捷功能菜单项,为用户的操作提供了便利。
可选的,在与所述Web应用对应的全部功能菜单项中,选取所述目标数量的功能菜单项,作为所述快捷功能菜单项,可以包括:
根据与所述Web应用匹配的用户行为数据,统计得到与每个功能菜单项分别对应的用户使用频率;按照用户使用频率从大到小的顺序,选择所述目标数量的功能菜单项,作为所述快捷功能菜单项。
具体的,可以按照用户对各功能菜单的使用频率选择目标数量的功能菜单项,用户的使用频率越大说明用户越经常使用该功能菜单,因此,可将用户使用频率较高的功能菜单选作目标数量的功能菜单项,作为所述快捷功能菜单项。
上述技术方案通过按照用户的使用频率选择目标数量的功能菜单项,作为快捷功能菜单项,可在满足用户使用习惯的基础上,为用户的操作提供便利。
S220、在所述第一显示区域内,将所述一级导航菜单栏进行浮层展示。
S230、获取用户在所述一级导航菜单栏所选择的目标元素的类型:如果所述目标元素为功能菜单入口控件,则执行S240;如果所述目标元素为目标快捷功能菜单项,则执行S250。
S240、获取与Web页面匹配的功能菜单元素集合,执行S260。
S250、触发执行与所述目标快捷功能菜单项匹配的应用功能。
S260、以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示。
具体的,当检测到用户选择了一级导航菜单栏中的目标快捷功能菜单项时,则触发相应的应用功能,以响应用户的应用功能需求。
在一个可选的实施例中,在捕捉到对Web应用的显示页面中目标控件的鼠标滑入事件时,确定检测到对Web应用的显示页面中目标控件的选择;在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示之后,在捕捉到对Web应用的显示页面中目标控件的鼠标滑出事件时,取消对所述一级导航菜单栏的浮层展示;在捕捉到对一级导航菜单栏中的功能菜单入口控件的鼠标滑入事件时,确定检测到对一级导航菜单栏中的功能菜单入口控件的选择;在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示之后,在捕捉到对一级导航菜单栏中的功能菜单入口控件的鼠标滑出事件时,取消对所述二级导航菜单栏的浮层展示。
其中,鼠标滑出事件指的是鼠标滑出Web应用的显示页面中的情况;鼠标滑入事件指的是鼠标滑入Web应用的显示页面中的情况。
可选的,所述目标控件位于所述显示页面上部的全局标题栏的最左侧;
所述第一显示区域位于所述显示页面的最左侧,所述第二显示区域与所述第一显示区域贴近设置。
在另一个可选的实施例中,所述方法还可以响应于功能菜单元素重排列指令,将所述功能菜单元素集合中各功能菜单元素的排布顺序,和/或各所述功能菜单元素的显示层级进行匹配的调整,并更新存储调整结果。
其中,重排列指令指的是,用于指示功能菜单元素重新排布顺序的指令。通常重排列指令可根据用户的使用习惯进行设定,本实施例对此不进行限制。
具体的,功能菜单元素集合中各功能菜单元素可根据重排列指令进行重新排布顺序,并且各功能菜单元素的显示层级也可根据用户的需求进行相应的调整。使得用户可以根据自身的使用习惯随时可以调整各功能菜单元素的排列顺序以及显示层级,便于用户的使用。
本发明实施例的技术方案,通过以列表的方式将目标数量的快捷功能菜单项和功能菜单入口控件,填充于一级导航菜单栏中,可以快捷的展现Web应用中的功能菜单,并且,为用户的操作提供了便利。
实施例三
图7为本发明实施例三提供的一种Web应用中的功能菜单显示装置的结构示意图,该装置可以执行上述各实施例中涉及到的Web应用中的功能菜单显示方法。该装置可采用软件和/或硬件的方式实现,如图7所示,所述Web应用中的功能菜单显示装置具体包括:第一浮层展示模块410、功能菜单元素集合获取模块420、第二浮层展示模块430。
其中,第一浮层展示模块410,用于在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
功能菜单元素集合获取模块420,用于在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
第二浮层展示模块430,用于以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
本发明实施例的技术方案通过在检测到对Web应用的显示页面中目标控件的选择时,将第一显示区域内的一级导航菜单栏进行浮层展示,在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,以平铺的方式将各功能菜单元素填充于二级导航菜单栏中,并将第二显示区域内的二级导航菜单栏进行浮层展示,使得Web应用中的功能菜单可以快捷展现,本发明实施例的技术方案创造性的提供了一种新的Web应用中的功能菜单显示方式,满足人们日益增长的便捷化、个性化功能菜单显示需求,特别是在Web功能菜单中的功能菜单项繁多且组织架构复杂的应用场景中,可以使得用户在较佳的视觉效果下,便捷且快速的获取所需的功能菜单项。
可选的,第一浮层展示模块410可具体用于,获取目标数量的快捷功能菜单项,并以列表的方式,将各所述快捷功能菜单项和所述功能菜单入口控件,填充于一级导航菜单栏中;在所述第一显示区域内,将所述一级导航菜单栏进行浮层展示。
相应的,Web应用中的功能菜单显示装置还包括应用功能触发执行模块,用于在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示之后,在检测到对一级导航菜单栏中的目标快捷功能菜单项的选择,触发执行与所述目标快捷功能菜单项匹配的应用功能。
可选的,Web应用中的功能菜单显示装置还包括快捷功能菜单项获取模块,所述快捷功能菜单项获取模块可以包括菜单项数量值计算单元,目标数量计算单元以及快捷功能菜单项获取单元;
其中,菜单项数量值计算单元,用于在获取目标数量的快捷功能菜单项之前,根据菜单项的标准显示尺寸和所述第一显示区域的显示面积,计算所述第一显示区域能够以列表形式完整显示的菜单项数量值;
目标数量计算单元,用于根据所述菜单项数量值,计算所述目标数量,其中所述目标数量小于所述菜单项数量值;
快捷功能菜单项获取单元,用于在与所述Web应用对应的全部功能菜单项中,选取所述目标数量的功能菜单项,作为所述快捷功能菜单项。
可选的,快捷功能菜单项获取单元可具体用于,根据与所述Web应用匹配的用户行为数据,统计得到与每个功能菜单项分别对应的用户使用频率;按照用户使用频率从大到小的顺序,选择所述目标数量的功能菜单项,作为所述快捷功能菜单项。
可选的,第一浮层展示模块410可以包括鼠标滑入事件第一捕捉单元,用于在捕捉到对Web应用的显示页面中目标控件的鼠标滑入事件时,确定检测到对Web应用的显示页面中目标控件的选择;
相应的,Web应用中的功能菜单显示装置还包括一级导航菜单栏浮层取消模块,用于在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示之后,在捕捉到对Web应用的显示页面中目标控件的鼠标滑出事件时,取消对所述一级导航菜单栏的浮层展示;
相应的,功能菜单元素集合获取模块420可以包括鼠标滑入事件第二捕捉单元,用于在捕捉到对一级导航菜单栏中的功能菜单入口控件的鼠标滑入事件时,确定检测到对一级导航菜单栏中的功能菜单入口控件的选择;
相应的,Web应用中的功能菜单显示装置还包括二级导航菜单栏浮层取消模块,用于在捕捉到对一级导航菜单栏中的功能菜单入口控件的鼠标滑出事件时,取消对所述二级导航菜单栏的浮层展示。
可选的,Web应用中的功能菜单显示装置还包括功能菜单元素重排模块,用于响应于功能菜单元素重排列指令,将所述功能菜单元素集合中各功能菜单元素的排布顺序,和/或各所述功能菜单元素的显示层级进行匹配的调整,并更新存储调整结果。
可选的,所述目标控件位于所述显示页面上部的全局标题栏的最左侧;所述第一显示区域位于所述显示页面的最左侧,所述第二显示区域与所述第一显示区域贴近设置。
本发明实施例所提供的Web应用中的功能菜单显示装置可执行本发明任意实施例所提供的Web应用中的功能菜单显示方法,具备执行方法相应的功能模块和有益效果。
实施例四
图8为本发明实施例四提供的一种计算机设备的结构示意图,如图8所示,该计算机设备包括处理器510、存储器520、输入装置530和输出装置540;计算机设备中处理器510的数量可以是一个或多个,图8中以一个处理器510为例;计算机设备中的处理器510、存储器520、输入装置530和输出装置540可以通过总线或其他方式连接,图8中以通过总线连接为例。
存储器520作为一种计算机可读存储介质,可用于存储软件程序、计算机可执行程序以及模块,如本发明实施例中的Web应用中的功能菜单显示方法对应的程序指令/模块(例如,Web应用中的功能菜单显示装置中的第一浮层展示模块410、功能菜单元素集合获取模块420、第二浮层展示模块430)。处理器510通过运行存储在存储器520中的软件程序、指令以及模块,从而执行计算机设备的各种功能应用以及数据处理,即实现上述的Web应用中的功能菜单显示方法。
该方法包括:
在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
存储器520可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序;存储数据区可存储根据终端的使用所创建的数据等。此外,存储器520可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中,存储器520可进一步包括相对于处理器510远程设置的存储器,这些远程存储器可以通过网络连接至计算机设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置530可用于接收输入的数字或字符信息,以及产生与计算机设备的用户设置以及功能控制有关的键信号输入。输出装置540可包括显示屏等显示设备。
实施例五
本发明实施例五还提供一种包含计算机可执行指令的存储介质,所述计算机可执行指令在由计算机处理器执行时用于执行一种Web应用中的功能菜单显示方法,该方法包括:
在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
当然,本发明实施例所提供的一种包含计算机可执行指令的存储介质,其计算机可执行指令不限于如上所述的方法操作,还可以执行本发明任意实施例所提供的Web应用中的功能菜单显示方法中的相关操作。
通过以上关于实施方式的描述,所属领域的技术人员可以清楚地了解到,本发明可借助软件及必需的通用硬件来实现,当然也可以通过硬件实现,但很多情况下前者是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在计算机可读存储介质中,如计算机的软盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、闪存(FLASH)、硬盘或光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。
值得注意的是,上述Web应用中的功能菜单显示装置的实施例中,所包括的各个单元和模块只是按照功能逻辑进行划分的,但并不局限于上述的划分,只要能够实现相应的功能即可;另外,各功能单元的具体名称也只是为了便于相互区分,并不用于限制本发明的保护范围。
注意,上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解,本发明不限于这里所述的特定实施例,对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此,虽然通过以上实施例对本发明进行了较为详细的说明,但是本发明不仅仅限于以上实施例,在不脱离本发明构思的情况下,还可以包括更多其他等效实施例,而本发明的范围由所附的权利要求范围决定。
Claims (10)
1.一种Web应用中的功能菜单显示方法,其特征在于,包括:
在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
2.根据权利要求1所述的方法,其特征在于,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示,包括:
获取目标数量的快捷功能菜单项,并以列表的方式,将各所述快捷功能菜单项和所述功能菜单入口控件,填充于一级导航菜单栏中;
在所述第一显示区域内,将所述一级导航菜单栏进行浮层展示;
在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示之后,所述方法还包括:
在检测到对一级导航菜单栏中的目标快捷功能菜单项的选择,触发执行与所述目标快捷功能菜单项匹配的应用功能。
3.根据权利要求2所述的方法,其特征在于,在获取目标数量的快捷功能菜单项之前,所述方法还包括:
根据菜单项的标准显示尺寸和所述第一显示区域的显示面积,计算所述第一显示区域能够以列表形式完整显示的菜单项数量值;
根据所述菜单项数量值,计算所述目标数量,其中所述目标数量小于所述菜单项数量值;
在与所述Web应用对应的全部功能菜单项中,选取所述目标数量的功能菜单项,作为所述快捷功能菜单项。
4.根据权利要求3所述的方法,其特征在于,在与所述Web应用对应的全部功能菜单项中,选取所述目标数量的功能菜单项,作为所述快捷功能菜单项,包括:
根据与所述Web应用匹配的用户行为数据,统计得到与每个功能菜单项分别对应的用户使用频率;
按照用户使用频率从大到小的顺序,选择所述目标数量的功能菜单项,作为所述快捷功能菜单项。
5.根据权利要求1-4任一项所述的方法,其特征在于,检测到对Web应用的显示页面中目标控件的选择,包括:
在捕捉到对Web应用的显示页面中目标控件的鼠标滑入事件时,确定检测到对Web应用的显示页面中目标控件的选择;
在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示之后,所述方法还包括:
在捕捉到对Web应用的显示页面中目标控件的鼠标滑出事件时,取消对所述一级导航菜单栏的浮层展示;
检测到对一级导航菜单栏中的功能菜单入口控件的选择,包括:
在捕捉到对一级导航菜单栏中的功能菜单入口控件的鼠标滑入事件时,确定检测到对一级导航菜单栏中的功能菜单入口控件的选择;
在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示之后,还包括:
在捕捉到对一级导航菜单栏中的功能菜单入口控件的鼠标滑出事件时,取消对所述二级导航菜单栏的浮层展示。
6.根据权利要求1-4任一项所述的方法,其特征在于,还包括:
响应于功能菜单元素重排列指令,将所述功能菜单元素集合中各功能菜单元素的排布顺序,和/或各所述功能菜单元素的显示层级进行匹配的调整,并更新存储调整结果。
7.根据权利要求1-4任一项所述的方法,其特征在于,所述目标控件位于所述显示页面上部的全局标题栏的最左侧;
所述第一显示区域位于所述显示页面的最左侧,所述第二显示区域与所述第一显示区域贴近设置。
8.一种Web应用中的功能菜单显示装置,其特征在于,包括:
第一浮层展示模块,用于在检测到对Web应用的显示页面中目标控件的选择时,在显示页面的第一显示区域内,将一级导航菜单栏进行浮层展示;
功能菜单元素集合获取模块,用于在检测到对一级导航菜单栏中的功能菜单入口控件的选择时,获取与Web页面匹配的功能菜单元素集合;
第二浮层展示模块,用于以平铺的方式,将各功能菜单元素填充于二级导航菜单栏中,并在所述显示页面的第二显示区域内,将所述二级导航菜单栏进行浮层展示;
其中,功能菜单元素包括:一级功能菜单项,或者,与一级功能菜单匹配的至少一个层级的下级功能菜单项。
9.一种计算机设备,其特征在于,所述计算机设备包括:
一个或多个处理器;
存储装置,用于存储一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-7中任一所述的Web应用中的功能菜单显示方法。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1-7中任一所述的Web应用中的功能菜单显示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110862412.6A CN113568540B (zh) | 2021-07-29 | 2021-07-29 | Web应用中的功能菜单显示方法、装置、设备及介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110862412.6A CN113568540B (zh) | 2021-07-29 | 2021-07-29 | Web应用中的功能菜单显示方法、装置、设备及介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113568540A true CN113568540A (zh) | 2021-10-29 |
CN113568540B CN113568540B (zh) | 2024-04-23 |
Family
ID=78168813
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110862412.6A Active CN113568540B (zh) | 2021-07-29 | 2021-07-29 | Web应用中的功能菜单显示方法、装置、设备及介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113568540B (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114115645A (zh) * | 2021-11-29 | 2022-03-01 | 平安证券股份有限公司 | 多级菜单显示方法、装置、计算机设备及存储介质 |
CN114153354A (zh) * | 2022-02-10 | 2022-03-08 | 荣耀终端有限公司 | 菜单显示方法和电子设备 |
CN114253445A (zh) * | 2021-12-22 | 2022-03-29 | 北京金堤科技有限公司 | 滑动联动模式的配置方法、页面的联动方法及装置 |
CN114546221A (zh) * | 2022-04-26 | 2022-05-27 | 北京金堤科技有限公司 | 页面导航方法、装置、电子设备及计算机存储介质 |
CN114995814A (zh) * | 2022-06-07 | 2022-09-02 | 重庆大学 | 一种应用系统工程化智能视图布局的方法与装置 |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP0978990A2 (en) * | 1998-08-07 | 2000-02-09 | Hewlett-Packard Company | Appliance and method for navigating among multiple captured images and functional menus |
US20030236836A1 (en) * | 2002-03-21 | 2003-12-25 | Borthwick Ernest Mark | System and method for the design and sharing of rich media productions via a computer network |
US20130024811A1 (en) * | 2011-07-19 | 2013-01-24 | Cbs Interactive, Inc. | System and method for web page navigation |
CN105357551A (zh) * | 2015-09-30 | 2016-02-24 | 上海聚力传媒技术有限公司 | 一种用于播放网络电视节目的方法与设备 |
CN108762870A (zh) * | 2018-05-24 | 2018-11-06 | 网易乐得科技(黑龙江)有限公司 | 一种页面展示方法及装置 |
CN108762601A (zh) * | 2018-03-29 | 2018-11-06 | 威海新北洋技术服务有限公司 | 应用功能的显示方法、装置及移动终端 |
CN111611036A (zh) * | 2020-05-06 | 2020-09-01 | 香港乐蜜有限公司 | 应用菜单配置方法、装置、电子设备和存储介质 |
CN112579927A (zh) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | 显示导航栏的方法和装置 |
CN112578963A (zh) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | 菜单处理方法和装置、存储介质及电子设备 |
CN112596652A (zh) * | 2020-12-11 | 2021-04-02 | 中信银行股份有限公司 | 菜单导航方法、装置、电子设备及介质 |
-
2021
- 2021-07-29 CN CN202110862412.6A patent/CN113568540B/zh active Active
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP0978990A2 (en) * | 1998-08-07 | 2000-02-09 | Hewlett-Packard Company | Appliance and method for navigating among multiple captured images and functional menus |
US20030236836A1 (en) * | 2002-03-21 | 2003-12-25 | Borthwick Ernest Mark | System and method for the design and sharing of rich media productions via a computer network |
US20130024811A1 (en) * | 2011-07-19 | 2013-01-24 | Cbs Interactive, Inc. | System and method for web page navigation |
CN105357551A (zh) * | 2015-09-30 | 2016-02-24 | 上海聚力传媒技术有限公司 | 一种用于播放网络电视节目的方法与设备 |
CN108762601A (zh) * | 2018-03-29 | 2018-11-06 | 威海新北洋技术服务有限公司 | 应用功能的显示方法、装置及移动终端 |
CN108762870A (zh) * | 2018-05-24 | 2018-11-06 | 网易乐得科技(黑龙江)有限公司 | 一种页面展示方法及装置 |
CN112579927A (zh) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | 显示导航栏的方法和装置 |
CN112578963A (zh) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | 菜单处理方法和装置、存储介质及电子设备 |
CN111611036A (zh) * | 2020-05-06 | 2020-09-01 | 香港乐蜜有限公司 | 应用菜单配置方法、装置、电子设备和存储介质 |
CN112596652A (zh) * | 2020-12-11 | 2021-04-02 | 中信银行股份有限公司 | 菜单导航方法、装置、电子设备及介质 |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114115645A (zh) * | 2021-11-29 | 2022-03-01 | 平安证券股份有限公司 | 多级菜单显示方法、装置、计算机设备及存储介质 |
CN114115645B (zh) * | 2021-11-29 | 2023-11-07 | 平安证券股份有限公司 | 多级菜单显示方法、装置、计算机设备及存储介质 |
CN114253445A (zh) * | 2021-12-22 | 2022-03-29 | 北京金堤科技有限公司 | 滑动联动模式的配置方法、页面的联动方法及装置 |
CN114253445B (zh) * | 2021-12-22 | 2024-01-30 | 北京金堤科技有限公司 | 滑动联动模式的配置方法、页面的联动方法及装置 |
CN114153354A (zh) * | 2022-02-10 | 2022-03-08 | 荣耀终端有限公司 | 菜单显示方法和电子设备 |
CN114153354B (zh) * | 2022-02-10 | 2022-07-08 | 荣耀终端有限公司 | 菜单显示方法和电子设备 |
CN114546221A (zh) * | 2022-04-26 | 2022-05-27 | 北京金堤科技有限公司 | 页面导航方法、装置、电子设备及计算机存储介质 |
CN114995814A (zh) * | 2022-06-07 | 2022-09-02 | 重庆大学 | 一种应用系统工程化智能视图布局的方法与装置 |
Also Published As
Publication number | Publication date |
---|---|
CN113568540B (zh) | 2024-04-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN113568540A (zh) | Web应用中的功能菜单显示方法、装置、设备及介质 | |
KR101913480B1 (ko) | 계층적 콘텐츠에 대한 보기 가능 영역의 순항 가능한 계층화 | |
CN104063139B (zh) | 显示调整的方法及装置 | |
CN105094557B (zh) | 一种显示控制方法及装置、电子设备 | |
EP3155507B1 (en) | Storage system user interface with floating file collection | |
US20150317059A1 (en) | Application management method for a mobile terminal and the mobile terminal | |
US10387009B2 (en) | Multimedia apparatus and method for providing content | |
CN109284034B (zh) | 终端壁纸预览的方法、系统、存储介质和手机 | |
JP2001243161A (ja) | コンテンツ挿入方法 | |
KR101580003B1 (ko) | 링크의 비 마우스 기반 활성화를 위한 그래픽 사용자 인터페이스 | |
CN106020614A (zh) | 一种应用程序的切换方法及终端 | |
WO2019155852A1 (ja) | 電子アルバム装置とその作動方法および作動プログラム | |
CN111428430A (zh) | 电路设计中的电路器件信息获取方法、装置、设备及介质 | |
CN107544723A (zh) | 一种应用程序的交互方法、装置及系统 | |
CN103778132B (zh) | 网页操作方法及设备、网页呈现方法及设备以及电子设备 | |
CN117218239A (zh) | 一种数据处理方法、装置、电子设备及可读存储介质 | |
CN113407290B (zh) | 应用通知显示方法、装置和电子设备 | |
CN109885225A (zh) | 一种级联式选择的显示方法、装置及计算机设备 | |
CN114911389A (zh) | 屏幕显示方法、装置、电子设备和可读存储介质 | |
CN109697238B (zh) | 数据处理方法及装置 | |
CN112306323A (zh) | 应用程序图标显示方法和装置 | |
JP2004185340A (ja) | データ閲覧装置 | |
KR101967365B1 (ko) | 북마크 표시 방법, 장치 및 컴퓨터 프로그램 | |
CN114237449B (zh) | 一种图标处理方法、计算设备及可读存储介质 | |
KR102057626B1 (ko) | 북마크 생성 방법, 장치 및 컴퓨터 프로그램, 북마크 표시 방법, 장치 및 컴퓨터 프로그램 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |