Element height self-adaption method for WEB page system

Abstract

The invention provides an element height self-adaption method for a WEB page system. The element height self-adaption method comprises the following steps: constructing a self-adaption mode on the basis of a default height mode in a WEB page dragging layout system; defining a monitoring event of an adaptive mode, setting a limiting condition, and adding an animation effect and interaction feedback; self-adaptive mode performance, responsiveness and interactivity are tested; adding a class for controlling the switching between a default height mode and an adaptive mode, and adding a mode switching button; according to the method, the self-adaptive mode is added on the basis of the default height mode in the WEB page dragging layout system, so that different modes can be switched according to the characteristics of element contents, more flexible and powerful element visualization capability is provided, the element contents can be effectively and completely displayed under the condition of the self-adaptive mode, and the user experience is improved. And meanwhile, a user is supported to manually drag and modify the size, so that a more optimized solution is realized.

Description

Technical Field

[0001] The present invention relates to a method for automatically adapting the height of elements, specifically a method for automatically adapting the height of elements in a WEB page system, and belongs to the technical field of WEB page content display. Background Art

[0002] A Web page refers to an interface accessed through an Internet browser. These pages are composed of web page content, including text, pictures, videos, links, etc., and are built using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and scripting languages (such as JavaScript). With the development of Internet technology, Web pages are becoming more dynamic, interactive, and rich in user experience. At the same time, Web pages are gradually developing towards decentralization and supporting new technologies such as WebRTC to provide more secure and efficient network services.

[0003] A WEB page drag-and-drop layout system refers to changing the position and size of elements in a WEB page system by dragging with a mouse, thereby achieving free layout; and the height of an element is an important parameter in Web page design, which determines the space for page layout and content display.

[0004] In existing WEB page drag-and-drop layout systems, a default height is usually given to all elements by default, and then the height is changed by active dragging. For some elements with fixed content and predictable heights, such as line charts, curve charts, pie charts, etc., the default height can be set; however, for some elements with variable content, such as indicator cards, text, etc., the height is determined by the amount of content. In this case, setting a default height will affect the display of content and has the disadvantage of being unable to display the content completely. Therefore, a method for automatically adapting the height of elements in a WEB page system is proposed. Summary of the Invention

[0005] In view of this, the present invention provides a method for automatically adapting the height of elements in a WEB page system to solve or alleviate the technical problems existing in the prior art and at least provide a beneficial alternative.

[0006] The technical solution of the embodiment of the present invention is implemented as follows: A method for automatically adapting the height of elements in a WEB page system includes the following steps:

[0007] S1. Build an adaptive mode on the basis of the default height mode in the WEB page drag-and-drop layout system;

[0008] S2. Define the listening event of the adaptive mode, set the limiting conditions, and add animation effects and interactive feedback;

[0009] S3. Adaptive mode performance, responsiveness, and interactivity testing;

[0010] S4. Add a class to control the switching between the default height mode and the adaptive mode, and add a mode switching button;

[0011] S5. Element mode determination - whether to switch to the adaptive mode. If yes, execute S7; otherwise, execute S6;

[0012] S6. Set the element to the default height;

[0013] S7. Do not set the element height and listen for events;

[0014] S8. When the listened event is triggered, calculate and dynamically set the element height according to the change in the drag position.

[0015] Further preferably, the adaptive mode is constructed using a Bootstrap, Foundation, or Flexbox responsive layout framework.

[0016] Further preferably, the listened event is to use JavaScript to listen for drag events;

[0017] Among them, the drag events include the start of dragging, the process of dragging, and the end of dragging;

[0018] Setting limit conditions includes the maximum and minimum height limits of the element;

[0019] The animation effect is to add a smooth animation effect during the dragging process;

[0020] The interactive feedback is that during the dragging process, the border color change is used to prompt the user about the height status of the current element.

[0021] Further preferably, for the adaptive mode performance testing, it is to conduct frequent dragging tests on the element in the adaptive mode to determine the stability of its performance in the WEB page system;

[0022] The responsiveness and interactivity testing is to conduct dragging tests on the element on different-sized screens to ensure that the layout and element behavior are consistent on different-sized screens.

[0023] Further preferably, in S4, the toggleMode function of the class is called through the mode switching button to switch between the adaptive mode and the default height mode in the WEB page system.

[0024] Further preferably, in S5, according to the content of the element, selectively switch between the adaptive mode and the default height mode, and execute S6 or S7 according to the switching result.

[0025] Further preferably, the default height is 180 - 220px.

[0026] Further preferably, in S7, the height of the current element is determined by the height of the element content.

[0027] Further preferably, in S8, after the monitoring event is triggered, according to the change in the position of the mouse, the height of the element is calculated, and the height of the element is updated in real time according to the calculation result.

