CN112416347B - Webpage layout method based on grids and dynamic magnetic stickers - Google Patents
Webpage layout method based on grids and dynamic magnetic stickers Download PDFInfo
- Publication number
- CN112416347B CN112416347B CN202011333316.4A CN202011333316A CN112416347B CN 112416347 B CN112416347 B CN 112416347B CN 202011333316 A CN202011333316 A CN 202011333316A CN 112416347 B CN112416347 B CN 112416347B
- Authority
- CN
- China
- Prior art keywords
- tile
- elements
- grid
- webpage
- magnetic paste
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The invention provides a webpage layout method based on grids and dynamic magnetic tiles, which comprises the following steps: acquiring the size of a webpage; loading the structured data in the user space to the webpage according to the size of the webpage; detecting the action of a mouse, and adjusting the positions, sizes and colors of the tile groups and the tile elements according to the preset management rules of the tile groups and the management rules of the tile elements; and saving the adjusted positions, sizes and colors of the tile groups and the tile elements as new structured data, and saving the new structured data to a user space. The invention can solve the problems that various attributes of the webpage elements in the existing webpage are fixed, and the user can not dynamically modify the webpage elements according to specific requirements.
Description
Technical Field
The invention relates to the technical field of webpage layout, in particular to a webpage layout method based on grids and dynamic magnetic patches.
Background
At present, the following common ways for constructing the webpage layout are provided, one of which is a waterfall type layout and is a relatively popular website page layout way. The visual expression is a ragged multi-column layout, and the principle is as follows: the method is characterized in that a plurality of divs with different heights in a page container float orderly at certain intervals, data are loaded at the tail part of the container continuously when a mouse rolls, the data are automatically loaded to vacant positions, and the operation is circulated continuously.
However, whether the waterfall flow layout or the gridding layout has the following disadvantages:
1. the number of columns is fixed, the expansion is not easy, when the size of the browser window changes, only the number of columns can be fixed, and if one column needs to be added, the arrangement of the data blocks is difficult to adjust.
2. The size and position of the elements in the webpage are fixed, and the position of the elements cannot be dynamically modified.
3. The elements in the webpage are arranged one by one according to the sequence and cannot be freely combined according to the requirement.
Disclosure of Invention
The invention aims to provide a webpage layout method based on grids and dynamic tiles. The method and the device solve the problems that various attributes of webpage elements in the existing webpage are fixed, and a user cannot dynamically modify the webpage elements according to specific requirements.
The embodiment of the invention provides a webpage layout method based on grids and dynamic magnetic tiles, which comprises the following steps:
step 1, obtaining the size of a webpage;
step 2, loading the structured data in the user space to the webpage according to the size of the webpage;
step 3, detecting the action of the mouse, and adjusting the positions, sizes and colors of the tile groups and the tile elements according to the preset management rules of the tile groups and the management rules of the tile elements;
and step 4, saving the adjusted positions, sizes and colors of the magnetic paste groups and the magnetic paste elements as new structured data, and saving the new structured data to a user space.
Preferably, the step 2 includes:
judging whether structured data exist in the user space or not;
if the structured data exist, loading the structured data to a webpage;
if no structured data exists, initializing the webpage canvas; wherein the content of the first and second substances,
the initializing the webpage canvas comprises:
creating a default tile group and dividing the default tile group into a title area and a content area;
uniformly dividing the content area into rectangular grids according to the size of the content area;
and initializing and rendering the webpage canvas, rendering the magnetic paste elements of the magnet groups in sequence and adsorbing the magnetic paste elements in the grids, and storing the webpage canvas subjected to initialization and rendering as new structured data.
Preferably, the step 3 includes:
detecting the action of the mouse, and adjusting the position, size and color of the tile group according to the preset management rule of the tile group;
detecting the action of the mouse, and adjusting the position, the size and the color of the tile elements according to the preset management rule of the tile elements.
Preferably, the detecting the mouse action and adjusting the position, size and color of the tile group according to a preset management rule of the tile group includes:
when detecting that the mouse is positioned on the title area of a certain tile group and is pressed down, starting to identify the action of the mouse;
if the mouse key is released within a preset first identification time length, opening a title editing mode;
if the mouse key is continuously clicked twice within a preset first identification time length, opening a tile group size and color editing mode;
if the mouse key is not released within a preset first recognition time length, confirming that the user drags and moves the tile group, and acquiring the current left vertex position of the dragged tile group when the mouse key is released;
when the left vertex position of the tile group is lower than the lower edge of a certain tile group, moving the tile group to the lower part of the tile group;
and when the position of the left vertex of the tile group is lower than the upper edge of a certain tile group, moving the tile group to the upper part of the tile group.
Preferably, the detecting the mouse action and adjusting the position, size and color of the tile element according to a preset management rule of the tile element includes:
when the mouse is detected to be positioned on a certain magnetic patch element and is pressed down, the action of the mouse is identified;
if the mouse key is released within a preset second identification time length, confirming that the user wants to open the webpage content corresponding to the tile element, and executing an action of opening the webpage content corresponding to the tile;
if the mouse key is continuously clicked twice within a preset second identification time length, opening a tile element size and color editing mode;
and if the mouse key is not released within a preset second recognition time length, confirming that the user drags and moves the tile element, and adjusting the position of the tile group according to the position of the left vertex of the dragged tile element at the moment when the mouse key is released.
Preferably, the adjusting the position of the tile element according to the current left vertex position of the dragged tile element when the mouse key is released includes:
according to the left vertex position of the magnetic paste element, comparing the distances between the current left vertex of the magnetic paste element and the left vertices of all grids in the adsorbable area of the magnetic paste element, and absorbing the grids with the shortest distance;
when the magnetic paste elements are dragged and moved and then adsorbed again, if other magnetic paste elements exist in the adsorption grid, a first displacement principle is followed;
and when the left vertex position of the tile element is lower than the lower sides of any other tile elements, establishing a brand-new tile group for the tile element.
Preferably, the first shifting principle includes:
if other tile elements in the grid, namely grid elements and tile elements, are the same in size, the positions of the grid elements and the tile elements are exchanged;
if the grid elements and the tile elements are different in size, the grid tiles need to be shifted to make the grid positions, and a second shifting principle is followed.
Preferably, the second shifting principle includes:
if the tile element P moves from the left side to the grid position of the grid element M, and no other tile elements block the right side of the grid element M, the grid element M moves rightwards, and the grid position is given to the tile element P;
if the tile element P moves from the left side to the grid position of the grid element M, and at this time, the grid element M is blocked by the rest tile elements on the right side of the grid element M, the grid element M moves downward, so that the grid position is given to the tile element P;
if the tile element P moves from the right side to the grid position of the grid element M, and at the moment, the left side of the grid element M is not blocked by other tile elements, the grid element M moves leftwards, and the grid position is given to the tile element P;
if the tile element P moves from the right side to the grid position of the grid element M, and the grid element M is blocked by other tile elements on the left side at the moment, the grid element M moves downwards to give the grid position to the tile element P; wherein the content of the first and second substances,
the grid element M may also be considered as an integral grid element formed by a plurality of tile elements, as well as applying to the second shifting principle.
In order to achieve the above object, the present invention further provides a web page layout system based on grids and dynamic tiles, comprising:
the webpage element management module: the system comprises a tile group, a tile element, a link address and a tile name, wherein the tile group is used for creating, editing and deleting the tile group and the tile element, and maintaining the name, the ICON and the link address information of the tile;
a page canvas management module: the webpage canvas is used for managing the webpage canvas and performing creating, editing and deleting operations on the webpage canvas;
a canvas drawing module: the system is used for drawing the canvas of the webpage page, carrying out dragging movement, dynamic adsorption, size adjustment and color adjustment on the tile groups and the tile elements in the canvas, and storing the drawn canvas as structured data;
a page rendering module: for rendering the structured data into a webpage and outputting the webpage onto a display.
Additional features and advantages of the invention will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. The objectives and other advantages of the invention will be realized and attained by the structure particularly pointed out in the written description and claims hereof as well as the appended drawings.
The technical solution of the present invention is further described in detail by the accompanying drawings and embodiments.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention and not to limit the invention. In the drawings:
fig. 1 is a flowchart of a web page layout method based on a grid and dynamic tiles in an embodiment of the present invention.
Detailed Description
The preferred embodiments of the present invention will be described in conjunction with the accompanying drawings, and it will be understood that they are described herein for the purpose of illustration and explanation and not limitation.
The embodiment of the invention provides a webpage layout method based on grids and dynamic magnetic tiles, as shown in figure 1, comprising the following steps:
s100, acquiring the size of a webpage;
s101, loading structured data in a user space to a webpage according to the size of the webpage;
step S102, detecting the action of the mouse, and adjusting the positions, sizes and colors of the tile groups and the tile elements according to the preset management rules of the tile groups and the management rules of the tile elements;
step S103, saving the adjusted positions, sizes and colors of the tile groups and the tile elements as new structured data, and saving the new structured data to a user space.
For example, after a user logs in a web page, the system may first obtain a size of the web page through the browser, where the size includes a resolution of the web page and a scaling size of the web page, and after obtaining the size of the web page, the system may load the structured data stored in the user space onto the web page according to a preset loading rule based on the size of the web page. And then monitoring the action of the mouse of the user at any time, and when the action of the mouse of the user meets a certain condition, changing the layout of the tile groups and the tile elements on the webpage according to the management rules of the tile groups and the management rules of the tile elements preset in the system, wherein the layout specifically comprises editing and adjusting the positions, the sizes, the colors, the creation, the deletion, the naming, the linking, the association, the icons, the themes, the fonts and the like. The size of each tile element can be adjusted to be m: n at will, wherein m is integral multiple of grid length a, n is integral multiple of grid width b, the color of each tile element can be adjusted to be any value of RGBA (r, g, b, o), wherein r, g and b are any integers between 0 and 255, and o is any value between 0 and 1. And after the adjustment is finished, saving the adjusted webpage layout as new structured data, saving the new structured data to the user space, and replacing the last saved structured data.
The working principle of the technical scheme is as follows: and loading the structured data with the information on the layout aspect of the webpage to the webpage according to the size of the webpage, then detecting the modification of the layout aspect of the webpage by a user, finally storing the modified layout strategy of the webpage as new structured data, and replacing the original structured data in the user space.
The beneficial effects of the above technical scheme are: the method can realize dynamic creation of the tile groups on the webpage according to the size of the webpage in the aspects of the resolution, the scaling and the like, and is suitable for various resolutions. The property adjusting capability of the tile groups and the tile elements on the page is provided, and comprises editing and adjusting aspects of positions, sizes, colors, creation, deletion, naming, links, association, icons, themes, fonts and the like. And simultaneously, updating and saving of new webpage layout strategies are provided.
In a preferred embodiment, the step 2 includes:
judging whether structured data exist in the user space or not;
if the structured data exist, loading the structured data to a webpage;
if no structured data exists, initializing the webpage canvas; wherein the content of the first and second substances,
initializing the webpage canvas comprises:
creating a default tile group and dividing the default tile group into a title area and a content area;
uniformly dividing the content area into rectangular grids according to the size of the content area;
and initializing and rendering the webpage canvas, rendering the magnetic paste elements of the magnet groups in sequence and adsorbing the magnetic paste elements in the grids, and storing the webpage canvas subjected to initialization and rendering as new structured data.
The working principle of the technical scheme is as follows: before loading the structured data in the user space to the webpage, firstly judging whether the structured data exists in the user space or not, and when the user logs in the webpage for the first time, the structured data is not stored in the user space, so that when the structured data is not found, initializing the webpage canvas, including creating a default tile group based on the size of the webpage according to a creation rule preset in a system, dividing the tile group into a title area and a content area, uniformly dividing the content area into a rectangular grid according to the size of the created content display area, performing initialization rendering on the webpage canvas after the division is completed, rendering tile elements of the tile group in sequence and adsorbing the tile elements in the grid, and storing the webpage canvas after the initialization rendering as new structured data.
The beneficial effects of the above technical scheme are: a default layout of the web page is provided for the user. And the dynamic creation and division of the grids are realized according to the size of the content display area, and the method is suitable for display areas with various sizes. The default webpage layout is stored in the user space, and the webpage canvas is initialized again without spending time when the user logs in next time.
In a preferred embodiment, the step 3 includes:
detecting the action of the mouse, and adjusting the position, size and color of the tile group according to the preset management rule of the tile group;
detecting the action of the mouse, and adjusting the position, the size and the color of the tile elements according to the preset management rule of the tile elements.
The working principle of the technical scheme is as follows: the method comprises the steps of monitoring the operation of a user through a mouse in real time, and adjusting the positions, sizes and color attributes of the tile groups and the tile elements according to the action of the user mouse and based on the preset management rules of the tile groups and the tile elements.
The beneficial effects of the above technical scheme are: a method is provided for a user to change the properties of tile groups and tile elements. And detecting the behavior of the user on the change of the webpage layout through mouse actions. The real-time updating of the user personalized strategy is facilitated.
In a preferred embodiment, the detecting the mouse action and adjusting the position, size and color of the tile group according to a preset management rule of the tile group includes:
when detecting that the mouse is positioned on the title area of a certain tile group and is pressed down, starting to identify the action of the mouse;
if the mouse key is released within a preset first identification time length, opening a title editing mode;
if the mouse key is continuously clicked twice within a preset first identification time length, opening a tile group size and color editing mode;
if the mouse key is not released within a preset first recognition time length, confirming that the user drags and moves the tile group, and acquiring the current left vertex position of the dragged tile group when the mouse key is released;
when the left vertex position of the tile group is lower than the lower edge of a certain tile group, moving the tile group to the lower part of the tile group;
and when the left vertex position of the tile group is lower than the upper edge of a certain tile group at the moment, moving the tile group to the upper part of the tile group.
The working principle and the beneficial effects of the technical scheme are as follows: the action of a mouse of a user is detected, the character editing of the title area of the tile group, the editing of the size and the color of the tile group and the movement of the tile group are realized, the arrangement and the combination of the webpage elements are more orderly, and the personalized editing of the tile group by the user according to the requirement is facilitated.
In a preferred embodiment, the detecting the mouse action and adjusting the position, size and color of the tile element according to a preset management rule of the tile element includes:
when the mouse is detected to be positioned on a certain magnetic patch element and is pressed down, the action of the mouse is identified;
if the mouse key is released within a preset second identification time length, confirming that the user wants to open the webpage content corresponding to the tile element, and executing an action of opening the webpage content corresponding to the tile;
if the mouse key is continuously clicked twice within a preset second identification time length, opening a tile element size and color editing mode;
and if the mouse key is not released within a preset second recognition time length, confirming that the user drags and moves the tile element, and adjusting the position of the tile group according to the position of the left vertex of the dragged tile element at the moment when the mouse key is released.
The working principle and the beneficial effects of the technical scheme are as follows: the method has the advantages that the action of a mouse of a user is detected, the size and the color of the tile elements are edited, the positions of the tile elements are moved, the webpage corresponding to the tile elements is opened, the tile elements can be moved from one tile group to another tile group, the arrangement and the combination of the webpage elements are more orderly, and the personalized editing of the tile elements by the user according to the requirements is facilitated.
In a preferred embodiment, the adjusting the position of the tile element according to the current left vertex position of the dragged tile element when the mouse key is released includes:
according to the left vertex position of the magnetic paste element, comparing the distances between the current left vertex of the magnetic paste element and the left vertices of all grids in the adsorbable area of the magnetic paste element, and absorbing the grids with the shortest distance;
when the magnetic paste elements are dragged and moved and then adsorbed again, if other magnetic paste elements exist in the adsorption grid, a first displacement principle is followed;
and when the left vertex position of the tile element is lower than the lower sides of any other tile elements, establishing a brand-new tile group for the tile element.
The working principle and the beneficial effects of the technical scheme are as follows: and detecting the dragging action of a user mouse, selecting the closest grid for adsorption of the tile elements according to the distance relationship between the left vertex position of the tile element driven by the mouse and the left vertex of each grid when the user mouse is released, and creating a brand-new tile group for the tile elements when the left vertex position of the tile element is lower than the lower edges of other optional tile elements. The dragging and adsorbing capacity of the magnetic paste elements is provided, so that the displacement re-adsorption process of the magnetic paste elements is more convenient and effective. A method of creating a completely new set of tiles is provided.
In a preferred embodiment, the first shifting principle comprises:
if other tile elements in the grid, namely grid elements and tile elements, are the same in size, the positions of the grid elements and the tile elements are exchanged;
if the grid elements and the tile elements are different in size, the grid tiles need to be shifted to make the grid positions, and a second shifting principle is followed.
The working principle and the beneficial effects of the technical scheme are as follows: when the magnetic paste element selects one grid for re-adsorption, another magnetic paste element exists in the grid, and if the sizes of the two magnetic paste elements are the same, the positions of the two magnetic paste elements are directly exchanged, so that a more intuitive adsorption rule is provided.
In a preferred embodiment, the second shifting principle includes:
if the tile element P moves from the left side to the grid position of the grid element M, and no other tile elements block the right side of the grid element M, the grid element M moves rightwards, and the grid position is given to the tile element P;
if the tile element P moves from the left side to the grid position of the grid element M, and the rest tile elements block the right side of the grid element M, the grid element M moves downwards to give the grid position to the tile element P;
if the tile element P moves from the right side to the grid position of the grid element M, and at this time, the grid element M does not have the blockage of the rest tile elements on the left side of the grid element M, the grid element M moves to the left, and the grid position is given to the tile element P;
if the tile element P moves from the right side to the grid position of the grid element M, and at this time, the grid element M is blocked by the rest tile elements on the left side of the grid element M, the grid element M moves downward, so that the grid position is given to the tile element P; wherein the content of the first and second substances,
the grid element M may also be considered as an integral grid element formed by a plurality of tile elements, as well as applying to the second shifting principle.
The working principle and the beneficial effects of the technical scheme are as follows: when the paste elements select one grid for re-adsorption, the other paste elements exist in the grid, if the sizes of the two paste elements are different, the moving direction of the elements in the grid is determined according to whether the other paste elements exist in the left-right direction of the elements in the grid to block the displacement of the elements in the grid, and similarly, when the elements in the grid move downwards, the elements in the grid below can also determine the moving direction according to whether the other paste elements exist in the left-right direction to block the displacement of the elements in the grid, so that a brand new moving judgment method is provided. Meanwhile, if the tile elements move across multiple rows, the multiple tile elements that are crossed can be regarded as a whole grid element, and the method is also applicable to the above shift adsorption rules, and the rules of shift adsorption are considered in more detail.
In order to achieve the above object, the present invention further provides a web page layout system based on grids and dynamic tiles, comprising:
the webpage element management module: the system comprises a tile group, a tile element, a link address and a tile name, wherein the tile group is used for creating, editing and deleting the tile group and the tile element, and maintaining the name, the ICON and the link address information of the tile;
a page canvas management module: the webpage canvas is used for managing the webpage canvas and performing creating, editing and deleting operations on the webpage canvas;
a canvas drawing module: the system is used for drawing the canvas of the webpage page, carrying out dragging movement, dynamic adsorption, size adjustment and color adjustment on the tile groups and the tile elements in the canvas, and storing the drawn canvas as structured data;
a page rendering module: for rendering the structured data into a webpage and outputting the webpage onto a display.
The working principle and the beneficial effects of the technical scheme are as follows: the method can realize dynamic creation of the tile groups on the webpage according to the size of the webpage page in the aspects of resolution, scaling and the like, and is suitable for various resolutions. Dynamic adjustment capabilities for attributes of tile groups and tile elements on a page are provided, including editing and adjusting of location, size, color, creation, deletion, naming, linking, association, icons, themes, fonts, and the like. And simultaneously, updating and saving of new webpage layout strategies are provided.
It will be apparent to those skilled in the art that various changes and modifications may be made in the present invention without departing from the spirit and scope of the invention. Thus, if such modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include such modifications and variations.
Claims (3)
1. A webpage layout method based on grids and dynamic magnetic tiles is characterized by comprising the following steps:
step 1, obtaining the size of a webpage;
step 2, loading the structured data in the user space to the webpage according to the size of the webpage;
step 3, detecting the action of the mouse, and adjusting the positions, sizes and colors of the tile groups and the tile elements according to the preset management rules of the tile groups and the management rules of the tile elements;
step 4, saving the adjusted positions, sizes and colors of the magnetic paste groups and the magnetic paste elements as new structured data, and saving the new structured data to a user space;
the step 3 comprises the following steps:
detecting the action of the mouse, and adjusting the position, size and color of the tile group according to the preset management rule of the tile group;
detecting the action of a mouse, and adjusting the position, size and color of the tile elements according to the preset management rule of the tile elements;
the detecting mouse action, and according to the preset magnetic paste element management rule, adjusting the position, size and color of the magnetic paste element, including:
when the mouse is detected to be positioned on a certain magnetic patch element and is pressed down, the action of the mouse is identified;
if the mouse key is released within a preset second identification time length, confirming that the user wants to open the webpage content corresponding to the tile element, and executing an action of opening the webpage content corresponding to the tile;
if the mouse key is continuously clicked twice within a preset second identification time length, opening a tile element size and color editing mode;
if the mouse key is not released within a preset second recognition time length, confirming that the user drags and moves the tile element, and adjusting the position of the tile group according to the position of the left vertex of the dragged tile element at the moment when the mouse key is released;
when the mouse key is released, adjusting the position of the tile element according to the position of the left vertex of the dragged tile element at the moment, including:
according to the left vertex position of the magnetic paste element, comparing the distances between the current left vertex of the magnetic paste element and the left vertices of all grids in the adsorbable area of the magnetic paste element, and absorbing the grids with the shortest distance;
when the magnetic paste elements are dragged and moved and then adsorbed again, if other magnetic paste elements exist in the adsorption grid, a first displacement principle is followed;
when the left vertex position of the tile element is lower than the lower sides of any other tile elements, a brand-new tile group is created for the tile element;
the first shifting principle comprises:
if other tile elements in the grid, namely grid elements and tile elements, are the same in size, the positions of the grid elements and the tile elements are exchanged; wherein the grid element is formed by combining one or more magnetic paste elements;
if the grid elements and the magnetic paste elements are different in size, the grid elements need to be shifted to make the grid positions, and a second shifting principle is followed;
the second shifting principle comprises:
if the magnetic paste elements move to the grid positions of the grid elements from the left side, and at the moment, the right sides of the grid elements are not blocked by other magnetic paste elements, the grid elements move rightwards, and the grid positions are given to the magnetic paste elements;
if the magnetic paste element moves from the left side to the grid position of the grid element, and the other magnetic paste elements block the right side of the grid element, the grid element moves downwards to give the grid position to the magnetic paste element;
if the magnetic paste element moves from the right side to the grid position of the grid element, and the left side of the grid element is not blocked by other magnetic paste elements at the moment, the grid element moves leftwards, and the grid position is given to the magnetic paste element;
and if the magnetic paste elements move from the right side to the grid positions of the grid elements, and at the moment, the left sides of the grid elements are blocked by the other magnetic paste elements, the grid elements move downwards, and the grid positions are given to the magnetic paste elements.
2. The method for web page layout based on grid and dynamic tile according to claim 1, wherein the step 2 comprises:
judging whether structured data exist in the user space or not;
if the structured data exist, loading the structured data to a webpage;
if no structured data exists, initializing the webpage canvas; wherein, the first and the second end of the pipe are connected with each other,
initializing the webpage canvas comprises:
creating a default tile group and dividing the default tile group into a title area and a content area;
uniformly dividing the content area into rectangular grids according to the size of the content area;
and initializing and rendering the webpage canvas, rendering the magnetic paste elements of the magnet groups in sequence and adsorbing the magnetic paste elements in the grids, and storing the webpage canvas subjected to initialization and rendering as new structured data.
3. The method of claim 1, wherein detecting the mouse movement and adjusting the position, size and color of the tile group according to a preset management rule of the tile group comprises:
when detecting that the mouse is positioned on the title area of a certain tile group and is pressed down, starting to identify the action of the mouse;
if the mouse key is released within a preset first identification time length, opening a title editing mode;
if the mouse key is continuously clicked twice within a preset first identification time length, opening a tile group size and color editing mode;
if the mouse key is not released within a preset first recognition time span, confirming that the user drags and moves the tile group, and acquiring the left vertex position of the dragged tile group at the moment when the mouse key is released;
when the left vertex position of the tile group is lower than the lower edge of a certain tile group, moving the tile group to the lower part of the tile group;
and when the position of the left vertex of the tile group is lower than the upper edge of a certain tile group, moving the tile group to the upper part of the tile group.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011333316.4A CN112416347B (en) | 2020-11-25 | 2020-11-25 | Webpage layout method based on grids and dynamic magnetic stickers |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011333316.4A CN112416347B (en) | 2020-11-25 | 2020-11-25 | Webpage layout method based on grids and dynamic magnetic stickers |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112416347A CN112416347A (en) | 2021-02-26 |
| CN112416347B true CN112416347B (en) | 2022-07-12 |
Family
ID=74778018
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011333316.4A Active CN112416347B (en) | 2020-11-25 | 2020-11-25 | Webpage layout method based on grids and dynamic magnetic stickers |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112416347B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113240776B (en) * | 2021-05-24 | 2024-01-02 | 广东好太太智能家居有限公司 | Method, device and storage medium for changing picture color based on canvas |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102929922A (en) * | 2011-09-23 | 2013-02-13 | 微软公司 | Techniques for dynamic layout of presentation tiles on a grid |
| CN105740315A (en) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | Multi-screen response type webpage layout adjustment method |
| CN109343851A (en) * | 2018-09-26 | 2019-02-15 | 中国平安人寿保险股份有限公司 | Page generation method, device, computer equipment and storage medium |
| CN109388396A (en) * | 2018-09-18 | 2019-02-26 | 深圳壹账通智能科技有限公司 | Page generation method, device, computer equipment and storage medium |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101147174B (en) * | 2004-10-15 | 2011-06-08 | 微软公司 | System and method for managing communication and/or storage of image data |
| US7933632B2 (en) * | 2005-09-16 | 2011-04-26 | Microsoft Corporation | Tile space user interface for mobile devices |
| US8972871B2 (en) * | 2013-01-21 | 2015-03-03 | Google Inc. | Supporting user interactions with rendered graphical objects |
| US10452750B2 (en) * | 2015-08-04 | 2019-10-22 | Google Llc | Systems and methods for interactively presenting a visible portion of a rendering surface on a user device |
| US11042340B2 (en) * | 2018-05-06 | 2021-06-22 | Apple Inc. | Generating navigation user interfaces for third-party applications |
-
2020
- 2020-11-25 CN CN202011333316.4A patent/CN112416347B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102929922A (en) * | 2011-09-23 | 2013-02-13 | 微软公司 | Techniques for dynamic layout of presentation tiles on a grid |
| CN105740315A (en) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | Multi-screen response type webpage layout adjustment method |
| CN109388396A (en) * | 2018-09-18 | 2019-02-26 | 深圳壹账通智能科技有限公司 | Page generation method, device, computer equipment and storage medium |
| CN109343851A (en) * | 2018-09-26 | 2019-02-15 | 中国平安人寿保险股份有限公司 | Page generation method, device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112416347A (en) | 2021-02-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11409957B2 (en) | Variable dimension version editing for graphical designs | |
| US8751945B1 (en) | Environment for responsive graphical designs | |
| US5432896A (en) | Watercolor simulation in computer graphics | |
| US9760543B2 (en) | Graphical tile-based layout | |
| US10031900B2 (en) | Range adjustment for text editing | |
| US9946806B2 (en) | Exporting responsive designs from a graphical design tool | |
| CN112416347B (en) | Webpage layout method based on grids and dynamic magnetic stickers | |
| CN103136089A (en) | Method and device for process bar display | |
| CN106162302B (en) | Layout method and device for Launcher main interface and smart television | |
| CN105528217A (en) | Partial refreshing method and device based on display list | |
| CN104571819A (en) | Application program management method and application program management device | |
| CN109086515B (en) | Modeling method for primary equipment drawing information in SSD (solid State drive) of intelligent substation based on SVG (scalable vector graphics) | |
| CN105335154A (en) | Multi-terminal-oriented self-adaptive webpage layout method and device | |
| CN1169044C (en) | Application program group dragging and dropping method in embedded intelligent equipment | |
| CN109522508A (en) | Page authoring method, editing machine construction method, device and electronic equipment | |
| CN105631118A (en) | Programmable logic device graph drawing method and device | |
| CN101436178B (en) | Method and system for typesetting oblique line unit lattice | |
| CN105094629A (en) | Grid-based self-adaptation layout method and system | |
| CN108279962A (en) | A kind of method and device creating visualization data display interface | |
| US9710571B2 (en) | Graphical top-down planning system | |
| CN102402531A (en) | Method and system for processing geographic information symbol | |
| EP3163425B1 (en) | Method for operating a computer system | |
| CN116450119B (en) | Page layout method, page layout system, electronic device and storage medium | |
| JP7145543B1 (en) | Display control program | |
| JP2001306208A (en) | User interface for variable width window bar |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |