A responsive layout method based on absolute positioning in an HTML webpage

Abstract

The application discloses a kind of HTML web page in absolute positioning-based responsive layout method, first browser page loading, obtain the initial coordinate of all elements in current page, and the width and height of element, corresponding ControlType;The information of all elements is initialized as ControlInfo, according to the hierarchical relationship of element, determine its parent, the ControlInfo class of parent element is summarized;After the information initialization of all ControlInfo class, RowInfo calculates the coordinate / width and height of the RowInfo class according to ControlInfo therein;When responsive layout method method is triggered, start calculating the width percentage of each ControlInfo relative to the width of parent ControlInfo;When threshold is touched, each ControlInfo is displayed in line change, and width is recalculated;After the layout information of all ControlInfo is calculated, the Adjuster mapped by each one then starts to adjust the style of actual page element.The application is suitable for the website with absolute layout to realize responsive effect without large reconstruction.

Description

Technical Field

[0001] The present invention relates to the technical field of HTML webpages, and in particular to a responsive layout method based on absolute positioning in HTML webpages. Background Art

[0002] HTML, short for Hypertext Markup Language, is a markup language. It consists of a series of tags that unify the format of documents on the web and connect dispersed Internet resources into a logical whole. HTML text is descriptive text composed of HTML commands, which can describe text, graphics, animations, sounds, tables, links, and more. Hypertext is a method of organizing information by linking text and graphics within a document to other information media through hyperlinks. These linked information media may be within the same document, in other files, or on geographically distant computers. This method of organizing information connects disparate information resources in a random manner, making it easier for people to find and retrieve information.

[0003] Currently, HTML web pages cannot achieve responsiveness on existing websites. Existing pages require significant reconstruction to achieve responsiveness, and absolutely positioned pages cannot achieve responsiveness. Existing responsive frameworks all require their responsiveness technology to be adopted in the initial stages of the project. If the project is already developed, the responsive framework cannot be used. Forcing the use of the framework is almost more labor-intensive than developing a whole new set. Even if the workload of the modification is acceptable, the page presentation effect will be significantly different from the original page effect. Therefore, a responsive layout method based on absolute positioning in HTML web pages is needed. Summary of the Invention

[0004] The purpose of this invention is to provide a responsive layout method based on absolute positioning in HTML web pages.

[0005] The present invention is achieved in that:

[0006] A responsive layout method based on absolute positioning in HTML web pages is implemented as follows: First, when the browser page loads, the initial coordinates of all elements in the current page, as well as the width and height of the elements, and the corresponding ControlType are obtained. Each element has its own preset ControlType to identify its control type. Different ControlTypes will map different Adjusters to distinguish their respective layout behaviors.

