Target control control method and device for menu sidebar

Abstract

The invention discloses a method and device for controlling a target control of a menu sidebar, and the method comprises the steps: displaying a plurality of first controls on a first page of a preset container in a running state; if the first state switching instruction is detected, switching from the running state to the editing state; if a moving instruction triggered by the dragging operation based on the target control is detected, obtaining pointer position information of a mouse pointer; determining a target insertion position of the target control based on the pointer position information and the first layout information; if the mouse pointer is located in the page turning control area of the preset container, multiple second controls are displayed on a second page of the preset container; updating the target insertion position based on the pointer position information and the second layout information; if a placement instruction triggered based on the release operation is detected, determining third layout information based on the target insertion position; and displaying the target control and the plurality of second controls on the second page according to the third layout information. A user can freely adjust the control sequence across pages, and the operation efficiency is improved.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction technology, and in particular to a method and apparatus for controlling a target control in a menu sidebar. Background Technology

[0002] As a core navigation component of the graphical user interface, the menu sidebar plays a vital role in modern software systems. It not only organizes and displays function entry points but also directly determines the user's operating efficiency and user experience.

[0003] As application functionality continues to expand, menu items often need to be displayed in pages. However, existing menu controls mostly employ static layout designs, preventing users from personalizing the sorting and grouping of paged menu items according to their individual habits and preferences. In practical applications, different users exhibit significant differences in the frequency and reliance on functional items, but existing technologies with statically configured multi-page menu sidebars cannot meet this personalized need. This forces users to frequently flip through pages to find the functions they require, greatly reducing operational efficiency. Summary of the Invention

[0004] To address the existing technical problems, this invention provides a method and device for controlling target controls in a menu sidebar. Users can enter an editing state by editing controls, freely adjust the order of controls by dragging and dropping them, and drag controls to other pages. Users can place frequently used function controls on the homepage to reduce page turning operations and improve operational efficiency. By setting separate editing and running states, dual-state data isolation ensures that the editing process does not interfere with the running state functions.

[0005] In a first aspect, embodiments of this application provide a method for controlling a target control in a menu sidebar, the method comprising: In the running state, multiple first controls are displayed on the first page of the preset container; the multiple first controls are arranged according to the first layout information; If a first state switching instruction triggered by an editing control on the first page is detected, switch from the running state to the editing state; If a movement command triggered by dragging a target control among multiple first controls is detected, obtain the pointer position information of the mouse pointer; The target insertion position of the target control is determined based on the pointer position information and the first layout information; If the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container, multiple second controls are displayed on the second page of the preset container; the multiple second controls are arranged according to the second layout information; Update the target insertion position based on pointer position information and second layout information; If a placement command triggered by a release operation on the target control is detected, the third layout information is determined based on the target insertion position; The target control and multiple secondary controls are displayed on the second page using third layout information.

[0006] In an optional embodiment, if a movement command triggered by a drag operation on a target control among a plurality of first controls is detected, the pointer position information of the mouse pointer is obtained, including: If a movement command triggered by dragging the target control is detected, a draggable ghost image of the target control is generated. Get the mouse pointer position information; A draggable ghost image is displayed on the first page based on the pointer position information; If a placement command triggered by a release operation on the target control is detected, third layout information is determined based on the target insertion position, including: If a placement command triggered by a release operation on the target control is detected, hide the drag shadow; The third layout information is determined based on the target insertion position.

[0007] In an optional embodiment, after determining the target insertion position of the target control based on pointer position information and first layout information, the process includes: If the pointer position information is in the placeholder area of ​​two adjacent first controls or two adjacent second controls, a placeholder control is generated based on the target control; Determine intermediate layout information based on the target insertion position; Based on intermediate layout information, placeholder controls and multiple first controls can be displayed on the first page, or placeholder controls and multiple second controls can be displayed on the second page.

[0008] In an optional embodiment, the method further includes: If a second state switching instruction triggered by an editing control on the first or second page is detected, the program switches from the editing state to the running state.

[0009] In an optional embodiment, after switching from the running state to the editing state upon detecting a first state switching instruction triggered by an editing control on the first page, the method further includes: Get the boundary range of the preset container; Restrict the mouse pointer to a defined area; Start the scroll detection timer to periodically obtain the current scroll position; Display scrolling prompts based on the current scroll position; If a second state switching instruction triggered by an editing control on the first or second page is detected, after switching from the editing state to the running state, the following further steps are included: Remove the restriction on the mouse pointer within the boundary area.

[0010] In one optional embodiment, determining the target insertion position of the target control based on pointer position information and first layout information includes: Displacement information is determined based on pointer position information; If the displacement information is greater than the preset debouncing threshold, the reference control is determined based on the pointer position information and the first layout information; The target insertion position is determined based on the reference control.

[0011] In an optional embodiment, before displaying multiple first controls on the first page of the preset container in the running state, the method further includes: Retrieve multiple raw controls and multiple received custom controls; Merge multiple original controls and multiple custom controls into a basic control set; the basic control set includes multiple basic controls to be processed. Determine the layout relationships between multiple basic controls; Based on layout relationship information, determine multiple first controls and multiple second controls in the basic control set; The first layout information of multiple first controls and the second layout information of multiple second controls are determined based on the layout relationship information.

