Responsive layout-based Web page area directional scaling component system and method

Abstract

The invention discloses a responsive layout-based Web page area directional zooming component system and method. The method comprises the following steps of: automatically identifying and adapting to display scales of different equipment and screen sizes; monitoring a user interface event of a user on a front-end interface in real time; calculating the scaling according to the mouse moving coordinate, notifying the Web page of the new scaling to dynamically adjust the proportion of the area selected by the user, and responding to scaling operation and page layout rendering; when the user releases the mouse, the scaling area keeps the proportion after current real-time scaling, and the page layout proportion is frozen. By monitoring the mouse hovering behavior of the user on the Web page, accurate and directional zooming of the specific area is achieved, the use experience of the user can be improved, the webpage content display effect can be improved, and the method can be suitable for specific webpage design and development scenes.

Description

Technical Field

[0001] The present invention belongs to the field of Web front-end development and design, and specifically relates to a component system and method for directional scaling of a Web page area based on a responsive layout. Background Art

[0002] As the complexity and diversity of Web applications continue to rise, users have put forward more stringent requirements for the smoothness of page interaction and the clarity of information display. In the traditional Web page design framework, facing the challenge of incomplete content display, the strategies generally adopted by the industry include: integrating tooltips to dynamically present hidden information, implementing content wrapping, resetting the display area layout, and introducing scroll bar mechanisms. However, all of the above methods have their drawbacks that cannot be ignored.

[0003] Tooltip: A dynamic display method can be used to display incomplete content. This method has its own limitations: for web browsers, they need to move the mouse to the content to be displayed, which increases the user's operation steps; for developers, it also increases the difficulty and complexity of page development.

[0004] Wrap display: This method is limited by the support of specific components. For some specific web components, it does not support content wrap display when used. If you encounter such a situation, forcing the content to be wrapped is invalid.

[0005] Reset the display area layout: This solution is a typical "treating the symptoms rather than the root cause" solution, which does not solve the real problem. It seems to solve the problem of the current page, but once the content changes, the new content may not completely match the display area.

[0006] Scroll bar mechanism: This solution seems perfect, but in fact, the appearance of the scroll bar will undoubtedly cause some damage to the overall aesthetics of the page. The scroll bar itself will also occupy a certain area of ​​space, and for users with small screens, the browsing experience will be greatly reduced. And in certain scenarios, it may cause visual confusion and operational obstacles.

[0007] Although the above solutions have their own advantages, none of them can fundamentally solve the core demand of users to browse content intuitively. In view of this, it is urgent to explore a technology that can dynamically adjust the display area. This technology aims to achieve seamless expansion and flexible contraction of the target area through a user-friendly operation interface, ensuring the complete presentation of key information while taking into account the display space of other parts of the page.

[0008] Currently, there is a method for scaling a region horizontally or vertically, and its technical principle is to dynamically change the pixel width or height of the region to achieve the purpose of changing the region size. However, when facing a responsive layout web page, its effectiveness is greatly reduced and it is difficult to adapt to the flexible changes in screen size. Summary of the invention

[0009] To solve the above-mentioned deficiencies in the prior art, the present invention innovatively proposes a web page area directional zoom component system and method based on responsive layout. By monitoring the user's mouse hovering behavior on the web page, accurate and directional zooming of a specific area can be achieved. This technology can enhance the user experience, improve the display effect of web page content, and can be applied to specific web page design and development scenarios.

[0010] To achieve the above object, the present invention adopts the following technical solutions:

[0011] A component system for directional zooming of a Web page area based on a responsive layout, the system comprising a responsive layout framework module and a directional zooming component module, the system providing directional zooming of a Web page area based on a responsive layout to a front-end browser user;

[0012] Responsive layout framework module, automatically identifies and adapts to the display ratios of different devices and screen sizes;

[0013] The directional zoom component module is used to establish a directional zoom component embedded in a web page and introduce the zoom component into the web page; the component is combined with the responsive layout framework to provide zoom control and responsive page rendering.

[0014] The responsive layout framework module includes a page building unit and a layout structure unit;

[0015] The page building unit uses the Flexbox layout model to build a responsive web page, providing left and right layouts and horizontal scaling for the scalable area.