[0007] Furthermore, the information of all elements is initialized to ControlInfo, where the ControlInfo class is a class defined by this method, and its main properties include: coordinates; width and height; parent; ControlType; Adjuster and other properties. According to the type of element, it is found whether there is a preset Adjuster. If there is no preset Adjuster, the default BaseAdjuster is used. [The BaseAdjuster class is a class defined by this method, and its main functions include: adjusting the width and height when the element width changes; adjusting the width and height after the line break when the width reaches the minimum scaling ratio and needs to be wrapped; and adjusting the element style after the layout information is calculated.

[0008] Furthermore, according to the hierarchical relationship of the elements, the parent level to which they belong is determined, and the ControlInfo classes with the same parent elements are aggregated;

[0009] Furthermore, after all the ControlInfo class information is initialized, calculate whether their two-dimensional positions in the page have an intersection based on their coordinate / width and height information. If there is an intersection and they belong to the same parent, add these ControlInfo collections to the new RowInfo, where the RowInfo class is a class defined by this method, and its main properties include Cells (the ControlInfo collection contained therein); based on the Cells information, calculate: coordinates; width and height; parent; PrevRow previous row; NextRow next row and other property classes in the Cells field, where Cells is a collection of ControlInfo belonging to the row.

[0010] Furthermore, RowInfo calculates the coordinates / width and height of the RowInfo class based on the ControlInfo therein, and then determines its PrevRow and NextRow based on the calculated coordinate position and the Y-axis coordinate from small to large. Then, a resize event is injected into the page, and the complete callback event of ajaxSetup is set. When the page size changes or the interface is called to modify the page elements, this responsive layout method will be triggered.

[0011] Furthermore, when this responsive layout method is triggered, according to the hierarchy of each ControlInfo [where hierarchy refers to how many parents an element has, if there is no parent, the top layer is 0, and each parent is increased by 1] from low to high, and the Y coordinate from small to large, the percentage of the width of each ControlInfo relative to the width of the parent ControlInfo is calculated, and combined with the minimum scaling ratio of each type of ControlInfo, the minimum width threshold of its RowInfo under the current page width is determined.

[0012] Furthermore, when the threshold is reached, each ControlInfo is displayed in a new line and the width is recalculated. When the height or Y coordinate of the child ControlInfo changes, the event is triggered by bubbling upwards, so that the height of the parent ControlInfo is also increased, and the Y coordinate of the NextRow of the parent RowInfo is shifted downward by the corresponding size.

[0013] Furthermore, when all ControlInfo layout information is calculated, the respective mapped Adjusters begin to adjust the styles of their actual page elements and re-render the layout and style.

[0014] Furthermore, when all styles are rendered, the total height of the regenerated page elements is obtained, and then the height of the page is reset. At this point, the page layout adjustment is completed.

[0015] Furthermore, a computer-readable storage medium stores a computer program, which implements any of the above methods when executed by a main controller.

[0016] Compared with the prior art, the present invention has the following beneficial effects:

[0017] 1. It can automatically identify the coordinates and sizes of elements in HTML pages, and group elements with overlapping horizontal coordinates within a certain error into the same row; and can write separate scaling logic for specific elements, with three modes: proportional scaling, width reduction only, and no scaling. It can also define the minimum scaling ratio of each element and the display effect after scaling and wrapping.

[0018] 2. When the height of a child element increases or the element wraps, the parent element will automatically adjust its height. It can also automatically identify navigation content. When on a small screen, it will automatically shrink into a hamburger navigation while maintaining the original navigation events. When the page is reduced, enlarged, or the screen is rotated, the responsive effect will be automatically triggered to ensure that a set of methods can automatically adapt to the best layout effect on all devices.

[0019] 3. Before the responsive effect is triggered, the new coordinates of each element will be calculated based on the coordinate information, and finally the style of the control will be set to save browser performance overhead. When the page size changes, the width of the element after scaling is calculated. When the ratio with the original width reaches a certain threshold, it will no longer be scaled. In addition, by calculating whether the current page size can accommodate the elements of the row, if it exceeds the page width, the elements of the row will be wrapped and displayed, and the horizontal coordinates / width / height of the elements will be re-rendered.

[0020] 4. After rendering is completed, the vertical coordinates of the next row of elements are adjusted, and then the horizontal coordinates / width / height of the next row are calculated. Unlike the existing mainstream responsive framework, this method does not require the size / coordinates of the elements to be set to relative units. Even absolute positioning can re-layout its width / coordinates. This allows elements to display precise size / coordinate positioning while avoiding the problem that absolutely positioned elements cannot automatically adapt to the current page size.

[0021] 5. This method can achieve responsive effects without adjusting the coordinates / sizes of existing page elements. The responsive effect can be achieved by introducing the file of this method, and it will not have any impact on the original page after removal. It has little impact on the original project changes, is non-invasive, has extremely low coupling, is easy to use, plug and play, and is extremely suitable for websites that already have an absolute layout to achieve responsive effects without major reconstruction. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments. It should be understood that the following drawings only illustrate certain embodiments of the present invention and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other relevant drawings can be obtained based on these drawings without paying any creative work.

[0023] Figure 1 is a flow chart of the method of the present invention;

[0024] Figure 2 It is the initial page diagram of the present invention;

[0025] Figure 3 This is the first page image after the page size is changed without using the absolute positioning layout of the present invention;

[0026] Figure 4 This is a second page diagram after the page size is changed without using absolute positioning layout of the present invention;

[0027] Figure 5 This is the first page image after the absolute positioning layout of the present invention is used;

[0028] Figure 6 This is the second page image after the present invention uses the absolute positioning layout of this method. DETAILED DESCRIPTION

[0029] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention. Therefore, the following detailed description of the embodiments of the present invention provided in the drawings is not intended to limit the scope of the invention for which protection is sought, but merely represents selected embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0030] See also Figure 1 , a responsive layout method based on absolute positioning in HTML web pages, specifically following the steps below:

[0031] In this embodiment, S1: first, the elements on the page generate corresponding 6 ControlInfos, namely p0, p1, c0, c1, c2, and c3;

[0032] S2: p0 element contains c0, c1, so p0 is the parent of c0, c1; p1 element contains c2, c3, so p1 is the parent of c2, c3,

[0033] S3: Since p0 has no other elements intersecting with it in the same level, it is counted as a row by itself and a RowInfo, r0, is generated; since p1 has no other elements intersecting with it in the same level, it is counted as a row by itself and a RowInfo, r1, is generated.

[0034] S4: Since c0 and c1 have an intersection on the Y axis and belong to the same parent p0, c0 and c1 generate a RowInfo, r2; since c3 and c4 have an intersection on the Y axis and belong to the same parent p1, c2 and c3 generate a RowInfo, r3.

[0035] S5: Sort all RowInfos from low to high according to Level, and then sort RowInfos from top to bottom according to their Y coordinate positions, and the resulting RowInfo sorting is as follows: r0, r1, r2, r3.

[0036] S6: Sort the cells in each RowInfo from left to right, so the order of cells in r0 is p0; the order of cells in r1 is p2; the order of cells in r2 is c0, c1; the order of cells in r3 is c2, c3;

[0037] S7: According to the order of RowInfo, first calculate the p0 layout information of Cells in r0.

[0038] S8: Since p0 has no parent, its parent width is set to the browser width of 250px. Since the original width of p0 is 450px, there is no gap on the left and right of p0 to reduce. The logic of scaling p0 is executed and the width of p0 is set to 250px. The layout calculation of p0 is completed and the layout of p1 in the Cells of the next RowInfo r1 is continued.

[0039] S9: Since p1 has no parent, its parent width is taken as the browser width of 250px. Since the original width of p1 is 450px, there is no gap on the left and right of p1 that can be reduced. The logic of scaling p1 is executed, and the width of p1 is set to 250px. The p1 layout calculation is completed, and the layout of c0 and c1 in the cells of the next RowInfo r2 is continued.

[0040] S 10 : The parent of c0 is p0. Since the width of p0 is reduced to 250px, there is no blank gap in the row of c0 and c1 that can be reduced. It can only be scaled, but the scaling has also reached the minimum scaling ratio threshold of 0.618, so it cannot continue to scale. The ControlInfo at the end can only wrap downward, so c1 wraps downward. After the wrap, the width of c0 increases by the extra space after c1 wraps, becoming 250px. At the same time, the proportional scaling effect of the image type is triggered, and the height is also set to 250px; so the Y coordinate of c1 after the wrap needs to be increased by 250px + 10px line spacing = 260px. After c1 wraps, the width is aligned with c0. At the same time, its proportional scaling effect is also triggered, so the width and height of c1 are both changed to 250px.