[0012] In one optional embodiment, determining the layout relationship information between multiple basic controls includes: Analyze and obtain the attribute and functional information of multiple basic controls; The adjacency relationships between multiple basic controls are determined based on attribute and functional information; adjacency relationships include data flow relationships, operation sequence relationships, hierarchical inclusion relationships, and visual classification relationships. Execute for each basic control: Define the currently executing base control as the current control; Determine the adjacency matching degree between the current control and each other basic control in the basic control set based on adjacency relationships; Determine the target adjacent control among other basic controls based on the adjacent matching degree; The layout relationship information is determined based on each current control and its corresponding target adjacent control.

[0013] In an optional embodiment, after obtaining the pointer position information of the mouse pointer if a movement command triggered by a drag operation on a target control among a plurality of first controls is detected, the method further includes: The first page displays associated drag-and-drop information and associated drag-and-drop controls; the associated drag-and-drop information prompts whether to simultaneously drag the target adjacent controls of the target control. If an associated drag command triggered by an associated drag control is detected, the target insertion position of the target control and the target adjacent control is determined based on the pointer position information and the first layout information; or, if a separate drag command triggered by an associated drag control is detected, the target insertion position of the target control is determined based on the pointer position information and the first layout information.

[0014] Secondly, embodiments of this application provide a target control device for a menu sidebar, the device comprising: The first display module is used to display multiple first controls on the first page of a preset container during operation; the multiple first controls are arranged according to first layout information. The state switching module is used to switch from the running state to the editing state if a first state switching instruction triggered by the editing control on the first page is detected. The acquisition module is used to acquire the pointer position information of the mouse pointer if a movement command triggered by dragging operation on the target control among multiple first controls is detected. The first determining module is used to determine the target insertion position of the target control based on pointer position information and first layout information; The second display module is used to display multiple second controls on the second page of the preset container if the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container; the multiple second controls are arranged according to the second layout information. The position update module is used to update the target insertion position based on pointer position information and second layout information; The second determining module is used to determine the third layout information based on the target insertion position if a placement instruction triggered by a release operation on the target control is detected. The third display module is used to display the target control and multiple second controls on the second page using third layout information.

[0015] Thirdly, embodiments of this application provide an electronic device, which includes a processor and a memory. The memory stores at least one instruction, at least one program, code set, or instruction set. The processor loads and executes the at least one instruction, at least one program, code set, or instruction set to implement the target control control method for the menu sidebar of the first aspect.

[0016] Fourthly, embodiments of this application provide a computer-readable storage medium storing at least one instruction or at least one program, wherein the at least one instruction or at least one program is loaded and executed by a processor to implement the target control control method for the menu sidebar of the first aspect.

[0017] Fifthly, embodiments of this application provide a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the target control control method for the menu sidebar of the first aspect.

[0018] The target control method and apparatus for menu sidebar provided in this application have the following technical effects: In the running state, multiple first controls are displayed on the first page of the preset container; the multiple first controls are arranged according to first layout information; if a first state switching instruction triggered by editing controls on the first page is detected, the system switches from the running state to the editing state; if a movement instruction triggered by dragging a target control among the multiple first controls is detected, the pointer position information of the mouse pointer is obtained; the target insertion position of the target control is determined based on the pointer position information and the first layout information; if the pointer position information indicates that the mouse pointer is located in the page-turning control area of ​​the preset container, multiple second controls are displayed on the second page of the preset container; the multiple second controls are arranged according to second layout information; the target insertion position is updated based on the pointer position information and the second layout information; if a placement instruction triggered by releasing a target control is detected, third layout information is determined based on the target insertion position; the target control and multiple second controls are displayed on the second page with the third layout information. In this embodiment, the user can enter the editing state by editing controls, and freely adjust the order of controls by dragging controls, and allows dragging controls to other pages. The user can place frequently used function controls on the home page to reduce page-turning operations and improve operational efficiency; by setting separate editing and running states, dual-state data isolation ensures that the editing process does not interfere with the running state function. Attached Figure Description

[0019] To more clearly illustrate the technical solutions and advantages in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram of a main interface provided in an embodiment of this application; Figure 2 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 1 ; Figure 3 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 2 ; Figure 4 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 3 ; Figure 5 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 4 ; Figure 6 This is a schematic diagram of the structure of a target control device for a menu sidebar provided in an embodiment of this application; Figure 7 This is a hardware structure block diagram of a server for a target control control method for a menu sidebar provided in an embodiment of this application. Detailed Implementation

[0021] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0022] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or server that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

[0023] Please see Figure 1 , Figure 1 This is a schematic diagram of a main interface provided in an embodiment of this application. A preset container 101 is provided on the menu sidebar, and a first page 102 is displayed on the preset container. Several controls 103 are arranged on the first page. It should be noted that this application is based on Windows Forms (Winform).