[0016] The layout structure unit uses HTML5 and CSS3 methods to construct a web page with a left and right layout; the left area is used as an auxiliary information display area, and the right side is used as the main content display area; the left area constructs a tree component to display hierarchical data.

[0017] The right area is centered on the Table component and is used to display detailed data tables. The default ratio of the left and right areas is set to 3:21, which is used to respond to visual rendering under different screen sizes.

[0018] The directional zoom component module includes: component instance, listener, zoom controller, and responsive rendering engine;

[0019] Component instance, used to build a directional zoom component embedded in a Web page;

[0020] Listener, used to listen to front-end user interface events and trigger the zoom controller unit and responsive rendering engine unit;

[0021] Zoom controller, which defines user interface elements to provide zoom operations to users, sets zoom parameters, and calculates zoom ratios;

[0022] The responsive rendering engine triggers page re-rendering based on the zoom ratio calculated by the zoom controller and the display environment of the current device to reflect the latest layout changes.

[0023] The user interface events include page resize events, mouse drag and move events, and mouse release events;

[0024] The listener includes a page resize event binding unit, a mouse movement monitoring event binding unit, and a mouse release monitoring event unit;

[0025] Bind the page resize event unit, use JavaScript to bind the resize event listener to the page, dynamically calculate the visible area of ​​the page and the page unit ratio, and respond to page size changes in real time;

[0026] Bind the mouse drag and move event unit, obtain the specific zoom component instance through the component ID, and bind the mouse move event mouse-move-event to it; it is used to start monitoring the mouse movement when the user hovers the mouse over the zoom component and prepares to perform a zoom operation;

[0027] The mouse release event unit is used to monitor the mouse release event after the zoom operation is completed.

[0028] The zoom controller comprises:

[0029] Component scaling range unit, which sets the scaling direction, scaling ratio, and minimum and maximum proportions of the scalable components on the front end of the interface;

[0030] The zoom ratio calculation unit, when capturing a mouse movement event, calculates a new zoom ratio based on the coordinate information of the current mouse position and the page unit ratio; and adjusts the actual display area of ​​the page according to the set ratio limit.

[0031] The responsive rendering engine notifies the web page of the calculated new zoom ratio, dynamically adjusts the proportion of the area selected by the user, and responds to the zoom operation and page layout.

[0032] A component method for directional scaling of a Web page area based on a responsive layout includes the following steps:

[0033] S1. The user sends instructions to the backend system by dragging the mouse left and right on the front-end interface, and the listener monitors the front-end user interface events;

[0034] S2. When the listener detects the mouse dragging and moving event, the zoom controller of the directional zoom component module is triggered to calculate the zoom ratio. The responsive rendering engine notifies the web page of the new zoom ratio and dynamically adjusts the proportion of the user selected area to respond to the zoom operation and page layout.

[0035] S3. End the zoom operation: When the listener detects the user releasing the mouse event, the zoom area maintains the current real-time zoomed proportion, and the page layout proportion is frozen.

[0036] The user selects the zoom component and drags the mouse left or right to achieve horizontal zoom and expansion of the area of ​​interest, including:

[0037] When you drag a component to the right, the area where the component is located expands, and the area on the right shrinks accordingly. When it expands to max-copies, you can no longer drag it.

[0038] When you drag a component to the left, the area where the component is located shrinks and the area on the right expands accordingly. When it shrinks to min-copies, you cannot continue dragging.

[0039] When the browser window size changes or the device resolution changes, the responsive rendering engine automatically recalculates unit-width and unit-height, and adjusts the proportion of each area accordingly, so as to update the page layout in different display environments.

[0040] Compared with the prior art, the present invention has the following beneficial effects and advantages:

[0041] 1. The web page area directional zoom component based on responsive layout proposed in the present invention can dynamically adjust the display ratio of the page area to adapt to changes in content and ensure that important content is always visible. At the same time, the consistency of the page is guaranteed under different devices and resolutions, so that the page is always displayed to the user in the best layout.