[0041] S 11 : So far, the total height of r2 has increased by 50px (c0 height increase) + 250px (c1 line break Y coordinate increase) + 50px (c1 height increase) + 10px line spacing = 360px, bubbling upward, the height of its parent p0 also needs to increase by 360px. Since p0 belongs to r0, the next line of r0 is r1, so the Y coordinate of r1 also needs to be translated downward by 360px

[0042] S 12 : Continue with the layout of c2 and c3 in the cells of the next RowInfo r3. The logic is the same as that of the S 10 The same applies to the steps.

[0043] S 13: When all layout information is calculated, start setting the corresponding page element style according to the layout information.

[0044] The foregoing description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Those skilled in the art will readily appreciate that various modifications and variations are possible. Any modifications, equivalent substitutions, or improvements made within the spirit and principles of the present invention are intended to be within the scope of protection of the present invention.

Claims

1. A responsive layout method based on absolute positioning in an HTML web page, characterized in that: Follow these steps: S1: First, when the browser page is loaded, the initial coordinates of all elements in the current page, as well as the width and height of the elements, and the corresponding ControlType are obtained. Each element has its own preset ControlType to identify its control type. Different ControlTypes will map different Adjusters to distinguish their respective layout behaviors. S2: The ControlInfo class is a defined class, including coordinates, width and height, parent, ControlType, and Adjuster properties. The BaseAdjuster class is a defined class, including the width and height adjustment behavior when the element width changes, the line break behavior when the width reaches the minimum scaling ratio, and the width and height adjustment behavior after the line break; After the layout information is calculated, the element style is adjusted. The information of all elements is initialized to ControlInfo, including coordinates, width, height, and parent. Based on the element type, it is checked whether there is a preset Adjuster. If there is no preset Adjuster, the default BaseAdjuster is used. Specifically, the width and height adjustment behavior when the element width changes; S3: According to the hierarchical relationship of the elements, determine the parent to which they belong, and aggregate the ControlInfo classes with the same parent elements; S4: After all ControlInfo class information is initialized, calculate whether their two-dimensional positions in the page have an intersection based on their coordinates / width and height information. If there is an intersection and they belong to the same parent, add these ControlInfo collections to the new RowInfo; S5: RowInfo calculates the coordinates / width and height of the RowInfo according to the ControlInfo, and then determines the PrevRow and NextRow according to the calculated coordinates and Y-axis coordinates from small to large. S6: Inject the resize event into the page and set the complete callback event of ajaxSetup to trigger the responsive layout method when the page size changes or the interface is called to modify the page elements; S7: When the responsive layout method is triggered, the percentage of the width of each ControlInfo relative to the width of the parent ControlInfo is calculated according to the hierarchy of each ControlInfo, from low to high and the Y coordinate from small to large. Combined with the minimum scaling ratio of each type of ControlInfo, the minimum width threshold of its RowInfo under the current page width is determined; S8: When the threshold is reached, each ControlInfo is displayed in a new line and the width is recalculated. When the height or Y coordinate of the child ControlInfo changes, the event is triggered upwards at the same time, so that the height of the parent ControlInfo is also increased, and the Y coordinate of the NextRow of the parent RowInfo is shifted downward by the corresponding amount. S9: After all ControlInfo layout information is calculated, the respective mapped Adjusters begin to adjust the styles of their actual page elements and re-render the layout and style; S10: After all styles are rendered, the total height of the regenerated page elements is obtained, and then the height of the page is reset. At this point, the page layout adjustment is completed.

2. A responsive layout method based on absolute positioning in an HTML webpage according to claim 1, characterized in that: In step S4, the RowInfo class is a defined class including a Cells field, and the Cells are included in the ControlInfo collection therein.

3. The responsive layout method based on absolute positioning in an HTML webpage according to claim 1, characterized in that: In step S7, the level refers to how many parents the element has. If there is no parent, the top level is 0, and each time there is a parent, the level increases by 1.

4. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by the main controller, the method according to any one of claims 1 to 3 is implemented.

Images