CN106095255A - 一种下拉菜单显示控制方法及装置 - Google Patents

一种下拉菜单显示控制方法及装置 Download PDF

Info

Publication number
CN106095255A
CN106095255A CN201610446002.2A CN201610446002A CN106095255A CN 106095255 A CN106095255 A CN 106095255A CN 201610446002 A CN201610446002 A CN 201610446002A CN 106095255 A CN106095255 A CN 106095255A
Authority
CN
China
Prior art keywords
drop
down menu
mouse
content
display control
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.)
Pending
Application number
CN201610446002.2A
Other languages
English (en)
Inventor
杜伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201610446002.2A priority Critical patent/CN106095255A/zh
Publication of CN106095255A publication Critical patent/CN106095255A/zh
Pending legal-status Critical Current

Links

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

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种下拉菜单显示控制方法及装置。包括：步骤1，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；步骤2，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；步骤3，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，重新执行步骤2，否则，将下拉菜单内容隐藏，执行步骤1。总体而言，本发明所构思的以上技术方案与现有技术相比，美化了浏览器原生的下拉菜单，保证了菜单状态的准确性与高效性，提升了用户的体验。

Description

一种下拉菜单显示控制方法及装置
技术领域
本发明涉及一种菜单显示控制方法及装置，属于网络信息处理领域，具体是涉及一种下拉菜单显示控制方法及装置。
背景技术
网站中的功能菜单，是用户操作某一功能集合。越来越多的网站通过个性化的方式优化了浏览器原生菜单的样式和交互方式。
浏览器默认的下拉菜单如图1所示，在越来越需要用户体验的今天，这种原生的下拉菜单已经变的不太友好，于是在初期开发者开始对原生的下拉菜单进行优化，如图2所示。
大多数的网站对于个性化下拉菜单的实现存在性能问题和准确性问题，因为个性化下拉菜单的菜单内容会与触发点产生间隙，如图3-5所示，这样会导致当用户触发菜单内容展示后，用户的鼠标移动并且不在菜单触发和菜单内容的范围内部就应该隐藏菜单内容，以免产生菜单假死的状态，影响用户进一步操作。但是反复的显示和隐藏菜单会影响用户体验，并且需要频繁计算用户的行为状态，从而加重了服务的负荷。
发明内容
针对现有技术的以上缺陷或改进需求，本发明提供了一种下拉菜单显示控制方法及装置，其目的在于，解决因菜单内容会与触发点存在间隙而导致的容易出现假死现象，用户体验较差、服务器负荷较重的技术问题。
为了解决上述问题，根据本发明的一个方面，提供了一种下拉菜单显示控制方法，包括：
步骤1，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
步骤2，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
步骤3，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，重新执行步骤2，否则，将下拉菜单内容隐藏，执行步骤1。
优选的，上述的一种下拉菜单显示控制方法，所述计时器时长为500ms。
优选的，上述的一种下拉菜单显示控制方法，所述下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。
优选的，上述的一种下拉菜单显示控制方法，通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
为了解决上述问题，根据本发明的另一个方面，提供了一种下拉菜单显示控制装置，包括：
触发模块，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
计时模块，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
隐藏模块，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，然后调用计时模块，否则，将下拉菜单内容隐藏，然后调触发模块。
优选的，上述的一种下拉菜单显示控制装置，所述计时器时长为500ms。
优选的，上述的一种下拉菜单显示控制装置，所述下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。
优选的，上述的一种下拉菜单显示控制装置，通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
总体而言，本发明所构思的以上技术方案与现有技术相比， 美化了浏览器原生的下拉菜单，可以根据网站的类型及网站用户的喜好定制个性化的下拉菜单；并且通过“用户行为”与“菜单状态”的关联算法，保证了菜单状态的准确性与高效性，提升了用户的体验。
附图说明
附图1是浏览器默认的下拉菜单示意图。
附图2是优化后的下拉菜单示意图。
附图3是悬浮向下展示菜单时的触发按钮与菜单内容存在间隙的示意图；
附图4是悬浮向上展示菜单时的触发按钮与菜单内容存在间隙的示意图；
附图5是悬浮右上方展示菜单时的触发按钮与菜单内容存在间隙的示意图；
附图6是本发明的菜单操作轨迹示意图。
附图7是应用本发明的菜单初始状态示意图。
附图8是应用本发明的菜单打开时状态示意图。
附图9是应用本发明的菜单还原后的状态示意图。
具体实施方式
下面通过实施例，并结合附图，对本发明的技术方案作进一步具体的说明。
一种下拉菜单显示控制方法，包括：
步骤1，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
步骤2，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
步骤3，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，重新执行步骤2，否则，将下拉菜单内容隐藏，执行步骤1。
其中，计时器时长为500ms。下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
一种下拉菜单显示控制装置，包括：
触发模块，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
计时模块，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
隐藏模块，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，然后调用计时模块，否则，将下拉菜单内容隐藏，然后调触发模块。
其中，计时器时长为500ms。下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
实施例1
本实施例提供了一种下拉菜单显示控制方法及装置。如图6所示，当用户点击了触发按钮展示菜单内容后，脚本开始根据光标的位置进行计算：
1.假设用户开始移动光标
2.当光标停留在触发按钮范围内，保持菜单内容显示
3.当光标移动并且不在触发按钮的范围内，启动监听500ms 之后执行菜单内容的隐藏
4.500ms 之后计算光标的位置，如果光标既不在触发按钮内部也不在菜单内容内部，将菜单内容隐藏，反之，保持菜单内容展示
5.同理，如果菜单内容一直未隐藏而且光标进入了菜单内容，继续从第一步轮询
6.通过 500ms 的间隔，保证了用户的体验是流畅的。
如图7-9所示，应用了本发明的一种菜单示意图。从图中可知，本发明描述的“个性化下拉菜单”，美化了浏览器原生的下拉菜单，可以根据网站的类型及网站用户的喜好定制个性化的下拉菜单。发明的个性化下单菜单，通过“用户行为”与“菜单状态”的关联算法，保证了菜单状态的准确性与高效性，提升了用户的体验。
实施例2
一种下拉菜单显示控制装置，包括：
触发模块，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
计时模块，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
隐藏模块，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，然后调用计时模块，否则，将下拉菜单内容隐藏，然后调触发模块。
其中，计时器时长为500ms。下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
本文中所描述的具体实施例仅仅是对本发明精神作举例说明。本发明所属技术领域的技术人员可以对所描述的具体实施例做各种各样的修改或补充或采用类似的方式替代，但并不会偏离本发明的精神或者超越所附权利要求书所定义的范围。