[0024] In this embodiment, during operation, multiple first controls are displayed on a first page of a preset container; the multiple first controls are arranged according to first layout information; if a first state switching instruction triggered by an editing control on the first page is detected, the operation switches to the editing state; if a movement instruction triggered by a drag operation on a target control among the multiple first controls is detected, the pointer position information of the mouse pointer is obtained; the target insertion position of the target control is determined based on the pointer position information and the first layout information; if the pointer position information indicates that the mouse pointer is located in the page-turning control area of ​​the preset container, multiple second controls are displayed on a second page of the preset container; the multiple second controls are arranged according to second layout information; the target insertion position is updated based on the pointer position information and the second layout information; if a placement instruction triggered by a release operation on the target control is detected, third layout information is determined based on the target insertion position; the target control and multiple second controls are displayed on the second page according to the third layout information. In this embodiment, users can enter the editing state through the editing control, freely adjust the order of the controls by dragging and dropping them, and drag the controls to other pages. Users can place frequently used function controls on the homepage to reduce page turning operations and improve operation efficiency. By setting separate editing and running states, dual-state data isolation ensures that the editing process does not interfere with the running state functions.

[0025] The following describes a specific embodiment of a target control control method for a menu sidebar according to this application. Figure 2 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 1 This specification provides method operation steps as shown in the embodiments or flowcharts, but based on conventional or non-inventive labor, more or fewer operation steps may be included. The order of steps listed in the embodiments is merely one possible execution order among many and does not represent the only execution order. In actual system or server products, the methods shown in the embodiments or drawings can be executed sequentially or in parallel (e.g., in a parallel processor or multi-threaded processing environment). Specifically, as shown in the embodiments or drawings... Figure 2 As shown, it may include: S201: In the running state, multiple first controls are displayed on the first page of the preset container; the multiple first controls are arranged according to the first layout information.

[0026] S202: If a first state switching instruction triggered by the editing control on the first page is detected, switch from the running state to the editing state.

[0027] S203: If a movement command triggered by dragging a target control among multiple first controls is detected, obtain the pointer position information of the mouse pointer.

[0028] S204: Determine the target insertion position of the target control based on pointer position information and first layout information.

[0029] S205: If the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container, multiple second controls are displayed on the second page of the preset container; the multiple second controls are arranged according to the second layout information.

[0030] S206: Update the target insertion position based on pointer position information and second layout information.

[0031] S207: If a placement instruction triggered by a release operation on the target control is detected, the third layout information is determined based on the target insertion position.

[0032] S208: Display the target control and multiple second controls on the second page using third layout information.

[0033] Figure 3 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 2 The method may include: S301: In the running state, multiple first controls are displayed on the first page of the preset container.

[0034] In this embodiment, multiple first controls are arranged according to first layout information. In this application, multiple first controls of different sizes are arranged vertically within a preset container.

[0035] S302: If a first state switching instruction triggered by the editing control on the first page is detected, switch from the running state to the editing state.

[0036] In one possible embodiment, the user clicks the edit control on the first page, triggering a first state switching instruction, switching from the running state to the edit state. It should be emphasized that, after entering the edit state, this application switches to mirror rendering to avoid affecting the original interface layout.

[0037] Specifically, first, each page of the original menu sidebar is traversed, and a corresponding mirror page container is created for each page. For each control within the page, a corresponding wrapper is created. Through this layer-by-layer copying method, a mirror menu sidebar with a structure completely identical to the original menu sidebar is generated.

[0038] After the structure is copied, the system performs size adaptation processing on the original menu and the mirrored menu respectively. It adopts a unified scaling algorithm, uses 0.7 times the width of the container as the target width, calculates the scaling factor of each control, and then calculates the left margin value based on the scaled control width and the container width to ensure that all controls are displayed horizontally centered within the container, so that the editing state and the running state show visual consistency.

[0039] Finally, configure a dedicated interactive component for each wrapper control in the mirror menu. Add a drag handle control to the top of the wrapper; this handle is responsible for receiving mouse operation events, including mousedown, mousemove, and drop events. Additionally, a delete button control can be added to the upper right corner of the wrapper, and a delete callback method can be bound to it for easy deletion.

[0040] In an optional embodiment, after switching from the running state to the editing state upon detecting a first state switching instruction triggered by an editing control on the first page, the method further includes: S3021: Obtain the boundary range of the preset container.

[0041] S3022: Restrict the mouse pointer to a bounded area.

[0042] After entering edit mode, the Windows operating system's application programming interface ClipCursor (mouse pointer range limitation function) is called to limit the range of the mouse pointer. First, the boundary range of the preset container is obtained, and the coordinates of the boundary range on the screen are used as parameters to limit the movement of the mouse pointer, so that the mouse pointer can only adjust the control within the preset container range to avoid accidental operation.

[0043] S3023: Start the scroll detection timer to periodically obtain the current scroll position.

[0044] S3024: Display scrolling prompt information based on the current scrolling position.

[0045] Furthermore, a scroll detection timer is started to periodically check the current scroll position. If the current scroll position indicates that the user has scrolled to the top or bottom, no scroll prompt message is displayed; if the current scroll position indicates that the user has not scrolled to the top or bottom, a scroll prompt message is displayed to indicate that there is still content above or below the user.