[0028] Due to the adoption of the above technical solutions in the embodiments of the present invention, it has the following advantages: By adding an adaptive mode on the basis of the default height mode in the WEB page drag-and-drop layout system, the present invention can switch between different modes according to the characteristics of the element content, thereby providing a more flexible and powerful element visualization ability. In the case of the adaptive mode, the content of the element can be effectively and completely displayed, and at the same time, it also supports the user to manually drag and modify the size, realizing a more optimized solution.

[0029] The above summary is only for the purpose of the specification and is not limited in any way. In addition to the illustrative aspects, embodiments, and features described above, further aspects, embodiments, and features of the present invention will be readily apparent by reference to the drawings and the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required for the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0031] Figure 1 is the step flow chart of the present invention;

[0032] Figure 2 is the operation flow chart of the default height mode and the adaptive mode of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0033] In the following, only some exemplary embodiments are simply described. As those skilled in the art can recognize, the described embodiments can be modified in various different ways without departing from the spirit or scope of the present invention. Therefore, the drawings and the description are considered to be exemplary in nature rather than restrictive.

[0034] It should be noted that terms such as "first", "second", "symmetric", "array", etc. are only used for the purpose of distinguishing descriptions and position descriptions, and cannot be understood as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, those defined with features such as "first", "symmetric", etc. may explicitly or implicitly include one or more such features; similarly, when there is no numerical limitation on certain features in the form of words such as "two", "three", etc., it should be noted that such features also belong to those that explicitly or implicitly include one or more feature quantities.

[0035] The embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0036] Embodiment 1

[0037] As Figure 1 - Figure 2 shown, the embodiment of the present invention provides a method for element height self - adaptation in a WEB page system, including the following steps:

[0038] S1. Build an adaptive mode on the basis of the default height mode in the WEB page drag - and - drop layout system;

[0039] The adaptive mode is built using the Bootstrap responsive layout framework;

[0040] Bootstrap is a popular front - end framework that provides tools and components for rapid development of responsive layouts and web applications. A responsive layout refers to a design that can adjust its appearance and layout according to different devices and screen sizes;

[0041] The adaptive mode is established by combining the grid system and responsive utilities of Bootstrap and using JavaScript to add the function of dragging and adjusting the height of the adaptive mode. The following is a simple example:

[0042]

[0043]

[0044]

[0045] When dragging the slider, the height of the element will change accordingly. In actual applications, the styles and scripts can be adjusted according to requirements.

[0046] S2. Define the listening event of the adaptive mode, set limiting conditions, and add animation effects and interactive feedback;

[0047] The listening event is to use JavaScript to listen for the drag event;

[0048] Among them, the drag event includes the start of dragging, the process of dragging, and the end of dragging;

[0049] Setting limit conditions includes the maximum and minimum height limits of elements;

[0050] The animation effect is to add a smooth animation effect during the dragging process;

[0051] The interactive feedback is that during the dragging process, the height state of the current element is prompted to the user by the change of the border color;

[0052] By using the addEventListener method in JavaScript for drag events, including mousedown, mousemove, and mouseup, which respectively correspond to the actions of mouse press, move, and release, that is, the start of dragging, the process of dragging, and the end of dragging;

[0053] By setting limit conditions to prevent users from dragging elements to unreasonable sizes;

[0054] By setting the animation effect to make the dragging process smoother and improve the user experience;

[0055] By setting interactive feedback to inform the user of the current state through visual feedback.

[0056] S3. Adaptive mode performance, responsiveness, and interactivity testing;

[0057] The adaptive mode performance test is to conduct frequent dragging tests on elements in the adaptive mode to determine the stability of its performance in the WEB page system;

[0058] The responsiveness and interactivity tests are to conduct dragging tests on elements on different-sized screens to ensure that the layout and element behavior are consistent on different-sized screens;

[0059] By testing the adaptive mode and observing and recording the response time and performance of the system to ensure that page elements can quickly and accurately adjust their own heights and ensure the smoothness of user operations;

[0060] By conducting responsiveness and interactivity tests to ensure that the adaptive mode can be applied to screen devices with different sizes and resolutions.

[0061] S4. Add a class to control the switching between the default height mode and the adaptive mode, and add a mode switching button;

[0062] Call the toggleMode function of the class to switch between the adaptive mode and the default height mode in the WEB page system;

[0063] An example code of the toggleMode function of the class is as follows:

[0064]

[0065]

[0066] By calling the toggleMode function, the user can switch between the adaptive mode and the default height mode.

[0067] S5. Element mode judgment - Whether to switch to the adaptive mode. If yes, execute S7; otherwise, execute S6;

[0068] Selectively switch between the adaptive mode and the default height mode according to the content of the element, and execute S6 or S7 according to the switching result;