Claims (8)

1.一种下拉菜单显示控制方法，其特征在于，包括：
步骤1，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
步骤2，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
步骤3，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，重新执行步骤2，否则，将下拉菜单内容隐藏，执行步骤1。
2.根据权利要求1所述的一种下拉菜单显示控制方法，其特征在于，所述计时器时长为500ms。
3.根据权利要求1所述的一种下拉菜单显示控制方法，其特征在于，所述下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。
4.根据权利要求1所述的一种下拉菜单显示控制方法，其特征在于，通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
5.一种下拉菜单显示控制装置，其特征在于，包括：
触发模块，监听用户对下拉菜单按钮的操作，当监听到下拉菜单按钮被触发后，展示下拉菜内容；
计时模块，监控用户鼠标所处位置，当鼠标离开下拉菜单的触发区域后，启动一个时长由用户自定义设置的计时器；在计时器时后，执行步骤3；
隐藏模块，若鼠标是位于下拉菜单的触发区或下拉菜单内容的展示区，则将所述计时器置零，然后调用计时模块，否则，将下拉菜单内容隐藏，然后调触发模块。
6.根据权利要求5所述的一种下拉菜单显示控制装置，其特征在于，所述计时器时长为500ms。
7.根据权利要求5所述的一种下拉菜单显示控制装置，其特征在于，所述下拉菜单内容以悬浮方式展示，并且下拉菜单内容的展示区与下拉菜单按钮之间存在一定距离的间隙。
8.根据权利要求5所述的一种下拉菜单显示控制装置，其特征在于，通过脚本计算鼠标在显示屏中的位置，并根据鼠标的位置判断鼠标是否位于下拉菜单按钮的触发区和下拉菜内容的展示区。
CN201610446002.2A 2016-06-20 2016-06-20 一种下拉菜单显示控制方法及装置 Pending CN106095255A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610446002.2A CN106095255A (zh) 2016-06-20 2016-06-20 一种下拉菜单显示控制方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610446002.2A CN106095255A (zh) 2016-06-20 2016-06-20 一种下拉菜单显示控制方法及装置

