CN116860137B - Multi-level menu display method and device - Google Patents

Multi-level menu display method and device Download PDF

Info

Publication number
CN116860137B
CN116860137B CN202311093022.2A CN202311093022A CN116860137B CN 116860137 B CN116860137 B CN 116860137B CN 202311093022 A CN202311093022 A CN 202311093022A CN 116860137 B CN116860137 B CN 116860137B
Authority
CN
China
Prior art keywords
mouse
menu
area
level menu
level
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.)
Active
Application number
CN202311093022.2A
Other languages
Chinese (zh)
Other versions
CN116860137A (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.)
Avic International Golden Net Beijing Technology Co ltd
Original Assignee
AVIC INTERNATIONAL E-BUSINESS Inc
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 AVIC INTERNATIONAL E-BUSINESS Inc filed Critical AVIC INTERNATIONAL E-BUSINESS Inc
Priority to CN202311093022.2A priority Critical patent/CN116860137B/en
Publication of CN116860137A publication Critical patent/CN116860137A/en
Application granted granted Critical
Publication of CN116860137B publication Critical patent/CN116860137B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction 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/0482Interaction 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)
  • Digital Computer Display Output (AREA)

Abstract

The embodiment of the invention provides a method and a device for displaying a multi-level menu, wherein the method comprises the following steps: aiming at the menus of adjacent levels, in the process of displaying the menu of the upper level, when any menu item in the menu of the upper level is detected to be moved into/clicked by a mouse, displaying the menu of the lower level corresponding to the menu item; in the process of displaying the next-level menu, when the mouse is detected to move out of the menu item, determining a first area based on the position of the mouse and the area of the next-level menu; the first area covers any linear track of the mouse from the position to the next menu; judging whether the mouse enters a first area, if so, carrying out delay display on a next-level menu; if not, hiding the next menu. The user experience in the menu switching process can be improved when the user applies the multi-level menu provided with the hidden menu.

Description