[0069] Select the adaptive mode and the default height mode according to the characteristics of the element content itself. For example, for elements with fixed content such as line charts, curve charts, and pie charts, the default height mode can be selected, while for elements with unfixed content such as metric cards and texts, the adaptive mode can be used.

[0070] S6. Set the element to the default height;

[0071] S7. Do not set the element height and listen for events;

[0072] The height of the current element is determined by the height of the element content;

[0073] By using the content height of the current element, the height of the element can be determined to prevent the element content from not being fully displayed due to the use of the default fixed height.

[0074] S8. When the listened event is triggered, calculate and dynamically set the element height according to the change of the drag position;

[0075] After the listened event is triggered, calculate the element height according to the change of the mouse position, and update and set the element height in real time according to the calculation result;

[0076] After the listened event is triggered, dynamically calculate the new height of the element according to the position and speed of the mouse, so as to update and set the element height in real time according to the calculation result, so that the height of the element can change according to the change of the mouse position.

[0077] In one embodiment, the default height is 180px.

[0078] Example Two

[0079] The embodiment of the present invention also provides a method for element height adaptation in a WEB page system, including the following steps:

[0080] S1. Build an adaptive mode on the basis of the default height mode in the WEB page drag-and-drop layout system;

[0081] S2. Define the listening event of the adaptive mode, set the limiting conditions, and add animation effects and interactive feedback;

[0082] S3. Test the performance, responsiveness, and interactivity of the adaptive mode;

[0083] S4. Add a class to control the switching between the default height mode and the adaptive mode, and add a mode switching button;

[0084] S5. Element mode judgment - whether to switch to the adaptive mode. If yes, execute S7; otherwise, execute S6;

[0085] S6. Set the element to the default height;

[0086] S7. Do not set the element height and listen for events;

[0087] S8. When the listening event is triggered, calculate and dynamically set the element height according to the change in the drag position.

[0088] In one embodiment, the adaptive mode is built using the Flexbox responsive layout framework;

[0089] Flexbox is a CSS method for layout that provides a more effective way to align and distribute the space of elements within a container, even if their sizes are unknown or dynamic.

[0090] Build a simple example using HTML and JavaScript. The specific example code is as follows:

[0091]

[0092]

[0093]

[0094] When the user presses and moves the mouse, the height of the flex-item will change accordingly. After releasing the mouse, the event listener will be closed to prevent unnecessary operations.

[0095] In one embodiment, the listening event is to use JavaScript to listen for the drag event;

[0096] Among them, the drag events include the start of dragging, the process of dragging, and the end of dragging;

[0097] Setting the limit conditions includes the maximum and minimum height limits of the element;

[0098] The animation effect is to add a smooth animation effect during the dragging process;

[0099] The interactive feedback is that during the dragging process, the height state of the current element is prompted to the user by the change of the border color;

[0100] By using the addEventListener method in JavaScript for drag events, including mousedown, mousemove, and mouseup, which respectively correspond to the actions of mouse press, move, and release, that is, the start of dragging, the process of dragging, and the end of dragging;

[0101] By setting the limit conditions to prevent the user from dragging the element to an unreasonable size;

[0102] By setting the animation effect to make the dragging process smoother and improve the user experience;

[0103] By setting the interactive feedback to inform the user of the current state through visual feedback.

[0104] In one embodiment, the performance test of the adaptive mode is to frequently drag and test the element in the adaptive mode to determine the stability of its performance in the WEB page system;

[0105] The responsiveness and interactivity tests are to drag and test the element on different-sized screens to ensure that the layout and element behavior are consistent on different-sized screens;

[0106] By testing the adaptive mode and observing and recording the response time and performance of the system, to ensure that the page element can quickly and accurately adjust its own height and ensure the smoothness of the user operation;

[0107] By conducting the responsiveness and interactivity tests, to ensure that the adaptive mode can be applied to screen devices with different sizes and resolutions.

[0108] In one embodiment, in S4, the toggleMode function of the class is called through the mode switch button to switch between the adaptive mode and the default height mode in the WEB page system;

[0109] The example code of the toggleMode function of the class is as follows:

[0110]

[0111] By calling the toggleMode function, the user can switch between the adaptive mode and the default height mode.

[0112] In one embodiment, in S5, based on the content of the element, selectively switch between the adaptive mode and the default height mode, and execute S6 or S7 according to the switching result;

[0113] Select the adaptive mode and the default height mode according to the characteristics of the element content itself. For example, for elements with fixed content such as line charts, curve charts, and pie charts, the default height mode can be selected, while for elements with unfixed content such as indicator cards and texts, the adaptive mode can be used.

[0114] In one embodiment, the default height is 220px.

[0115] In one embodiment, in S7, the height of the current element is determined by the height of the element content;