Publications (1)

Publication Number Publication Date
CN106095255A true CN106095255A (zh) 2016-11-09

Family

ID=57237505

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610446002.2A Pending CN106095255A (zh) 2016-06-20 2016-06-20 一种下拉菜单显示控制方法及装置

Country Status (1)

Country Link
CN (1) CN106095255A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108228037A (zh) * 2017-12-08 2018-06-29 深圳天珑无线科技有限公司 智能终端及其界面控制方法、具有存储功能的装置
CN108334354A (zh) * 2017-09-01 2018-07-27 武汉斗鱼网络科技有限公司 匹配模式的视图设计方法及装置
CN109213479A (zh) * 2017-06-29 2019-01-15 武汉斗鱼网络科技有限公司 网页下拉的刷新显示方法、存储介质、电子设备及系统
CN111124211A (zh) * 2018-10-31 2020-05-08 杭州海康威视系统技术有限公司 一种数据显示方法、装置及电子设备
CN112218130A (zh) * 2020-09-03 2021-01-12 北京大米科技有限公司 互动视频的控制方法、装置、存储介质以及终端
CN116860137A (zh) * 2023-08-29 2023-10-10 中航金网(北京)电子商务有限公司 多级菜单的显示方法及装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100169813A1 (en) * 2008-12-25 2010-07-01 Compal Electronics, Inc. Method for displaying and operating user interface and electronic device
CN102331932A (zh) * 2011-09-08 2012-01-25 北京像素软件科技股份有限公司 一种菜单界面实现方法
CN102915328A (zh) * 2012-09-04 2013-02-06 新浪网技术(中国)有限公司 编辑富文本的方法及富文本编辑器
CN103699438A (zh) * 2013-12-23 2014-04-02 乐视网信息技术（北京）股份有限公司 一种基于面包屑导航的快速切换方法及装置
CN103902258A (zh) * 2012-12-25 2014-07-02 腾讯科技（深圳）有限公司 一种在网页中实现自定义菜单显示的方法及装置
CN104885047A (zh) * 2013-03-07 2015-09-02 东莞宇龙通信科技有限公司 终端和终端操控方法
CN105653139A (zh) * 2015-12-22 2016-06-08 深圳市万普拉斯科技有限公司 网页导航菜单显示方法和系统

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100169813A1 (en) * 2008-12-25 2010-07-01 Compal Electronics, Inc. Method for displaying and operating user interface and electronic device
CN102331932A (zh) * 2011-09-08 2012-01-25 北京像素软件科技股份有限公司 一种菜单界面实现方法
CN102915328A (zh) * 2012-09-04 2013-02-06 新浪网技术(中国)有限公司 编辑富文本的方法及富文本编辑器
CN103902258A (zh) * 2012-12-25 2014-07-02 腾讯科技（深圳）有限公司 一种在网页中实现自定义菜单显示的方法及装置
CN104885047A (zh) * 2013-03-07 2015-09-02 东莞宇龙通信科技有限公司 终端和终端操控方法
CN103699438A (zh) * 2013-12-23 2014-04-02 乐视网信息技术（北京）股份有限公司 一种基于面包屑导航的快速切换方法及装置
CN105653139A (zh) * 2015-12-22 2016-06-08 深圳市万普拉斯科技有限公司 网页导航菜单显示方法和系统

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109213479A (zh) * 2017-06-29 2019-01-15 武汉斗鱼网络科技有限公司 网页下拉的刷新显示方法、存储介质、电子设备及系统
CN108334354A (zh) * 2017-09-01 2018-07-27 武汉斗鱼网络科技有限公司 匹配模式的视图设计方法及装置
CN108228037A (zh) * 2017-12-08 2018-06-29 深圳天珑无线科技有限公司 智能终端及其界面控制方法、具有存储功能的装置
CN108228037B (zh) * 2017-12-08 2021-04-20 深圳天珑无线科技有限公司 智能终端及其界面控制方法、具有存储功能的装置
CN111124211A (zh) * 2018-10-31 2020-05-08 杭州海康威视系统技术有限公司 一种数据显示方法、装置及电子设备
CN112218130A (zh) * 2020-09-03 2021-01-12 北京大米科技有限公司 互动视频的控制方法、装置、存储介质以及终端
CN116860137A (zh) * 2023-08-29 2023-10-10 中航金网(北京)电子商务有限公司 多级菜单的显示方法及装置
CN116860137B (zh) * 2023-08-29 2023-12-05 中航金网(北京)电子商务有限公司 多级菜单的显示方法及装置