[0042] 2. The present invention provides users with unprecedented convenience. With simple and intuitive operations, users can precisely zoom in and out of any designated area, thereby significantly improving the efficiency of page information transmission and the user's browsing experience. The present invention is not only an innovation of the existing Web page interaction mode, but also a profound insight into and positive response to the future development trend of Web applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 It is a schematic diagram of the system construction process of the present invention;

[0044] Figure 2 It is a system structure diagram of the present invention;

[0045] Figure 3 This is an example of regional directional scaling of a Web page based on a responsive layout of the present invention. DETAILED DESCRIPTION

[0046] In order to make the above-mentioned purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation method of the present invention is further described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention, but the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the invention, so the present invention is not limited by the specific implementation disclosed below.

[0047] like Figure 1 As shown in the figure, the steps for building this system include creating a responsive web page, creating a zoom component, introducing the zoom component into the page, and realizing the regional zoom effect by dragging the mouse.

[0048] like Figure 2 As shown, a Web page area directional zoom component system based on responsive layout of the present invention includes:

[0049] 1) Responsive layout framework module: Build a responsive layout framework based on modern CSS layout technologies (such as Flexbox, Grid, etc.), which can automatically identify and adapt to the display requirements of different devices and screen sizes.

[0050] 2) Directional zoom component module: Develop a directional zoom component that can be embedded in a web page. This component is closely integrated with the responsive layout framework and provides functional modules such as a zoom controller and a responsive rendering engine. Among them, the zoom controller: sets the direction, scale and other parameters of the zoom, and provides user interface elements to facilitate user operation. The responsive rendering engine: dynamically adjusts the proportion of the selected area according to the set parameters of the zoom controller and the display environment of the current device to ensure the responsiveness of the zoom operation and the coordination of the page layout.

[0051] The specific implementation steps of the present invention are as follows:

[0052] 1) Responsive layout framework module: Use the Flexbox layout model to build a Web page based on a responsive layout. Taking the left and right layout as an example, it provides a horizontal scaling function for the scalable area.

[0053] Design a left-right layout structure, use HTML5 and CSS3 technology to build a web page with a left-right layout. The left area is used as an auxiliary information display area, and the right area is used as the main content display area.

[0054] The left area contains a tree component. The tree component is used to display hierarchical data. The leaf node information it contains is too long. It is necessary to design a way to dynamically change the area to display the complete information.

[0055] The right area is centered on the Table component and is used to display detailed data tables. The default ratio of the left and right areas is set to 3:21 (this ratio is based on the responsive layout concept of dividing the page into 24 parts) to ensure good visual balance and readability on different screen sizes.

[0056] 2) The component module capable of directional scaling includes: component instance, listener, scaling controller, and responsive rendering engine; component instance is used to establish a directional scaling component embedded in a Web page; listener is used to listen to front-end user interface events and trigger a scaling controller unit and a responsive rendering engine unit; scaling controller defines user interface elements to provide users with scaling operations, sets scaling parameters, and calculates scaling ratios; responsive rendering engine triggers page re-rendering based on the scaling ratio calculated by the scaling controller and the display environment of the current device to reflect the latest layout changes.

[0057] Bind page resize event. In order to respond to page size changes in real time, use JavaScript to bind a resize event listener to the page. Through this event, the page's visible area width (view-width), height (view-height) and page unit width (unit-width) and height (unit-height) can be dynamically calculated to provide basic data support for subsequent zoom operations.

[0058] Set the component scaling range. Set the minimum proportion (min-copies) and maximum proportion (max-copies) for each scalable component to ensure that the component does not exceed the reasonable range during scaling, thereby avoiding layout confusion or content loss.

[0059] Bind mouse move event. Get the specific component instance through the component ID and bind the mouse move event (mouse-move-event) to it. When the user hovers the mouse over the zoom component and prepares to zoom, the system starts to monitor the mouse movement.

[0060] Calculate and apply the scaling ratio. When a mouse move event is captured, the new scaling ratio (rounded up) is calculated based on the coordinate information of the current mouse position (mouse-x, mouse-y) and the page unit ratio (mouse-x / unit-width or mouse-y / unit-height). At the same time, check whether the ratio exceeds the set minimum or maximum ratio limit. If it exceeds, it will automatically adjust to the boundary value to ensure the normal display of the page content.