[0046] Optionally, an up or down arrow can be displayed at a preset position in the preset container, such as the bottom right corner, to indicate to the user that there is still content above or below.

[0047] In other possible embodiments, after entering the editing state, a stroke effect can be added around the border of the preset container to highlight that the editing state has been entered.

[0048] S303: If a movement command triggered by dragging a target control among multiple first controls is detected, obtain the pointer position information of the mouse pointer.

[0049] In this embodiment of the application, after entering the editing state, the control displays a drag handle and a delete handle, and the user can trigger a movement command by dragging the drag handle with the mouse.

[0050] In an optional embodiment, if a movement command triggered by a drag operation on a target control among a plurality of first controls is detected, the pointer position information of the mouse pointer is obtained, including: S3031: If a movement command triggered by a drag operation on the target control is detected, a drag ghost image of the target control is generated.

[0051] S3032: Get the mouse pointer position information.

[0052] S3033: Display draggable ghost image on the first page based on pointer position information.

[0053] To make the real-time position of the target control clearer to the user, a draggable shadow of the same size as the target control is generated. The draggable shadow moves smoothly with the mouse at regular intervals, and the center of the draggable shadow is aligned with the mouse pointer.

[0054] Specifically, a draggable phantom is generated by taking a screenshot of the target control's wrapper. If the screenshot fails, a solid color bitmap of the same size as the target control is created to avoid null references.

[0055] S304: Determine the target insertion position of the target control based on pointer position information and first layout information.

[0056] In one optional embodiment, determining the target insertion position of the target control based on pointer position information and first layout information includes: S3041: Determine displacement information based on pointer position information.

[0057] S3042: If the displacement information is greater than the preset debouncing threshold, determine the reference control based on the pointer position information and the first layout information.

[0058] In this embodiment of the application, the preset debouncing threshold is 3~5 px to avoid accidental touches. That is, when the target control is dragged more than 3~5 px, the operation is considered not to be jitter, and subsequent operations are performed. The reference control is dynamically calculated and the target insertion position is updated according to the pointer position.

[0059] S3043: Determine the target insertion position based on the reference control.

[0060] In an optional embodiment, after determining the target insertion position of the target control based on pointer position information and first layout information, the process includes: S3044: If the pointer position information is in the placeholder area of ​​two adjacent first controls or two adjacent second controls, generate a placeholder control based on the target control.

[0061] S3045: Determine intermediate layout information based on the target insertion position.

[0062] S3046: Display placeholder controls and multiple first controls on the first page or display placeholder controls and multiple second controls on the second page based on intermediate layout information.

[0063] In one possible embodiment, to further facilitate the user's understanding of the effect after the target control is placed, a placeholder control of the same size as the target control is generated. Specifically, it can be a dashed frame with a certain degree of transparency, with a "+" symbol set in the center. It can also create a breathing effect by periodically changing the transparency and line width, or create a neon effect or flashing effect by adding multiple layers of outline and color rotation to highlight the placeholder control.

[0064] Regardless of whether the page is turned, when the pointer position information is in the placeholder area of ​​two adjacent first controls or two adjacent second controls, it means that the target control needs to be inserted between these two adjacent controls. Adjust the position of other controls according to the target insertion position, determine the intermediate layout information, and display the placeholder control and other controls according to the intermediate layout information.

[0065] S305: If the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container, display multiple second controls on the second page of the preset container.

[0066] In this embodiment, multiple second controls are arranged on a second page using second layout information. Specifically, the second page can be the page following the first page.

[0067] In one possible embodiment, the page-turning control area of ​​the preset container is located at the bottom of the preset container and has two buttons for turning the page to "previous page" and "next page" respectively.

[0068] When the target control is dragged to the page-turning control area and held for a preset time, multiple second controls are displayed on the second page of the preset container.

[0069] S306: Update the target insertion position based on pointer position information and second layout information.

[0070] After performing a page-turning operation, the target insertion position is updated based on the pointer position information and the second layout information, and the draggable shadow and placeholder controls are refreshed.

[0071] S307: If a placement instruction triggered by a release operation on the target control is detected, the third layout information is determined based on the target insertion position.

[0072] In one optional embodiment, if a placement instruction triggered by a release operation on the target control is detected, third layout information is determined based on the target insertion position, including: S3071: If a placement command triggered by a release operation on the target control is detected, hide the drag shadow.

[0073] S3072: Determine the third layout information based on the target insertion position.

[0074] S308: Display the target control and multiple secondary controls on the second page using third layout information.

[0075] Upon detecting a placement command triggered by a release operation on the target control, if the target control spans multiple pages (i.e., after page turning), the target control is removed from the first page and inserted into the second page; if the target control is on the same page, the controls on the current page are rearranged according to the drag operation.

[0076] S309: If a second state switching instruction triggered by an editing control on the first or second page is detected, switch from the editing state to the running state.

[0077] In this embodiment, if a second state switching instruction triggered by a completed editing control on the first or second page is detected, such as clicking the "Complete Editing" control on the page, the editing state is exited and a new control sequence is constructed.

[0078] In an optional embodiment, after switching from the editing state to the running state upon detecting a second state switching instruction triggered by an editing control completed on the first page or the second page, the method further includes: S3091: Remove the restriction on the mouse pointer within the boundary area.