Multi-level menu display method and device
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method and an apparatus for displaying a multi-level menu.
Background
In the process of browsing the webpage, the situation that the webpage comprises a plurality of levels of menus and default hiding is set for the second level of menus is often encountered, when the mouse needs to enter the second level of menus corresponding to a certain level of menu items from the first level of menus in the process of displaying the first level of menus and the second level of menus of the webpage, if the mouse leaves the area where the first level of menu items are located in the moving process, the second level of menus corresponding to the first level of menu items disappears, and the user cannot click on the second level of menu items to be clicked.
Fig. 1 is a schematic diagram of a multi-level menu, taking fig. 1 as an example, where the menu items "one-level menu-1" to "one-level menu-6" are included in the one-level menu, and when the mouse is located in the menu item "one-level menu-4", the display interface displays a secondary menu corresponding to the one-level menu-4, and includes the menu items "4-secondary menu-1" to "4-secondary menu-7". When the user wants to click on the "4-second level menu-1", if the mouse leaves the area of the menu item "first level menu-4" shown in the figure during the movement, the second level menu corresponding to the first level menu-4 disappears, so that the user cannot click on the corresponding content. At this time, the user also needs to move the mouse back to the first-level menu-4 again, translate right along the first-level menu-4 according to the track indicated by the arrow in the figure, enter the area where the second-level menu corresponding to the first-level menu-4 is located, and click the second-level menu-4-1 again, so that the user experience is unfriendly.
Disclosure of Invention
The embodiment of the invention aims to provide a method and a device for displaying a multi-level menu, so as to improve user experience in a menu switching process through a mouse when a user applies the multi-level menu provided with a hidden menu. The specific technical scheme is as follows:
In a first aspect, an embodiment of the present invention provides a method for displaying a multi-level menu, including:
aiming at menus of adjacent levels, in the process of displaying the menu of the upper level, when any menu item in the menu of the upper level is detected to be moved into/clicked by a mouse, displaying the menu of the lower level corresponding to the menu item;
when the mouse is detected to move out of the menu item in the process of displaying the next-level menu, determining a first area based on the position of the mouse and the area of the next-level menu; the first area covers any linear track of the mouse moving from the position to the next-level menu;
judging whether the mouse enters the first area, if so, carrying out time delay display on the next-stage menu, and if not, hiding the next-stage menu.
Optionally, when the mouse is detected to move out of the menu item, determining a first area based on the position of the mouse and the area of the next-level menu includes:
responding to a mousemove event triggered when the mouse moves out of the menu item, taking the mouse coordinate recorded by the mousemove event as an initial coordinate of the mouse, and determining the first area based on the initial coordinate and the area where the next-level menu is located; the first area specifically covers any linear track of the mouse from the initial coordinates to the area where the next-level menu item is located;
The step of judging whether the mouse enters the first area comprises the following steps:
and judging whether the mouse enters the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area.
Optionally, after determining that the mouse enters the first area, the method further includes:
judging whether the mouse continuously moves in the first area or not based on the relative position relation between the mouse coordinates of the mouseove event record triggered in the moving process of the mouse and the first area;
if yes, the next-level menu is displayed in a time delay mode in the moving process of the mouse until the mouse moves out of the first area or moves into the next-level menu.
Optionally, determining a relative positional relationship between the mouse coordinates of any of the mouseove event records and the first region based on the following manner:
determining an endpoint of the first area based on the initial coordinates of the mouse and the area where the next-level menu is located;
determining a plurality of second areas based on boundaries of the first areas, mouse coordinates of the mouseove event record, and a line between each of the endpoints of the first areas;
And if the sum of the areas of the second areas is consistent with the area of the first area, the mouse coordinate representing the mouseove event record is located in the first area, otherwise, the mouse coordinate representing the mouseove event record is not located in the first area.
Optionally, the method further comprises:
and in the time delay display period of the next-stage menu, if the time length of the mouse moving out of the menu item exceeds the preset maximum time length, stopping the time delay display of the next-stage menu.
In a second aspect, an embodiment of the present invention provides a display apparatus for a multi-level menu, including:
the first display module is used for displaying a lower-level menu corresponding to any menu item in the upper-level menu when detecting that the mouse moves into/clicks any menu item in the upper-level menu in the process of displaying the upper-level menu aiming at the menus of adjacent levels;
the determining module is used for determining a first area based on the position of the mouse and the area of the next-level menu when the mouse is detected to move out of the menu item in the process of displaying the next-level menu; the first area covers any linear track of the mouse moving from the position to the next-level menu;
And the first judging module is used for judging whether the mouse enters the first area, if so, carrying out time delay display on the next-stage menu, and if not, hiding the next-stage menu.
Optionally, the determining module is specifically configured to:
in the process of displaying the next-level menu, responding to a mousemove event triggered when the mouse moves out of the menu item, taking the mouse coordinate recorded by the mousemove event as the initial coordinate of the mouse, and determining the first area based on the initial coordinate and the area where the next-level menu is positioned; the first area specifically covers any linear track of the mouse from the initial coordinates to the area where the next-level menu item is located;
the first judging module includes:
and the judging unit is used for judging whether the mouse enters the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area.
Optionally, the apparatus further includes:
the second judging module is used for judging whether the mouse continuously moves in the first area or not based on the relative position relation between the mouse coordinates of the mouseove event record triggered in the moving process of the mouse and the first area;
And the second display module is further configured to delay displaying the next-stage menu in the moving process of the mouse until the mouse moves out of the first area or moves into the next-stage menu if the judgment result of the second judgment module is yes.
In a third aspect, an embodiment of the present invention provides an electronic device, including a processor, a communication interface, a memory, and a communication bus, where the processor, the communication interface, and the memory complete communication with each other through the communication bus;
a memory for storing a computer program;
and a processor for executing the program stored in the memory, wherein the method is any one of the above-mentioned multi-level menu display methods.
Embodiments of the present invention also provide a computer-readable storage medium having stored therein a computer program that is executed by a processor to perform the method of displaying a multi-level menu of any one of the above.
The embodiment of the invention also provides a computer program product containing instructions, which when run on a computer, cause the computer to execute the method for displaying the multi-level menu.
The embodiment of the invention has the beneficial effects that:
According to the display method of the multilevel menu, aiming at the adjacent level menu of the default hidden next level menu, when the mouse is detected to move out of the menu item in the process of displaying the next level menu corresponding to the menu item in the previous level menu, a first area is determined based on the position of the mouse and the area of the next level menu, if the mouse enters the first area, the user is considered to intend to enter the next level menu, the next level menu is displayed in a delayed mode, if the mouse does not enter the first area, the user is considered to not want to enter the next level menu, therefore the next level menu is hidden, and the first area specifically covers any linear track of the area of the next level menu where the mouse moves from the position. Therefore, aiming at the multi-level menu provided with the hidden menu, under the condition that a user moves the mouse out of menu items in the upper level menu corresponding to the lower level menu being displayed, the characteristic that the user usually moves the mouse based on a straight line track is utilized to determine a first area between the menu items and the lower level menu, whether the user intends to enter the lower level menu is judged by means of the actual movement condition of the first area and the mouse, the lower level menu is displayed in a delayed mode under the condition that the user intends to enter the lower level menu is judged, the mouse is ensured to successfully enter the lower level menu, the lower level menu is hidden under the condition that the user does not want to enter the lower level menu is judged, and the display of the lower level menu is prevented from interfering with user experience, so that the user experience in the menu switching process through the mouse when the multi-level menu provided with the hidden menu is applied by the user can be improved.
Of course, it is not necessary for any one product or method of practicing the application to achieve all of the advantages set forth above at the same time.
Drawings
In order to more clearly illustrate the embodiments of the application or the technical solutions in the prior art, the drawings used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the application, and other embodiments may be obtained according to these drawings to those skilled in the art.
FIG. 1 is a schematic illustration of a multi-level menu;
FIG. 2 is a flow chart of a method for displaying a multi-level menu according to an embodiment of the present application;
FIG. 3 is a schematic diagram of a multi-level menu provided by an embodiment of the present application;
FIG. 4 is a schematic view of a first region and a second region provided by an embodiment of the present application;
fig. 5 is a schematic structural diagram of a display device for multi-level menus according to an embodiment of the present application;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. Based on the embodiments of the present application, all other embodiments obtained by the person skilled in the art based on the present application are included in the scope of protection of the present application.
In order to improve user experience in a menu switching process by a mouse when a user applies a multi-level menu provided with a hidden menu, an embodiment of the present invention provides a method for displaying a multi-level menu, and fig. 2 is a schematic flow chart of the method for displaying a multi-level menu provided by the embodiment of the present invention, referring to fig. 2, the method specifically includes the following steps:
step S201: and aiming at the menus of the adjacent level, in the process of displaying the menu of the upper level, when the mouse is detected to move into/click on any menu item in the menu of the upper level, displaying the menu of the lower level corresponding to the menu.
The method for displaying the multi-level menu provided by the embodiment of the invention is particularly applied to the multi-level menu comprising the hidden menu, for example, the multi-level menu can be a default multi-level menu for hiding the secondary menu and/or the tertiary menu. For the multi-level menu, in the process of displaying the upper-level menu, the trigger of any menu item by the mouse can be responded, the lower-level menu corresponding to the menu item is displayed, and in the process, the trigger condition of the menu item can be specifically: the mouse moves into any menu item in the previous level menu or clicks any menu item in the previous level menu. In practical application, any operation may be set as a trigger condition of a menu item based on practical requirements, which is not limited by the embodiment of the present invention.
Taking fig. 1 as an example, in the case that the multi-level menu illustrated in the drawing conceals the secondary menu by default, when the mouse is located outside any one level menu item, the secondary menu is concealed, and when the menu item "one level menu-4" is detected to be triggered, that is, the mouse moves into "one level menu-4" or clicks "one level menu-4", the secondary menu corresponding to the one level menu-4 is displayed.
Step S202: in the process of displaying the next-level menu, when the mouse is detected to move out of the menu item, determining a first area based on the position of the mouse and the area of the next-level menu; the first area covers any straight line track of the mouse moving from the position to the next level menu.
Specifically, in the process of displaying the next menu corresponding to any menu item on the display interface of the electronic device, if the user wants to enter the next menu, the user usually moves the mouse along a straight line because the line segment between the two points is the shortest, and moves the mouse from the menu item to the area where the next menu is located. Based on the scene, the embodiment of the invention can determine the first area based on the position of the mouse and the area of the lower-level menu when the mouse moves out of the menu items in the upper-level menu, and the first area specifically covers any linear track of the mouse from the position to the lower-level menu. In this case, the mouse thus enters the first area when moving from the menu item to any position in the next-level menu based on a straight trajectory.
Therefore, under the condition that a user moves the mouse through a linear track, when the user moves the mouse out of a menu item in a previous menu and wants to enter a next menu corresponding to the menu item, the mouse enters a first area; in the case where the user moves out of the menu item in order to click on a content other than the next-level menu (for example, switches to the next-level menu corresponding to another menu item), the mouse does not enter the first area.
In the embodiment of the invention, the mouse event can be monitored in the process of displaying the multilevel menu, so that the position of the mouse in the display interface can be obtained, and the starting point position of the mouse when the mouse moves from the menu item to the outside can be determined on the basis. And the area of the next-level menu corresponding to each menu item is usually pre-planned, so that the specific position of the first area in the display interface can be determined on the basis of the pre-planned area.
In the following description, referring to a specific example, fig. 3 is a schematic diagram of a multi-level menu provided in an embodiment of the present invention, when a user triggers a menu item "first level menu-4" through a mouse, a display interface displays a second level menu corresponding to the first level menu-4, where the position of the mouse is a, the upper left corner position of the second level menu corresponding to the first level menu-4 is B, and the lower left corner position is C. It can be seen that when the user wants to move the mouse into any position in the secondary menu corresponding to the primary menu-4, the mouse enters the first area formed by the triangle ABC when the user moves the mouse through the straight track.
Step S203: judging whether the mouse enters the first area, if so, carrying out time delay display on the next-level menu, and if not, hiding the next-level menu.
In the embodiment of the invention, after the mouse moves out of the menu item in the upper menu, if the mouse enters the first area, the user is considered to intend to enter the lower menu corresponding to the menu item, so that the lower menu is displayed in a delayed manner; if the mouse does not enter the first area, the user is considered not to want to enter the next menu corresponding to the menu item, so that the next menu can be hidden immediately. Compared with the scheme of carrying out time delay display on the next-level menu under the condition that the mouse is detected to move out of the menu items in the previous-level menu, the embodiment of the invention carries out time delay display on the next-level menu when the mouse enters the first area, so that a user does not need to wait for the time delay of the next-level menu to finish under the condition that the user does not want to enter the next-level menu, and the time delay display of the next-level menu can be prevented from shielding interface contents and influencing user experience.
The time delay display is that the next level menu is still displayed within a certain time period after the mouse moves out of the menu items in the previous level menu, and the next level menu is hidden after the time period is over. Specifically, the specific duration of the delay display may be selected based on actual requirements, which is not limited by the embodiment of the present invention.
Taking fig. 3 as an example, if the mouse is initially located at the position a, and if the user wants to click on the "4-second level menu-1", based on the existing multi-level menu display method, if the mouse leaves the area where the menu item "first level menu-4" in the drawing is located during the moving process, the second level menu corresponding to the first level menu-4 is hidden, so that the user cannot click on the corresponding content. When the method for displaying the multi-level menu provided by the embodiment of the invention is applied, a user can move the mouse based on the linear track indicated by the arrow in the figure, and when the mouse moves along the corresponding track in the triangle area ABC shown in the figure, the second-level menu corresponding to the first-level menu-4 can be displayed in a delayed manner, so that the mouse can smoothly move to the 4-second-level menu-1. Similarly, the user can smoothly move the mouse to the 4-secondary menu-6 or the 4-secondary menu-7 through a straight line track indicated by an arrow in the figure. When the user wants to switch the next level menu corresponding to a different menu item or wants to leave the previous level menu being displayed, the movement of the mouse is also typically performed through a straight line track, for example, the user may perform the movement of the mouse based on the track indicated by the dashed arrow shown in the figure, in which case the mouse does not enter the triangle ABC (i.e., the first area) shown in the figure, so that the second level menu corresponding to the first level menu-4 may be hidden.
According to the display method of the multilevel menu, aiming at the adjacent level menu of the default hidden next level menu, when the mouse is detected to move out of the menu item in the process of displaying the next level menu corresponding to the menu item in the previous level menu, a first area is determined based on the position of the mouse and the area of the next level menu, if the mouse enters the first area, the user is considered to intend to enter the next level menu, the next level menu is displayed in a delayed mode, if the mouse does not enter the first area, the user is considered to not want to enter the next level menu, therefore the next level menu is hidden, and the first area specifically covers any linear track of the area of the next level menu where the mouse moves from the position. Therefore, aiming at the multi-level menu provided with the hidden menu, under the condition that a user moves the mouse out of menu items in the upper level menu corresponding to the lower level menu being displayed, the characteristic that the user usually moves the mouse based on a straight line track is utilized to determine a first area between the menu items and the lower level menu, whether the user intends to enter the lower level menu is judged by means of the actual movement condition of the first area and the mouse, the lower level menu is displayed in a delayed mode under the condition that the user intends to enter the lower level menu is judged, the mouse is ensured to successfully enter the lower level menu, the lower level menu is hidden under the condition that the user does not want to enter the lower level menu is judged, and the display of the lower level menu is prevented from interfering with user experience, so that the user experience in the menu switching process through the mouse when the multi-level menu provided with the hidden menu is applied by the user can be improved.
In an embodiment of the present invention, when the mouse moving out of the menu item is detected, determining the first area based on the position of the mouse and the area of the next level menu includes:
responding to a mousemove event triggered when a mouse moves out of a menu item, taking the mouse coordinate recorded by the mousemove event as an initial coordinate of the mouse, and determining a first area based on the initial coordinate and an area where a next-level menu is located; the first area specifically covers any linear track of the mouse from the initial coordinates to the area where the next menu item is located;
the step of judging whether the mouse enters the first area includes:
and judging whether the mouse enters the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area.
In the foregoing embodiments of the present invention, it is mentioned that the first region covers any straight line locus where the mouse moves to the region where the next menu is located, and therefore, in order to accurately determine the first region in the display interface, it is necessary to determine the start points of these straight line loci, that is, the initial coordinates of the mouse.
In the embodiment of the invention, the mouse position can be monitored through a mousemove event, wherein the mousemove event is triggered by the movement of the mouse and can record the mouse coordinates. Specifically, when the mouse moves out of a menu item in the previous level menu, a mousemove event is triggered, and the mouse coordinate recorded by the mousemove event is the position where the mouse moves out for the first time when the mouse moves out of the menu item. In the embodiment of the invention, the position is approximated to the initial coordinate of the mouse when the mouse moves from the menu item to the area of the next level menu So that the first area covers the mouse specifically from the initial coordinates +.>And moving to any linear track of the area where the next-level menu is located. For the former example, see fig. 3, if the mouse coordinates of the mousemove event record triggered when the mouse moves out of the menu item in the previous menu is +.>I.e. the coordinates considered as point a.
Based on the initial coordinates of the mouse and the specific position of the area where the next menu is located, the specific position of the first area can be determined.
In the embodiment of the invention, a mousemove event is triggered every time the mouse moves out of a menu item in a previous level menu. Therefore, after the first area is determined based on the initial coordinates, whether the mouse enters the first area can be determined by determining the relative position relationship between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area, i.e. whether the mouse coordinates of the mousemove event record are located in the first area or not.
As one example, assume that the mouse coordinates of a mousemove event record triggered by the mouse after moving out of a menu item in a previous level menu areIf->When the menu is positioned in the first area, the mouse is characterized to enter the first area, and the next-level menu is displayed in a delayed mode at the moment; if- >If the menu is not in the first area, the mouse is characterized to not enter the first area, and the next menu is immediately hidden.
In the embodiment of the invention, the position of the mouse is monitored through the mouseove event, the mouse coordinate of the mouseove event record triggered when the mouse moves out of a menu item in the upper-level menu is taken as an initial coordinate, the first area is determined based on the initial coordinate, and based on the relative position relation between the mouse coordinate of the mouseove event record triggered after the mouse moves out of the menu item and the first area, whether the mouse enters the first area is judged, and the higher accuracy is realized when the determination of the first area is carried out and whether the mouse enters the first area is judged.
In one embodiment of the present invention, after determining that the mouse enters the first area, the method for displaying a multi-level menu provided in the embodiment of the present invention further includes:
judging whether the mouse continuously moves in the first area or not based on the relative position relation between the mouse coordinates and the first area, which is recorded by a mousemove event triggered in the moving process of the mouse;
if yes, the next-level menu is displayed in a time delay mode in the moving process of the mouse until the mouse moves out of the first area or moves into the next-level menu.
As mentioned above, each movement of the mouse triggers a mouseove event after the mouse moves out of a menu item in the previous level menu. In the embodiment of the invention, in order to avoid the disappearance of the next-stage menu in the moving process of the mouse, if the mouse continuously moves in the first area, that is, the mouse coordinates recorded by a plurality of continuous mousemove events triggered by the movement of the mouse are all located in the first area, the user is considered to want to move the mouse to the next-stage menu, so that the first area is always displayed in a delayed manner in the moving process of the mouse until the mouse is judged to move out of the first area or move into the next-stage menu based on the mousemove events. Specifically, if the mouse moves out of the first area, the user is considered to not want to move the mouse into the next-level menu, so that the next-level menu is hidden immediately, and if the mouse moves into the next-level menu, default display is performed on the next-level menu, and delay display is not required naturally.
As an example, in the case of implementing the method for displaying a multilevel menu provided by the embodiment of the present invention by applying JavaScript (a programming language), the delay display of the next level menu may be specifically set by a setTime function. For example, setTimeout (function) may be set, where time is a delay time, and function is a function to be executed after the delay time is over, specifically, may be a function for hiding a menu of a next level. Therefore, the specific time length for time-lapse display of the next-level menu can be set by the specific value of the time.
In the embodiment of the invention, after the mouse is determined to enter the first area, whether the mouse continuously moves in the first area is judged based on the mousemove event triggered in the moving process of the mouse, and under the condition that the mouse is determined to continuously move in the first area, the user is considered to want to move the mouse to the next-level menu, and the next-level menu is displayed in a delayed manner all the time in the moving process of the mouse, so that the situation that the user wants to enter the next-level menu can be avoided, and the next-level menu disappears in the moving process of the mouse, so that the user can smoothly enter the next-level menu is ensured.
In one embodiment of the present invention, the relative positional relationship between the mouse coordinates of any mouseove event record and the first region is determined based on the following manner:
determining an endpoint of the first area based on the initial coordinates of the mouse and the area where the next-level menu is located;
determining a plurality of second areas based on the boundary of the first area, the mouse coordinates recorded by the mouseove event and the connecting line between each end point of the first area;
and if the sum of the areas of the second areas is consistent with the area of the first area, the mouse coordinate representing the mouseove event record is positioned in the first area, otherwise, the mouse coordinate representing the mouseove event record is not positioned in the first area.
In the foregoing, the first area specifically covers any linear track of the mouse moving from the initial coordinate to the area where the next-level menu is located, so that the endpoint of the first area can be determined based on the initial coordinate and the area where the next-level menu is located. Taking fig. 3 as an example, the position coordinates of the point a can be determined based on the initial coordinates of the mouse, and the position coordinates of the three endpoints of the first area, namely the triangle ABC, can be determined by combining the position coordinates of the point B at the upper left corner and the position coordinates of the point C at the lower left corner of the secondary menu corresponding to the primary menu-4.
And after the mouse moves out of the menu item in the upper menu, namely, leaves the end point of the first area formed by the initial coordinates, aiming at a mousemove event triggered by the movement of the mouse, a plurality of second areas can be determined by connecting the mouse coordinates recorded by the mousemove event with each end point of the first area and combining the boundaries of the first area.
Fig. 4 is a schematic diagram of a first area and a second area provided by an embodiment of the present invention, where an illustrated triangle ABC corresponds to the first area ABC in fig. 3, and position coordinates of three endpoints of the triangle ABC may be determined based on initial coordinates of a mouse and an area where a next level menu is located. After the circular mark shown in the figure, namely the position A of the mouse in the upper menu is separated from the position A, the position is located in the moving process, the specific coordinates of the position are recorded by the corresponding mousemove event, and three second areas a, b and c can be determined by connecting the circular mark with each end point of the first area ABC and combining the boundary of the first area ABC.
In connection with fig. 4, it can be seen that if the mouse is located within the first area, i.e. the circular logo is located within triangle ABC, the sum of the areas of triangle a, triangle b and triangle c should coincide with the area of triangle ABC, otherwise the sum of the areas of triangle a, triangle b and triangle c does not coincide with triangle ABC.
Therefore, in the embodiment of the invention, for the mouseove event triggered when the mouse moves, whether the mouse coordinate recorded by the mouseove event is located in the first area can be determined by judging whether the sum of the areas of the second area is consistent with the area of the first area. Specifically, if the sum of the areas of the second areas is consistent with the area of the first area, the mouse coordinate representing the mouseove event record is in the first area, and if the sum of the areas of the second areas is inconsistent with the area of the first area, the mouse coordinate representing the mouseove event record is not in the first area.
In practical applications, since there may be a calculation error when the area calculation is performed by the electronic device, an error value may be preset, and when the absolute value of the difference between the sum of the areas of the second area and the area of the first area is not greater than the error value, it may be considered that the sum of the areas of the second area is identical to the area of the first area. Taking fig. 4 as an example, if the error value is set to M, the area of triangle ABC is denoted as T, and the areas of triangle a, triangle b, and triangle c are denoted as a, b, and c, respectively, then if And (3) representing that the sum of the areas of the second areas is consistent with the area of the first area, namely that the mouse coordinates of the corresponding mouseove event record are positioned in the first area, or else, the mouse coordinates of the mouseove event record are not positioned in the first area. As an example, in the case of implementing the method for displaying a multilevel menu provided by the embodiment of the present invention through JavaScript, a condition of math.abs (a+b+c-T). Ltoreq.m may be set in the code, and if the mouse coordinate of any mousemove event record meets the condition, it is indicated that the mouse coordinate is located in the first area. Wherein, the magnitude of the error value can be selected based on actual requirements, which is not needed in the embodiment of the inventionThe row definition, as one example, may set the error value to 0.001.
As an example, in the case where the first area is specifically a triangle, for example, in the example of fig. 3, in the process of specifically determining the relative position relationship between the mouse coordinates recorded by the mousemove event and the first area, since the known information is specifically the mouse coordinates and the endpoint coordinates of the first area, for convenience in calculation, the areas of the first area and the second area may be specifically calculated by the halen-qin-jiu shao formula. Wherein, the equation of the sea-Qin nine shao is specifically expressed as follows:
Wherein,representing the area of triangle>、/>And->Three sides of triangle are respectively indicated, +.>Representing half perimeter of triangle, i.e +.>
Therefore, when the end points of the first region and the second region are determined, the area of the first region and the area of the second region can be calculated by the above equation by determining the side length of each triangle based on the end point coordinates of the end points. Specifically, if the coordinates of two endpoints of the triangle are respectivelyAnd->Corresponding side length
As an example, in the case of implementing the method for displaying a multi-level menu provided by the embodiment of the present invention through JavaScript, the method may be specifically implemented through codesTo calculate the side lengths of the first area and the second area and to pass the code +.>To calculate the areas of the first and second regions.
In the embodiment of the invention, after the mouse moves out of the menu item in the upper menu, a plurality of second areas are determined based on the connection line between the mouse coordinates of the mouseove event record and each end point of the first area and the boundary of the first area, and whether the sum of the areas of the second areas is consistent with the area of the first area is judged, so that whether the mouse coordinates of the mouseove event record are positioned in the first area is determined, and the accuracy is higher when the relative position relation between the mouse coordinates of the mouseove event record and the first area is determined.
In one embodiment of the present invention, the method for displaying a multi-level menu provided in the embodiment of the present invention further includes:
and in the time delay display period of the next-stage menu, if the time length of the mouse moving out of the menu item exceeds the preset maximum time length, stopping the time delay display of the next-stage menu.
In the foregoing, by applying the method for displaying the multi-level menu provided by the embodiment of the invention, the next-level menu can be displayed in a delayed manner all the time in the process that the mouse moves in the first area. In the embodiment of the invention, in order to avoid that the mouse moves in the first area, but the user does not want to enter the next menu in practice (for example, the user does not move the mouse through a straight line track), the time delay display performed on the next menu affects the user experience, and the preset maximum time period for the mouse to move out of the menu item can be set. Therefore, in the embodiment of the invention, under the condition that the time length of the mouse moving out of the menu item in the upper-level menu exceeds the preset maximum time length, the user is considered not to want to enter the corresponding lower-level menu, so that the time-delay display of the lower-level menu is stopped, and the lower-level menu is immediately hidden.
Based on the same inventive concept, the embodiment of the present invention further provides a display apparatus of a multi-level menu, referring to fig. 5, the apparatus includes:
The first display module 501 is configured to, for a menu of an adjacent level, display a next level menu corresponding to a menu item when detecting that a mouse moves into/clicks on any menu item in the previous level menu during displaying the previous level menu;
the determining module 502 is configured to determine, when it is detected that the mouse moves out of the menu item during displaying the next level menu, a first area based on a position where the mouse is located and an area where the next level menu is located; the first area covers any linear track of the mouse from the position to the next menu;
the first judging module 503 is configured to judge whether the mouse enters the first area, if yes, perform delay display on the next-level menu, and if not, hide the next-level menu.
According to the display device of the multilevel menu, aiming at the adjacent level menu of the default hidden next level menu, when the mouse is detected to move out of the menu item in the process of displaying the next level menu corresponding to the menu item in the previous level menu, a first area is determined based on the position of the mouse and the area of the next level menu, if the mouse enters the first area, the user is considered to intend to enter the next level menu, the next level menu is displayed in a delayed mode, if the mouse does not enter the first area, the user is considered to not want to enter the next level menu, so that the next level menu is hidden, and the first area specifically covers any linear track of the area of the next level menu where the mouse moves from the position. Therefore, aiming at the multi-level menu provided with the hidden menu, under the condition that a user moves the mouse out of menu items in the upper level menu corresponding to the lower level menu being displayed, the characteristic that the user usually moves the mouse based on a straight line track is utilized to determine a first area between the menu items and the lower level menu, whether the user intends to enter the lower level menu is judged by means of the actual movement condition of the first area and the mouse, the lower level menu is displayed in a delayed mode under the condition that the user intends to enter the lower level menu is judged, the mouse is ensured to successfully enter the lower level menu, the lower level menu is hidden under the condition that the user does not want to enter the lower level menu is judged, and the display of the lower level menu is prevented from interfering with user experience, so that the user experience in the menu switching process through the mouse when the multi-level menu provided with the hidden menu is applied by the user can be improved.
In one embodiment of the present invention, the determining module 502 is specifically configured to:
in the process of displaying a next-level menu, responding to a mousemove event triggered when a mouse moves out of a menu item, taking a mouse coordinate recorded by the mousemove event as an initial coordinate of the mouse, and determining a first area based on the initial coordinate and an area where the next-level menu is located; the first area specifically covers any linear track of the mouse from the initial coordinates to the area where the next menu item is located;
the first judging module 503 includes:
and the judging unit is used for judging whether the mouse enters the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area.
In one embodiment of the invention, the apparatus further comprises:
the second judging module is used for judging whether the mouse continuously moves in the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered in the moving process of the mouse and the first area;
and the second display module is used for carrying out delay display on the next-stage menu in the moving process of the mouse if the judging result of the second judging module is yes, until the mouse moves out of the first area or moves into the next-stage menu.
In one embodiment of the present invention, the first determining module 503 and the second determining module determine the relative positional relationship between the mouse coordinates of any mouseove event record and the first area based on the following manner:
determining an endpoint of the first area based on the initial coordinates of the mouse and the area where the next-level menu is located;
determining a plurality of second areas based on the boundary of the first area, the mouse coordinates recorded by the mouseove event and the connecting line between each end point of the first area;
and if the sum of the areas of the second areas is consistent with the area of the first area, the mouse coordinate representing the mouseove event record is positioned in the first area, otherwise, the mouse coordinate representing the mouseove event record is not positioned in the first area.
In one embodiment of the invention, the apparatus further comprises:
and the termination module is used for terminating the delay display of the next-stage menu if the time length of the mouse moving out of the menu item exceeds the preset maximum time length during the delay display of the next-stage menu.
The embodiment of the invention also provides an electronic device, as shown in fig. 6, which comprises a processor 601, a communication interface 602, a memory 603 and a communication bus 604, wherein the processor 601, the communication interface 602 and the memory 603 complete communication with each other through the communication bus 604,
A memory 603 for storing a computer program;
the processor 601 is configured to execute the program stored in the memory 603, and implement the following steps:
aiming at the menus of adjacent levels, in the process of displaying the menu of the upper level, when any menu item in the menu of the upper level is detected to be moved into/clicked by a mouse, displaying the menu of the lower level corresponding to the menu item;
in the process of displaying the next-level menu, when the mouse is detected to move out of the menu item, determining a first area based on the position of the mouse and the area of the next-level menu; the first area covers any linear track of the mouse from the position to the next menu;
judging whether the mouse enters the first area, if so, carrying out time delay display on the next-level menu, and if not, hiding the next-level menu.
The communication bus mentioned above for the electronic devices may be a peripheral component interconnect standard (Peripheral Component Interconnect, PCI) bus or an extended industry standard architecture (Extended Industry Standard Architecture, EISA) bus, etc. The communication bus may be classified as an address bus, a data bus, a control bus, or the like. For ease of illustration, the figures are shown with only one bold line, but not with only one bus or one type of bus.
The communication interface is used for communication between the electronic device and other devices.
The Memory may include random access Memory (Random Access Memory, RAM) or may include Non-Volatile Memory (NVM), such as at least one disk Memory. Optionally, the memory may also be at least one memory device located remotely from the aforementioned processor.
The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU), a network processor (Network Processor, NP), etc.; but also digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field programmable gate arrays (Field-ProgrammableGate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.
In yet another embodiment of the present invention, there is also provided a computer readable storage medium having stored therein a computer program which, when executed by a processor, implements the steps of the method for displaying a multi-level menu of any of the above.
In yet another embodiment of the present invention, there is also provided a computer program product containing instructions that, when run on a computer, cause the computer to perform the method of displaying a multi-level menu of any of the above embodiments.
In the above embodiments, it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed on a computer, produces a flow or function in accordance with embodiments of the present invention, in whole or in part. The computer may be a general purpose computer, a special purpose computer, a computer network, or other programmable apparatus. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another, for example, by wired (e.g., coaxial cable, optical fiber, digital Subscriber Line (DSL)), or wireless (e.g., infrared, wireless, microwave, etc.). The computer readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains an integration of one or more available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid State Disk (SSD)), etc.
It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
In this specification, each embodiment is described in a related manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for the display apparatus, electronic device and computer readable storage medium embodiments of the multi-level menu, since they are substantially similar to the method embodiments, the description is relatively simple, and reference is made to the partial description of the method embodiments for the matters.
The foregoing description is only of the preferred embodiments of the present invention and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention are included in the protection scope of the present invention.