[0061] Notify the page to render. Notify the web page of the calculated new zoom ratio, triggering the page to re-render to reflect the latest layout changes.

[0062] Release event listener. After the zoom operation is completed, release the mouse movement event listener in time to avoid unnecessary resource usage.

[0063] Introduce a zoom component in the web page. The user moves the mouse to the zoom component, presses the mouse and drags to start the zoom operation.

[0064] A method for directional zooming component of a web page area based on a responsive layout, comprising:

[0065] Step 1: Execute scaling and movement. The user drags the mouse left or right to horizontally scale and expand the scaling component.

[0066] Step 101: When you drag the component to the right, the area where the component is located will expand, and the area on the right will shrink accordingly. When it expands to max-copies, you cannot continue dragging.

[0067] Step 102: When you drag the component to the left, the area where the component is located will shrink, and the area on the right will expand accordingly. When it shrinks to min-copies, you cannot continue dragging.

[0068] Step 2: End the zoom operation: When the user releases the mouse, the zoom area maintains the current zoomed proportion, and the page layout is updated.

[0069] Step 3: Respond to changes in page resolution: When the browser window size changes or the device resolution changes, the component automatically recalculates unit-width and unit-height, and adjusts the proportion of each area accordingly to ensure that the page layout maintains good consistency and usability in different environments.

[0070] The key technical points of the present invention include:

[0071] 1) Responsive layout: Directional zoom component, based on responsive page layout, uses Flexbox model as layout solution. By applying Flexbox technology, the fixed size area originally defined by pixels can be transformed into a scalable elastic area.

[0072] 2) Dynamically respond to page changes: bind the page's resize event. When the browser window size changes, the resize event is triggered, and then a series of functions are executed to dynamically calculate the width and height of the visible area of ​​the current page. These calculation results provide basic data support for subsequent zoom operations, allowing the web page to automatically adjust the layout and element size according to different screen sizes and resolutions to achieve the best display effect.

[0073] 3) Calculate the zoom area ratio: In responsive layout, in order to accurately control the zoom ratio of page elements, it is necessary to perform proportional conversion on the current mouse position or user interaction behavior. Through proportional conversion, the size of the element at the current resolution can be obtained, and then its actual display size can be adjusted through technologies such as CSS or JavaScript.

[0074] 4) Notify the page to render: Once the new scaling ratio is calculated, this information needs to be passed to the web page so that the page can be redrawn according to the new ratio.

[0075] like Figure 3 As shown, it is an example of using the present invention for a user to drag the mouse to zoom in on an area of ​​interest. The user moves the mouse pointer to the zoom component and holds down the left button, at which point the mouse pointer changes to a two-way arrow mode (i.e., draggable). Then move the mouse to the left (right), and the zoom component immediately follows the mouse pointer to translate to the left (right). When the position is appropriate, release the left mouse button, and the zoom component is now located at the current position of the mouse pointer, completing the dragging operation. When the zoom component is translating to the left (right), if it reaches the boundary set by the component (maximum / minimum area), the component will no longer move.

[0076] It should be noted that the present invention is not limited to the embodiments described above. The above specific embodiments are merely illustrative and not restrictive. Without departing from the scope of the present invention and the scope of protection of the claims, a person of ordinary skill in the art may make many forms of specific changes under the guidance of the present invention, which all fall within the scope of protection of the present invention.

Claims

1. A component system for directional scaling of a web page area based on a responsive layout, characterized in that: The system includes a responsive layout framework module and a directional zoom component module, and the system provides front-end browser users with directional zoom of Web page areas based on a responsive layout; Responsive layout framework module, automatically identifies and adapts to the display ratios of different devices and screen sizes; A directional zoom component module is used to establish a directional zoom component embedded in a Web page and introduce the zoom component into the Web page; This component is combined with the responsive layout framework to provide zoom control and responsive page rendering.