Similar Documents

Publication Publication Date Title
CN106095255A (zh) 一种下拉菜单显示控制方法及装置
US11321041B2 (en) Systems, devices, and methods for dynamically providing user interface controls at a touch-sensitive secondary display
US11972043B2 (en) User detection by a computing device
US11336961B2 (en) Recording and broadcasting application visual output
KR102439054B1 (ko) 이모지 레코딩 및 전송
US12118974B2 (en) Devices, methods, and user interfaces for adaptively providing audio outputs
US10999426B2 (en) Voice communication method
KR102115714B1 (ko) 터치 감응형 이차 디스플레이에서 사용자 인터페이스 제어부들을 동적으로 제공하기 위한 시스템들, 디바이스들, 및 방법들
KR102210958B1 (ko) 햅틱 피드백을 제공하기 위한 디바이스, 방법, 및 그래픽 사용자 인터페이스
JP6235636B2 (ja) 触覚効果を与えるシステム及び方法
JP6496752B2 (ja) 入力デバイス及びユーザインターフェース対話
US9720586B2 (en) Apparatus and method for providing for interaction with content within a digital bezel
KR102327803B1 (ko) 전력 소모를 줄이기 위한 전력 제어 방법 및 장치
US10061387B2 (en) Method and apparatus for providing user interfaces
KR102326200B1 (ko) 전자 장치 및 전자 장치의 알림 제공 방법
US9046958B2 (en) Method, apparatus and computer program product for user input interpretation and input error mitigation
KR102629341B1 (ko) 멀티태스킹을 위한 인터페이스 제공 방법 및 이를 구현하는 전자 장치
CN103034406B (zh) 用于在触摸装置中操作功能的方法和设备
US10331297B2 (en) Device, method, and graphical user interface for navigating a content hierarchy
KR20160130015A (ko) 휴대 장치 및 휴대 장치의 콘텐트 화면 변경방법
KR102361568B1 (ko) 디스플레이를 제어하는 전자 장치 및 방법
CN103455275A (zh) 在具有触摸屏的终端中移动对象的方法和装置
KR102598722B1 (ko) 전자 장치 및 전자 장치의 터치 스크린 디스플레이 제어 방법
KR20170019879A (ko) 전자 장치 및 전자 장치의 입력 방법
KR102654807B1 (ko) 전자 장치 및 전자 장치 제어 방법

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20161109