Claims (8)

1. A method for displaying a multi-level menu, comprising:
aiming at menus of adjacent levels, in the process of displaying the menu of the upper level, when any menu item in the menu of the upper level is detected to be moved into/clicked by a mouse, displaying the menu of the lower level corresponding to the menu item;
when the mouse is detected to move out of the menu item in the process of displaying the next-level menu, determining a first area based on the position of the mouse and the area of the next-level menu; the first area covers any linear track of the mouse moving from the position to the next-level menu;
judging whether the mouse enters the first area, if so, carrying out time delay display on the next-level menu, and if not, hiding the next-level menu;
and when the mouse is detected to move out of the menu item, determining a first area based on the position of the mouse and the area of the next-level menu, wherein the step comprises the following steps:
Responding to a mousemove event triggered when the mouse moves out of the menu item, taking the mouse coordinate recorded by the mousemove event as an initial coordinate of the mouse, and determining the first area based on the initial coordinate and the area where the next-level menu is located; the first area specifically covers any linear track of the mouse from the initial coordinate to the next-level menu;
the step of judging whether the mouse enters the first area comprises the following steps:
and judging whether the mouse enters the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area.
2. The method of claim 1, wherein after determining that the mouse entered the first region, the method further comprises:
judging whether the mouse continuously moves in the first area or not based on the relative position relation between the mouse coordinates of the mouseove event record triggered in the moving process of the mouse and the first area;
if yes, the next-level menu is displayed in a time delay mode in the moving process of the mouse until the mouse moves out of the first area or moves into the next-level menu.
3. The method according to claim 1 or 2, wherein the relative positional relationship of the mouse coordinates of any of the mouseove event records and the first region is determined based on:
determining an endpoint of the first area based on the initial coordinates of the mouse and the area where the next-level menu is located;
determining a plurality of second areas based on boundaries of the first areas, mouse coordinates of the mouseove event record, and a line between each of the endpoints of the first areas;
and if the sum of the areas of the second areas is consistent with the area of the first area, the mouse coordinate representing the mouseove event record is located in the first area, otherwise, the mouse coordinate representing the mouseove event record is not located in the first area.
4. The method according to claim 1 or 2, characterized in that the method further comprises:
and in the time delay display period of the next-stage menu, if the time length of the mouse moving out of the menu item exceeds the preset maximum time length, stopping the time delay display of the next-stage menu.
5. A display device for a multi-level menu, comprising:
the first display module is used for displaying a lower-level menu corresponding to any menu item in the upper-level menu when detecting that the mouse moves into/clicks any menu item in the upper-level menu in the process of displaying the upper-level menu aiming at the menus of adjacent levels;
The determining module is used for determining a first area based on the position of the mouse and the area of the next-level menu when the mouse is detected to move out of the menu item in the process of displaying the next-level menu; the first area covers any linear track of the mouse moving from the position to the next-level menu;
the first judging module is used for judging whether the mouse enters the first area or not, if yes, carrying out time delay display on the next-level menu, and if not, hiding the next-level menu;
the determining module is specifically configured to:
in the process of displaying the next-level menu, responding to a mousemove event triggered when the mouse moves out of the menu item, taking the mouse coordinate recorded by the mousemove event as the initial coordinate of the mouse, and determining the first area based on the initial coordinate and the area where the next-level menu is positioned; the first area specifically covers any linear track of the mouse from the initial coordinates to the area where the next-level menu item is located;
the first judging module includes:
and the judging unit is used for judging whether the mouse enters the first area or not based on the relative position relation between the mouse coordinates of the mousemove event record triggered after the mouse moves out of the menu item and the first area.
6. The apparatus of claim 5, wherein the apparatus further comprises:
the second judging module is used for judging whether the mouse continuously moves in the first area or not based on the relative position relation between the mouse coordinates of the mouseove event record triggered in the moving process of the mouse and the first area;
and the second display module is used for carrying out delay display on the next-stage menu in the moving process of the mouse until the mouse moves out of the first area or moves into the next-stage menu if the judgment result of the second judgment module is yes.
7. The electronic equipment is characterized by comprising a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory are communicated with each other through the communication bus;
a memory for storing a computer program;
a processor for carrying out the method steps of any one of claims 1-4 when executing a program stored on a memory.
8. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored therein a computer program which, when executed by a processor, implements the method steps of any of claims 1-4.
CN202311093022.2A 2023-08-29 2023-08-29 Multi-level menu display method and device Active CN116860137B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311093022.2A CN116860137B (en) 2023-08-29 2023-08-29 Multi-level menu display method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311093022.2A CN116860137B (en) 2023-08-29 2023-08-29 Multi-level menu display method and device