[0079] After removing the restriction on the mouse pointer within the boundary area, the mouse pointer can move freely in the area outside the preset container.

[0080] Figure 4 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 3 The method may include: S401: Hides the original scrollbar of the preset container.

[0081] S402: Generate the target scrollbar based on preset width data.

[0082] S403: Display the target scrollbar on the preset container.

[0083] In this embodiment, the native scrollbar of the preset container can be hidden, and a target scrollbar with a width of 4~8px can be generated and displayed on the preset container.

[0084] Figure 5 This is a flowchart illustrating a target control control method for a menu sidebar provided in an embodiment of this application. Figure 4 The method may include: S501: Get multiple raw controls and multiple custom controls received.

[0085] S502: Merges multiple original controls and multiple custom controls into a basic control set.

[0086] In this embodiment of the application, the user can input multiple custom controls, and merge multiple original controls and multiple custom controls into a basic control set, which includes multiple basic controls to be processed.

[0087] Before processing, the basic controls need to be preprocessed, such as by scaling them proportionally.

[0088] S503: Determine the layout relationship information between multiple basic controls.

[0089] In one optional embodiment, determining the layout relationship information between multiple basic controls includes: S5031: Analyze and obtain the attribute and function information of multiple basic controls.

[0090] S5032: Determine the adjacency relationship between multiple basic controls based on attribute information and functional information.

[0091] In this application embodiment, the adjacency relationship includes data flow relationship, operation sequence relationship, hierarchical inclusion relationship and visual classification relationship.

[0092] In one possible implementation, the data flow relationship indicates that there is a data transfer or dependency relationship between the controls. For example, the output data of one control is the input data of another control. Therefore, the data flow relationship between controls can be obtained by examining the control properties, analyzing event handlers, and viewing the data flow path.

[0093] In one possible embodiment, the operation sequence control controls are arranged in a certain order, which users typically follow. For example, multiple step controls in a wizard interface. Therefore, by analyzing the labels, text prompts, or descriptions of the controls and examining the business process, the operation sequence relationships between the controls can be obtained.

[0094] In one possible implementation, the hierarchical containment relationship refers to the parent-child or grouping relationship between controls. For example, a parent node and child nodes in a tree control, or multiple controls within a group box. Therefore, the hierarchical containment relationship between controls can be determined by examining the relationships between controls, viewing their grouping properties, and analyzing the layout structure.

[0095] In other possible embodiments, visual classification relationships refer to controls that are visually grouped into the same category, typically because they have similar functions or appearances. For example, a group of buttons with similar functions may have similar icons. Therefore, visual classification relationships between controls can be obtained by analyzing their visual characteristics such as style, color, size, and icon.

[0096] After determining the adjacency relationships between multiple basic controls based on attribute and functional information, the following steps are performed for each basic control: S5033: Determine the currently executing base control as the current control.

[0097] S5034: Determine the adjacency matching degree between the current control and each other basic control in the basic control set based on adjacency relationship.

[0098] In one possible embodiment, feature vectors of the current control and each other basic control in the basic control set are extracted using a preset model, including data flow features, operation sequence features, hierarchical inclusion features, and visual classification features.

[0099] Then, calculate the first similarity of the data flow features between the current control and other controls, the second similarity of the operation sequence features between the current control and other controls, the third similarity of the hierarchical inclusion features between the current control and other controls, and the fourth similarity of the visual classification features between the current control and other controls.

[0100] Finally, the first similarity, second similarity, third similarity, and fourth similarity are integrated into the adjacent matching score.

[0101] S5035: Determine the target adjacent control among other basic controls based on the adjacent matching degree.

[0102] In this embodiment, controls with an adjacent matching degree greater than a preset threshold are selected as target adjacent controls.

[0103] S5036: Determine layout relationship information based on each current control and its corresponding target adjacent control.

[0104] S504: Based on layout relationship information, determine multiple first controls and multiple second controls in the basic control set.

[0105] S505: Determine the first layout information of multiple first controls and the second layout information of multiple second controls based on layout relationship information.

[0106] S506: In the running state, multiple first controls are displayed on the first page of the preset container with first layout information.

[0107] S507: If a first state switching instruction triggered by an editing control on the first page is detected, switch from the running state to the editing state.

[0108] S508: If a movement command triggered by dragging a target control among multiple first controls is detected, obtain the pointer position information of the mouse pointer.

[0109] S509: Display associated drag-and-drop information and associated drag-and-drop controls on the first page.

[0110] The associated drag information is used to prompt whether to simultaneously drag the target adjacent control.

[0111] S510: Determine whether an associated drag command triggered by the associated drag control has been detected. If yes, execute S511; otherwise, execute S512.

[0112] S511: Determine the target insertion position of the target control and the target adjacent control based on the pointer position information and the first layout information.

[0113] After determining the synchronization adjustment position, both the target control and its adjacent controls are treated as target controls for subsequent operations.

[0114] Correspondingly, the draggable shadow and placeholder control are also generated based on the target control and adjacent controls to achieve the effect of simulating the synchronous movement of the target control and adjacent controls.