2. According to the component system of the responsive layout-based web page area directional scaling according to claim 1, it is characterized in that: The responsive layout framework module includes a page building unit and a layout structure unit; The page building unit uses the Flexbox layout model to build a responsive web page, providing left and right layouts and horizontal scaling for the scalable area. The layout structure unit uses HTML5 and CSS3 methods to construct a web page with a left and right layout; the left area is used as an auxiliary information display area, and the right side is used as the main content display area; the left area constructs a tree component to display hierarchical data.

3. According to the component system of the responsive layout-based web page area directional scaling according to claim 2, it is characterized in that: The right area is centered on the Table component and is used to display detailed data tables. The default ratio of the left and right areas is set to 3:21, which is used to respond to visual rendering under different screen sizes.

4. According to the component system of the responsive layout-based web page area directional scaling according to claim 1, it is characterized in that: The directional zoom component module includes: component instance, listener, zoom controller, and responsive rendering engine; Component instance, used to build a directional zoom component embedded in a Web page; Listener, used to listen to front-end user interface events and trigger the zoom controller unit and responsive rendering engine unit; Zoom controller, which defines user interface elements to provide zoom operations to users, sets zoom parameters, and calculates zoom ratios; The responsive rendering engine triggers page re-rendering based on the zoom ratio calculated by the zoom controller and the display environment of the current device to reflect the latest layout changes.

5. A component system for directional scaling of a Web page area based on a responsive layout according to claim 4, characterized in that: The user interface events include page resize events, mouse drag and move events, and mouse release events; The listener includes a page resize event binding unit, a mouse movement monitoring event binding unit, and a mouse release monitoring event unit; Bind the page resize event unit, use JavaScript to bind the resize event listener to the page, dynamically calculate the visible area of ​​the page and the page unit ratio, and respond to page size changes in real time; Bind the mouse drag and move event unit, obtain the specific zoom component instance through the component ID, and bind the mouse move event mouse-move-event to it; it is used to start monitoring the mouse movement when the user hovers the mouse over the zoom component and prepares to perform a zoom operation; The mouse release event unit is used to monitor the mouse release event after the zoom operation is completed.

6. A component system for directional scaling of a Web page area based on a responsive layout according to claim 4, characterized in that: The zoom controller comprises: Component scaling range unit, which sets the scaling direction, scaling ratio, and minimum and maximum proportions of the scalable components on the front end of the interface; The zoom ratio calculation unit, when capturing a mouse movement event, calculates a new zoom ratio based on the coordinate information of the current mouse position and the page unit ratio; and adjusts the actual display area of ​​the page according to the set ratio limit.

7. A component system for directional scaling of a Web page area based on a responsive layout according to claim 4, characterized in that: The responsive rendering engine notifies the web page of the calculated new zoom ratio, dynamically adjusts the proportion of the area selected by the user, and responds to the zoom operation and page layout.

8. A component method for directional scaling of a Web page area based on a responsive layout, characterized in that: The following steps are involved: S1. The user sends instructions to the backend system by dragging the mouse left and right on the front-end interface, and the listener monitors the front-end user interface events; S2. When the listener detects the mouse dragging and moving event, the zoom controller of the directional zoom component module is triggered to calculate the zoom ratio. The responsive rendering engine notifies the web page of the new zoom ratio and dynamically adjusts the proportion of the user selected area to respond to the zoom operation and page layout. S3. End the zoom operation: When the listener detects the user releasing the mouse event, the zoom area maintains the current real-time zoomed proportion, and the page layout proportion is frozen.

9. A component method for directional scaling of a Web page area based on a responsive layout according to claim 8, characterized in that: The user selects the zoom component and drags the mouse left or right to achieve horizontal zoom and expansion of the area of ​​interest, including: When you drag a component to the right, the area where the component is located expands, and the area on the right shrinks accordingly. When it expands to max-copies, you can no longer drag it. When you drag a component to the left, the area where the component is located shrinks and the area on the right expands accordingly. When it shrinks to min-copies, you cannot continue dragging.

10. A component method for directional scaling of a Web page area based on a responsive layout according to claim 8, characterized in that: When the browser window size changes or the device resolution changes, the responsive rendering engine automatically recalculates unit-width and unit-height, and adjusts the proportion of each area accordingly, so as to update the page layout in different display environments.

Images