Publications (2)

Publication Number Publication Date
CN116860137A CN116860137A (en) 2023-10-10
CN116860137B true CN116860137B (en) 2023-12-05

Family

ID=88219499

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311093022.2A Active CN116860137B (en) 2023-08-29 2023-08-29 Multi-level menu display method and device

Country Status (1)

Country Link
CN (1) CN116860137B (en)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1920761A (en) * 2005-08-26 2007-02-28 国际商业机器公司 Pull down menu display method and device
CN102331932A (en) * 2011-09-08 2012-01-25 北京像素软件科技股份有限公司 Method for realizing menu interface
CN104077036A (en) * 2013-03-27 2014-10-01 苏州精易会信息技术有限公司 Realization method of pull-down menu design of category navigation
CN106095255A (en) * 2016-06-20 2016-11-09 武汉斗鱼网络科技有限公司 A kind of drop-down menu display control method and device
CN107506115A (en) * 2016-06-14 2017-12-22 阿里巴巴集团控股有限公司 A kind of display processing method of menu, apparatus and system
CN113589994A (en) * 2021-07-30 2021-11-02 恒生电子股份有限公司 Display control method, device and equipment of navigation menu and storage medium

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8423912B2 (en) * 2010-06-29 2013-04-16 Pourang Irani Selectable parent and submenu object display method with varied activation area shape

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1920761A (en) * 2005-08-26 2007-02-28 国际商业机器公司 Pull down menu display method and device
CN102331932A (en) * 2011-09-08 2012-01-25 北京像素软件科技股份有限公司 Method for realizing menu interface
CN104077036A (en) * 2013-03-27 2014-10-01 苏州精易会信息技术有限公司 Realization method of pull-down menu design of category navigation
CN107506115A (en) * 2016-06-14 2017-12-22 阿里巴巴集团控股有限公司 A kind of display processing method of menu, apparatus and system
CN106095255A (en) * 2016-06-20 2016-11-09 武汉斗鱼网络科技有限公司 A kind of drop-down menu display control method and device
CN113589994A (en) * 2021-07-30 2021-11-02 恒生电子股份有限公司 Display control method, device and equipment of navigation menu and storage medium

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
JS判断鼠标是否在三角形内;baiezone;https://www.cnblogs.com/baie/archive/2012/08/23/2652918.html;第1页 *