[0116] By utilizing the content height of the current element, determine the height of the element to prevent the element content from not being fully displayed due to the use of the default fixed height.

[0117] In one embodiment, in S8, after the listening event is triggered, calculate the height of the element according to the change in the position of the mouse, and update and set the height of the element in real time according to the calculation result;

[0118] After the listening event is triggered, dynamically calculate the new height of the element according to the position and speed of the mouse, so as to update and set the height of the element in real time according to the calculation result, and make the height of the element change according to the change in the mouse position.

[0119] Embodiment III

[0120] The embodiment of the present invention also provides a method for adapting the height of elements in a WEB page system, including the following steps:

[0121] S1. Build an adaptive mode on the basis of the default height mode in the WEB page drag-and-drop layout system;

[0122] S2. Define the listening event of the adaptive mode, set the limiting conditions, and add animation effects and interactive feedback;

[0123] S3. Test the performance, responsiveness, and interactivity of the adaptive mode;

[0124] S4. Add a class to control the switching between the default height mode and the adaptive mode, and add a mode switching button;

[0125] S5. Element mode judgment - whether to switch to the adaptive mode. If yes, execute S7; otherwise, execute S6;

[0126] S6. Set the element to its default height;

[0127] S7. Do not set the element height and listen for events;

[0128] S8. When the listened event is triggered, calculate and dynamically set the element height according to the change in the drag position.

[0129] The differences from the first and second embodiments are that the adaptive mode is built using the Foundation framework;

[0130] Foundation is a popular front-end framework that provides many responsive design tools, including grid systems, style presets, components, and utilities;

[0131] A simple example of building an adaptive mode using the Foundation framework is as follows:

[0132]

[0133]

[0134] Use the resizable plugin of Foundation to add the function of dragging the height. The resizable plugin allows specifying the drag handle and various event handlers; however, to ensure the example works properly, a valid Foundation environment is required, and it is ensured that all necessary CSS and JavaScript files are correctly loaded.

[0135] In one embodiment, the default height is 200px.

[0136] The above are only the specific embodiments of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of various changes or substitutions, and these should all be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the said claims.

Claims

1. A method for automatically adapting the height of elements in a WEB page system, characterized in that, It includes the following steps: S1. Build an adaptive mode based on the default height mode in the WEB page drag-and-drop layout system; S2. Define the listening events of the adaptive mode, set the limiting conditions, and add animation effects and interactive feedback; S3. Test the performance, responsiveness, and interactivity of the adaptive mode; S4. Add a class to control the switching between the default height mode and the adaptive mode, and add a mode switching button; S5. Element mode judgment - whether to switch to the adaptive mode. If yes, execute S7; otherwise, execute S6; S6. Set the element to the default height; S7. Do not set the element height and listen for events; S8. When the listening event is triggered, calculate and dynamically set the element height according to the change in the drag position.

2. The method for adaptively adjusting the height of elements in a WEB page system according to claim 1, wherein: The adaptive mode is built using a Bootstrap, Foundation, or Flexbox responsive layout framework.

3. The method for adaptively adjusting the height of elements in a WEB page system according to claim 1, wherein: The listening event is to use JavaScript to listen for drag events; Among them, the drag events include the start of dragging, the process of dragging, and the end of dragging; Setting the limiting conditions includes the maximum and minimum height limits of the element; The animation effect is to add a smooth animation effect during the dragging process; The interactive feedback is that during the dragging process, the border color change is used to prompt the user about the current height state of the element.

4. The method for automatically adapting the height of elements in a WEB page system according to claim 1, characterized in that: The performance test of the adaptive mode is to conduct frequent dragging tests on the element in the adaptive mode to determine the stability of its performance in the WEB page system; The responsiveness and interactivity tests are to conduct dragging tests on the element on different-sized screens to ensure that the layout and element behavior are consistent on different-sized screens.

5. The method for automatically adapting the height of elements in a WEB page system according to claim 1, wherein: In S4, the toggleMode function of the class is called through the mode switching button to switch between the adaptive mode and the default height mode in the WEB page system.

6. The method for self - adapting the height of elements in a WEB page system according to claim 1, characterized in that: In S5, a selective switch between the adaptive mode and the default height mode is made according to the content of the element, and S6 or S7 is executed according to the switching result.

7. The method for automatically adapting the height of elements in a WEB page system according to claim 1, characterized in that: The default height is 180 - 220px.

8. The method for self-adapting the height of elements in a WEB page system according to claim 1, characterized in that: In S7, the height of the current element is determined by the height of the element content.

9. The method for self-adapting the element height in the WEB page system according to claim 1, wherein: In S8, when the listening event is triggered, the element height is calculated according to the change in the mouse position, and the height of the element is updated and set in real time according to the calculation result.

Images