[0115] S512: Determine the target insertion position of the target control based on pointer position information and first layout information.

[0116] In one possible embodiment, if an associated drag command triggered by an associated drag control is detected, the target insertion position of the target control and the target adjacent control is determined based on pointer position information and first layout information.

[0117] In another possible embodiment, if a separate drag command triggered based on an associated drag control is detected, the target insertion position of the target control is determined based on pointer position information and first layout information.

[0118] S513: If the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container, display multiple second controls on the second page of the preset container with the second layout information.

[0119] S514: Update the target insertion position based on pointer position information and second layout information.

[0120] S515: If a placement instruction triggered by a release operation on the target control is detected, the third layout information is determined based on the target insertion position.

[0121] S516: Display the target control and multiple secondary controls on the second page using third layout information.

[0122] S517: If a second state switching instruction triggered by an editing control on the first or second page is detected, switch from the editing state to the running state.

[0123] This application also provides a target control control device for a menu sidebar. Figure 6 This is a schematic diagram of the structure of a target control device for a menu sidebar provided in an embodiment of this application, as shown below. Figure 6 As shown, the device 600 includes: The first display module 601 is used to display multiple first controls on the first page of a preset container in the running state; the multiple first controls are arranged according to first layout information; The state switching module 602 is used to switch from the running state to the editing state if a first state switching instruction triggered by the editing control on the first page is detected. The acquisition module 603 is used to acquire the pointer position information of the mouse pointer if a movement command triggered by a drag operation on a target control among multiple first controls is detected. The first determining module 604 is used to determine the target insertion position of the target control based on pointer position information and first layout information; The second display module 605 is used to display multiple second controls on the second page of the preset container if the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container; the multiple second controls are arranged according to the second layout information. Position update module 606 is used to update the target insertion position based on pointer position information and second layout information; The second determining module 607 is used to determine third layout information based on the target insertion position if a placement instruction triggered by a release operation on the target control is detected. The third display module 608 is used to display the target control and multiple second controls on the second page with third layout information.

[0124] In an optional embodiment, it further includes: The first generation module is used to generate a draggable phantom of the target control if a movement command triggered by a drag operation on the target control is detected. The first acquisition module is used to acquire the pointer position information of the mouse pointer; The fourth display module is used to display the dragggle shadow on the first page based on the pointer position information; The first hidden module is used to hide the drag shadow if a placement command triggered by a release operation on the target control is detected. The third determination module is used to determine the third layout information based on the target insertion position.

[0125] In an optional embodiment, it further includes: The second generation module is used to generate a placeholder control based on the target control when the pointer position information is in the placeholder area of ​​two adjacent first controls or two adjacent second controls. The fourth determining module is used to determine intermediate layout information based on the target insertion position; The fifth display module is used to display placeholder controls and multiple first controls on the first page or to display placeholder controls and multiple second controls on the second page based on intermediate layout information.

[0126] In an optional embodiment, it further includes: The first state switching module is used to switch from the editing state to the running state if a second state switching instruction triggered by an editing control on the first or second page is detected.

[0127] In an optional embodiment, it further includes: The second acquisition module is used to acquire the boundary range of the preset container; The pointer restriction module is used to restrict the mouse pointer to a defined area. The third acquisition module is used to start the scroll detection timer to periodically acquire the current scroll position; The sixth display module is used to display scrolling prompts based on the current scrolling position; Also includes: The restriction removal module is used to remove the restriction on the mouse pointer within the boundary area.

[0128] In an optional embodiment, it further includes: The fifth determining module is used to determine displacement information based on pointer position information; The sixth determination module is used to determine the reference control based on the pointer position information and the first layout information if the displacement information is greater than the preset debouncing threshold. The seventh determination module is used to determine the target insertion position based on the reference control.

[0129] In an optional embodiment, it further includes: The fourth acquisition module is used to acquire multiple original controls and multiple received custom controls; The control merging module is used to merge multiple original controls and multiple custom controls into a basic control set; the basic control set includes multiple basic controls to be processed. The eighth module is used to determine the layout relationship information between multiple basic controls; The ninth determination module is used to determine multiple first controls and multiple second controls in the basic control set based on layout relationship information; The tenth determination module is used to determine the first layout information of multiple first controls and the second layout information of multiple second controls based on layout relationship information.

[0130] In an optional embodiment, it further includes: The fifth acquisition module is used to analyze and acquire the attribute and functional information of multiple basic controls; The eleventh determination module is used to determine the adjacency relationship between multiple basic controls based on attribute information and functional information; the adjacency relationship includes data flow relationship, operation sequence relationship, hierarchical inclusion relationship and visual classification relationship; The twelfth determination module is used to determine the currently executing basic control as the current control; The thirteenth determination module is used to determine the adjacency matching degree between the current control and each other basic control in the basic control set based on the adjacency relationship; The fourteenth determination module is used to determine the target adjacent control among other basic controls based on the adjacent matching degree; The fifteenth determination module is used to determine layout relationship information based on each current control and its corresponding target adjacent control.