Also Published As

Publication number Publication date
CN116860137A (en) 2023-10-10

Similar Documents

Publication Publication Date Title
TWI698122B (en) Barrage display method and client
CN108710469B (en) Application program starting method, mobile terminal and medium product
US9361009B2 (en) Methods and systems for setting parameter values via radial input gestures
TWI569171B (en) Gesture recognition
CN109718538B (en) Method and device for frame selection of virtual object in game, electronic equipment and storage medium
CN106201632B (en) Application program access method and mobile terminal
US20160004373A1 (en) Method for providing auxiliary information and touch control display apparatus using the same
CN109144392B (en) Method and device for processing gesture conflict and electronic equipment
US20150022482A1 (en) Multi-touch management for touch screen displays
CN112083973B (en) Window closing method and device, electronic equipment and storage medium
US20140354557A1 (en) Touch selection system and method for on-screen displayed multiple objects
TW201610819A (en) Method and system for classified displaying desktop icons
US20150286356A1 (en) Method, apparatus, and terminal device for controlling display of application interface
CN107688420B (en) Method for starting floating object and mobile terminal
CN105843547A (en) Page sliding method and device
WO2021068410A1 (en) Method for moving interface elements, system, vehicle and storage medium
CN109240591B (en) Interface display method and device
CN112416236A (en) Gesture packaging and interaction method and device based on web page and storage medium
CN110795015A (en) Operation prompting method, device, equipment and storage medium
CN116860137B (en) Multi-level menu display method and device
US20150355819A1 (en) Information processing apparatus, input method, and recording medium
CN105677169A (en) Method and device for enabling mouse pointer to automatically follow cursor
CN109976576B (en) Method and device for preventing mistaken touch of mobile terminal screen
EP2887197B1 (en) Method for selecting an electronic content to be displayed on a display of an electronic device
CN104317492A (en) Wallpaper setting method

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
CP03 Change of name, title or address

Address after: 101, Floor 1-8, Building 8, Courtyard 13, Ronghua South Road, Beijing Economic and Technological Development Zone, Daxing District, Beijing 100176 (Yizhuang Group, High-end Industrial Zone, Beijing Pilot Free Trade Zone)

Patentee after: AVIC International Golden Net (Beijing) Technology Co.,Ltd.

Country or region after: China

Address before: Building 8, No.13 Ronghua South Road, Daxing District Economic and Technological Development Zone, Beijing, 100176

Patentee before: AVIC INTERNATIONAL E-BUSINESS Inc.

Country or region before: China

CP03 Change of name, title or address