[0131] In an optional embodiment, it further includes: The seventh display module is used to display associated drag-and-drop information and associated drag-and-drop controls on the first page; the associated drag-and-drop information is used to prompt whether to simultaneously drag the target adjacent controls of the target control. The sixteenth determining module is used to determine the target insertion position of the target control and the target adjacent control based on pointer position information and first layout information if an associated drag command triggered by an associated drag control is detected; or, if a separate drag command triggered by an associated drag control is detected, determine the target insertion position of the target control based on pointer position information and first layout information.

[0132] The apparatus and method embodiments in this application are based on the same application concept.

[0133] The methods and embodiments provided in this application can be executed on a computer terminal, server, or similar computing device. Taking running on a server as an example, Figure 7 This is a hardware structure block diagram of a server for a target control control method for a menu sidebar provided in an embodiment of this application. For example... Figure 7 As shown, the server 700 can vary significantly due to different configurations or performance. It may include one or more Central Processing Units (CPUs) 710 (CPUs 710 may include, but are not limited to, microprocessors (MCUs) or programmable logic devices (FPGAs), a memory 730 for storing data, and one or more storage media 720 (e.g., one or more mass storage devices) for storing application programs 723 or data 722. The memory 730 and storage media 720 may be temporary or persistent storage. The program stored in the storage media 720 may include one or more modules, each module may include a series of instruction operations on the server. Furthermore, the CPU 710 may be configured to communicate with the storage media 720 and execute the series of instruction operations stored in the storage media 720 on the server 700. Server 700 may also include one or more power supplies 760, one or more wired or wireless network interfaces 750, one or more input / output interfaces 740, and / or one or more operating systems 721, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0134] The input / output interface 740 can be used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of server 700. In one example, the input / output interface 740 includes a network interface controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the input / output interface 740 may be a radio frequency (RF) module used for wireless communication with the Internet.

[0135] Those skilled in the art will understand that Figure 7 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, server 700 may also include... Figure 7 The more or fewer components shown, or having the same Figure 7 The different configurations shown.

[0136] This application provides an electronic device, which includes a processor and a memory. The memory stores at least one instruction, at least one program, code set, or instruction set. The processor loads and executes the at least one instruction, at least one program, code set, or instruction set to implement the above-described data processing method.

[0137] Embodiments of this application also provide a computer-readable storage medium, which can be disposed in a server to store at least one instruction, at least one program, code set, or instruction set related to implementing a target control control method for a menu sidebar in the method embodiment. The at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by the processor to implement the aforementioned target control control method for the menu sidebar.

[0138] Optionally, in this embodiment, the storage medium may be located at at least one of the multiple network servers in a computer network. Optionally, in this embodiment, the storage medium may include, but is not limited to, various media capable of storing program code, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0139] As can be seen from the embodiments of the target control method, device, electronic device or storage medium for the menu sidebar provided in this application, in the running state, multiple first controls are displayed on the first page of the preset container; the multiple first controls are arranged according to first layout information; if a first state switching instruction triggered by an editing control on the first page is detected, the state switches from running to editing; if a movement instruction triggered by a drag operation on a target control among the multiple first controls is detected, the pointer position information of the mouse pointer is obtained; the target insertion position of the target control is determined based on the pointer position information and the first layout information; if the pointer position information indicates that the mouse pointer is located in the page turning control area of ​​the preset container, multiple second controls are displayed on the second page of the preset container; the multiple second controls are arranged according to second layout information; the target insertion position is updated based on the pointer position information and the second layout information; if a placement instruction triggered by a release operation on the target control is detected, third layout information is determined based on the target insertion position; the target control and multiple second controls are displayed on the second page according to the third layout information. In this embodiment, users can enter the editing state through the editing control, freely adjust the order of the controls by dragging and dropping them, and drag the controls to other pages. Users can place frequently used function controls on the homepage to reduce page turning operations and improve operation efficiency. By setting separate editing and running states, dual-state data isolation ensures that the editing process does not interfere with the running state functions.

[0140] It should be noted that the order of the embodiments described above is merely for descriptive purposes and does not represent the superiority or inferiority of the embodiments. Furthermore, specific embodiments have been described above. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps described in the claims can be performed in a different order than that shown in the embodiments and still achieve the desired result. Additionally, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired result. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0141] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0142] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0143] The above description is only a preferred embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for controlling a target control in a menu sidebar, characterized in that, include: In the running state, multiple first controls are displayed on the first page of the preset container; The plurality of first controls are arranged according to first layout information; If a first state switching instruction triggered by an editing control on the first page is detected, the state is switched from the running state to the editing state. If a movement command triggered by a drag operation on a target control among the plurality of first controls is detected, the pointer position information of the mouse pointer is obtained; The target insertion position of the target control is determined based on the pointer position information and the first layout information; If the pointer position information indicates that the mouse pointer is located in the page-turning control area of ​​the preset container, multiple second controls are displayed on the second page of the preset container; the multiple second controls are arranged according to the second layout information; The target insertion position is updated based on the pointer position information and the second layout information; If a placement instruction triggered by a release operation on the target control is detected, third layout information is determined based on the target insertion position; The target control and the plurality of second controls are displayed on the second page using the third layout information.

2. The target control control method for a menu sidebar according to claim 1, characterized in that, If a movement command triggered by a drag operation on a target control among the plurality of first controls is detected, the process of obtaining the mouse pointer position information includes: If a movement command triggered by a drag operation on the target control is detected, a drag ghost image of the target control is generated; Obtain the pointer position information of the mouse pointer; The draggable phantom is displayed on the first page based on the pointer position information; If a placement command triggered by a release operation on the target control is detected, the third layout information is determined based on the target insertion position, including: If a placement command triggered by a release operation on the target control is detected, the dragging phantom is hidden; The third layout information is determined based on the target insertion position.

3. The target control control method for a menu sidebar according to claim 1, characterized in that, After determining the target insertion position of the target control based on the pointer position information and the first layout information, the process includes: If the pointer position information is in the placeholder area of ​​two adjacent first controls or two adjacent second controls, a placeholder control is generated based on the target control; Determine intermediate layout information based on the target insertion position; Based on the intermediate layout information, the placeholder control and the plurality of first controls are displayed on the first page, or the placeholder control and the plurality of second controls are displayed on the second page.

4. The target control control method for a menu sidebar according to claim 1, characterized in that, The method further includes: If a second state switching instruction triggered by an editing control on the first page or the second page is detected, the state switches from the editing state to the running state.

5. The target control control method for a menu sidebar according to claim 4, characterized in that, After detecting a first state switching instruction triggered by an editing control on the first page, and switching from the running state to the editing state, the method further includes: Obtain the boundary range of the preset container; The mouse pointer is restricted to the boundary range; Start the scroll detection timer to periodically obtain the current scroll position; Display scrolling prompt information based on the current scrolling position; After detecting a second state switching instruction triggered by an editing control completed on the first page or the second page, and switching from the editing state to the running state, the method further includes: Remove the restriction on the mouse pointer within the boundary range.

6. The target control control method for a menu sidebar according to claim 1, characterized in that, Determining the target insertion position of the target control based on the pointer position information and the first layout information includes: Displacement information is determined based on the pointer position information; If the displacement information is greater than the preset debouncing threshold, a reference control is determined based on the pointer position information and the first layout information; The target insertion position is determined based on the reference control.

7. The target control control method for a menu sidebar according to claim 1, characterized in that, Before displaying multiple first controls on the first page of the preset container in the running state, the method further includes: Retrieve multiple raw controls and multiple received custom controls; The multiple original controls and the multiple custom controls are merged into a basic control set; the basic control set includes multiple basic controls to be processed. Determine the layout relationship information between the multiple basic controls; Based on the layout relationship information, the plurality of first controls and the plurality of second controls are determined in the basic control set; Based on the layout relationship information, the first layout information of the plurality of first controls and the second layout information of the plurality of second controls are determined.

8. The target control control method for a menu sidebar according to claim 7, characterized in that, Determining the layout relationship information between the multiple basic controls includes: Analyze and obtain the attribute and functional information of multiple basic controls; Based on the attribute information and the functional information, the adjacency relationship between multiple basic controls is determined; the adjacency relationship includes data flow relationship, operation sequence relationship, hierarchical inclusion relationship and visual classification relationship. Execute for each of the aforementioned basic controls: The currently executing basic control is identified as the current control; Based on the adjacency relationship, determine the adjacency matching degree between the current control and each other basic control in the basic control set; Based on the adjacent matching degree, the target adjacent control is determined among the other basic controls; The layout relationship information is determined based on each current control and its corresponding target adjacent control.

9. A method for controlling a target control in a menu sidebar according to claim 8, characterized in that, After obtaining the mouse pointer position information upon detecting a movement command triggered by a drag operation on a target control among the plurality of first controls, the method further includes: The first page displays associated drag-and-drop information and associated drag-and-drop controls; the associated drag-and-drop information is used to prompt whether to simultaneously drag the target adjacent controls of the target control; If an associated drag command triggered by the associated drag control is detected, the target insertion position of the target control and the target adjacent control is determined based on the pointer position information and the first layout information; or, if a separate drag command triggered by the associated drag control is detected, the target insertion position of the target control is determined based on the pointer position information and the first layout information.

10. A target control control device for a menu sidebar, characterized in that, The device includes: A first display module is used to display multiple first controls on a first page of a preset container during operation; the multiple first controls are arranged according to first layout information. The state switching module is used to switch from the running state to the editing state if a first state switching instruction triggered based on the editing control on the first page is detected. The acquisition module is used to acquire the pointer position information of the mouse pointer if a movement command triggered by a drag operation on the target control among the plurality of first controls is detected. The first determining module is used to determine the target insertion position of the target control based on the pointer position information and the first layout information; The second display module is configured to display a plurality of second controls on the second page of the preset container if the pointer position information indicates that the mouse pointer is located in the page-turning control area of ​​the preset container; the plurality of second controls are arranged according to second layout information. The position update module is used to update the target insertion position based on the pointer position information and the second layout information; The second determining module is used to determine third layout information based on the target insertion position if a placement instruction triggered by a release operation on the target control is detected. The third display module is used to display the target control and the plurality of second controls on the second page using the third layout information.

Images