CN113485701A - Technical method for dynamically calculating position of dial plate part of instrument - Google Patents
Technical method for dynamically calculating position of dial plate part of instrument Download PDFInfo
- Publication number
- CN113485701A CN113485701A CN202110495151.9A CN202110495151A CN113485701A CN 113485701 A CN113485701 A CN 113485701A CN 202110495151 A CN202110495151 A CN 202110495151A CN 113485701 A CN113485701 A CN 113485701A
- Authority
- CN
- China
- Prior art keywords
- component
- technical method
- grid
- size
- dragged
- 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.)
- Pending
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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a technical method for dynamically calculating the position of an instrument panel component, which relates to the field of WEB front-end development and comprises the following steps: s1, dividing the rows and columns of the webpage, firstly dividing the rows and columns according to the width and the height of the webpage, thereby abstracting the width and the height of the webpage into grids, and placing components in the grids; and S2, setting attributes and endowing the part position parameter and the size parameter. Based on CSS position attributes, the invention almost does not need learning cost for front-end technicians, and simultaneously, various browsers are perfectly compatible with the attributes, so that the front-end technicians can quickly set up own instrument panels and drag and modify the size and position of components in the instrument panels, and only the change of the position of a mouse needs to be monitored when the size of the components is dragged and modified, so that the position attributes of the components can be dynamically changed, and the method is simple, easy to learn, flexible, easy to use, obvious in innovation, capable of effectively improving the coding efficiency of the front-end technicians and beneficial to practical use.
Description
Technical Field
The invention relates to the field of WEB front-end development, in particular to a technical method for dynamically calculating the position of a dial plate part of an instrument.
Background
The front-end development is a process of creating a WEB page or APP and other front-end interfaces and presenting the front-end interfaces to a user, and user interface interaction of an internet product is realized through HTML, CSS and JavaScript and various derived technologies, frames and solutions. The dashboard has the indispensable functions of a plurality of Web applications, the implementation modes of the dashboard are various, the grid layout is one of the important technologies for realizing the functions of the dashboard as the strongest cs layout scheme, the Web pages are divided into grids, different grids can be combined at will, various layouts can be made, and the typesetting of dashboard components can be realized.
Although the grid layout is very powerful, it has many disadvantages, such as that part of old browsers cannot be fully compatible with the grid layout, such as old version IE browsers, and meanwhile, the grid layout parameters in the CSS are many, difficult to understand and high in learning cost, and there is a problem that it is not flexible enough to change the size of the component, and it needs to be improved.
Disclosure of Invention
The invention aims to solve the defects in the prior art and provides a technical method for dynamically calculating the position of an instrument dial part.
In order to achieve the purpose, the invention adopts the following technical scheme: a technical method for dynamically calculating the position of an instrument panel part comprises the following steps:
s1, dividing the rows and columns of the webpage, firstly dividing the rows and columns according to the width and the height of the webpage, thereby abstracting the width and the height of the webpage into grids, and placing components in the grids;
s2, setting attributes, and endowing the position parameter and the size parameter of the component so as to determine the size of the component;
s3, drag processing, wherein when the user changes the size of the component through drag, the operation type is judged according to the drag action of the user, if the operation type is dragged to the outside of the component, the operation type is judged to be amplification operation, and if the operation type is dragged to the inside of the component, the operation type is judged to be zoom operation;
s4, an enlargement operation process, wherein if the user operation type is enlargement operation, the enlargement direction is determined, if the enlargement direction is left, the left operation process is performed, if the enlargement direction is right, the right operation process is performed, if the enlargement direction is up, the upper operation process is performed, and if the enlargement direction is down, the lower operation process is performed;
s5, changing the position of the part, wherein the user changes the position of the part by dragging, when the part is dragged to a blank grid, the blank grid processing is carried out, and when the part is dragged to a grid occupied by other parts, the occupied grid processing is carried out;
and S6, carrying out dragging calculation, monitoring the change condition of the position of the mouse in real time through a monitoring function when the component is dragged, and dynamically calculating the position and the size of the component based on the position of the mouse, thereby dynamically updating the position of the component on the grid according to the dragging position of the mouse.
Further, in S2, the position attribute is a position value of a starting line of the component, and the size attribute is a numerical value of an occupied line size of the component.
Further, in S2, from the position value and the size value of the part, the left value and the top value of the part in the CSS can be calculated, so that the part can be rendered into the real page.
Further, in S4, the left operation process is specifically that when the component is enlarged to the left, the components on the left are sequentially shifted to the left until all the grids on the left are filled up, and when there is no space on the left, the components on the left are sequentially shifted downward, and the right operation process is identical to the left operation process but in the opposite direction.
Further, in S4, the upper operation processing is specifically such that when the component is enlarged upward, the upper component is translated upward, and when the upper grid is full, the component is preferentially shifted in the left-right direction in which the component can accommodate the next size.
Further, in S4, the lower operation process is embodied in that the component below the component continues to translate downward as the component enlarges downward.
Further, in S5, the blank grid processing is specifically that when the component is dragged to the blank grid, the remaining components are not affected, and the component changes position.
Further, in S5, the grid occupation processing is specifically that, when the component is dragged to a grid where other components are located, if the grid where two components are located before can accommodate two components after the next position change, the two components change positions, and if not, the component can only continue to search for the position or drag back to the original position.
Compared with the prior art, the method is based on the CSS position attribute, learning cost is hardly needed for front-end technicians, and meanwhile, various browsers are perfectly compatible with the attribute, so that the front-end technicians can quickly set up own instrument panels and drag and modify the size and the position of components in the instrument panels, the size of the components is dragged and modified by monitoring the change of the position of a mouse, the position attribute of the components is dynamically changed, and the method is simple, easy to learn, flexible, easy to use, obvious in innovation, capable of effectively improving the coding efficiency of the front-end technicians and beneficial to practical use.
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
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.
Fig. 1 is a step diagram of a technical method for dynamically calculating the position of a dial plate component of an instrument according to the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In a first embodiment, referring to fig. 1, the technical method for dynamically calculating the position of the dashboard component includes the following steps:
s1, dividing the rows and columns of the webpage, firstly dividing the rows and columns according to the width and the height of the webpage, thereby abstracting the width and the height of the webpage into grids, and placing components in the grids;
s2, setting attributes, and endowing the position parameter and the size parameter of the component so as to determine the size of the component;
s3, drag processing, wherein when the user changes the size of the component through drag, the operation type is judged according to the drag action of the user, if the operation type is dragged to the outside of the component, the operation type is judged to be amplification operation, and if the operation type is dragged to the inside of the component, the operation type is judged to be zoom operation;
s4, an enlargement operation process, wherein if the user operation type is enlargement operation, the enlargement direction is determined, if the enlargement direction is left, the left operation process is performed, if the enlargement direction is right, the right operation process is performed, if the enlargement direction is up, the upper operation process is performed, and if the enlargement direction is down, the lower operation process is performed;
s5, changing the position of the part, wherein the user changes the position of the part by dragging, when the part is dragged to a blank grid, the blank grid processing is carried out, and when the part is dragged to a grid occupied by other parts, the occupied grid processing is carried out;
and S6, carrying out dragging calculation, monitoring the change condition of the position of the mouse in real time through a monitoring function when the component is dragged, and dynamically calculating the position and the size of the component based on the position of the mouse, thereby dynamically updating the position of the component on the grid according to the dragging position of the mouse.
Preferably, in S2, the position attribute is a position value of a starting line of the component, and the size attribute is a numerical value of an occupied line size of the component.
Preferably, in S2, through the position value and the size value of the part, the left value and the top value of the part in the CSS can be calculated, so that the part can be rendered into a real page.
Preferably, in S4, the left side operation process is that when the component is enlarged to the left, the components on the left side are sequentially translated to the left until all the grids on the left side are filled up, and when there is no space on the left side, the components on the left side are sequentially translated downwards, and the right side operation process is identical to the left side operation process but opposite in direction.
Preferably, in S4, the upper operation process is that when the component is enlarged upward, the upper component is translated upward, and when the upper grid is full, the component is preferentially shifted in the left-right direction in which the component can be accommodated.
Preferably, in S4, the lower operation process is embodied such that the component below the component continues to translate downward as the component enlarges downward.
Preferably, in S5, the blank grid processing is specifically that when the part is dragged to the blank grid, the remaining parts are not affected, and the part changes position.
Preferably, in S5, the grid occupation processing is specifically that, when the component is dragged to the grid where the other component is located, if the grid where two components are located before can accommodate two components after the next position change, the two components change positions, and if not, the component can only continue to search for the position or drag back to the original position.
It can be seen from the above embodiments that, based on the CSS position attribute, the present invention requires almost no learning cost for front-end technicians, and various browsers are perfectly compatible with the attribute, so that the front-end technicians can quickly set up their own dashboard, and can drag and modify the size and position of components in the dashboard, and drag and modify the size of the components by monitoring the change in the mouse position, and dynamically change the position attribute of the components, which is simple, easy to learn, flexible, easy to use, and significantly innovative, effectively improves the coding efficiency of the front-end technicians, and is beneficial to practical use.
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 (8)
1. A technical method for dynamically calculating the position of an instrument dial part is characterized by comprising the following steps:
s1, dividing the rows and columns of the webpage, firstly dividing the rows and columns according to the width and the height of the webpage, thereby abstracting the width and the height of the webpage into grids, and placing components in the grids;
s2, setting attributes, and endowing the position parameter and the size parameter of the component so as to determine the size of the component;
s3, drag processing, wherein when the user changes the size of the component through drag, the operation type is judged according to the drag action of the user, if the operation type is dragged to the outside of the component, the operation type is judged to be amplification operation, and if the operation type is dragged to the inside of the component, the operation type is judged to be zoom operation;
s4, an enlargement operation process, wherein if the user operation type is enlargement operation, the enlargement direction is determined, if the enlargement direction is left, the left operation process is performed, if the enlargement direction is right, the right operation process is performed, if the enlargement direction is up, the upper operation process is performed, and if the enlargement direction is down, the lower operation process is performed;
s5, changing the position of the part, wherein the user changes the position of the part by dragging, when the part is dragged to a blank grid, the blank grid processing is carried out, and when the part is dragged to a grid occupied by other parts, the occupied grid processing is carried out;
and S6, carrying out dragging calculation, monitoring the change condition of the position of the mouse in real time through a monitoring function when the component is dragged, and dynamically calculating the position and the size of the component based on the position of the mouse, thereby dynamically updating the position of the component on the grid according to the dragging position of the mouse.
2. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S2, the position attribute is a position value of a starting line of the component, and the size attribute is a numerical value of a line size occupied by the component.
3. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S2, through the position value and the size value of the part, the left value and the top value of the part in the CSS can be calculated, so that the part can be rendered into a real page.
4. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S4, the left operation process is specifically that when the component is enlarged to the left, the component on the left side is sequentially shifted to the left until all the grids on the left side are filled up, and when there is no space on the left side, the component on the left side is sequentially shifted downwards, and the right operation process is identical to the left operation process but in the opposite direction.
5. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S4, the upper operation processing is specifically such that when the component is enlarged upward, the upper component is translated upward, and when the upper grid is full, the component is preferentially shifted in the left-right direction in which the component can be accommodated.
6. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S4, the lower-side operation processing is embodied such that the component below the component continues to translate downward as the component enlarges downward.
7. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S5, the blank grid processing is specifically that when the part is dragged to the blank grid, the remaining parts are not affected, and the part changes position.
8. The technical method for dynamically calculating the position of an instrument dial plate part according to claim 1, wherein the technical method comprises the following steps: in S5, the grid occupation processing is specifically that, when the component is dragged to a grid where another component is located, if the grid where two components are located before can accommodate two components after the next position change, the two components change positions, and if not, the component can only continue to search for the position or drag back to the original position.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110495151.9A CN113485701A (en) | 2021-05-07 | 2021-05-07 | Technical method for dynamically calculating position of dial plate part of instrument |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110495151.9A CN113485701A (en) | 2021-05-07 | 2021-05-07 | Technical method for dynamically calculating position of dial plate part of instrument |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113485701A true CN113485701A (en) | 2021-10-08 |
Family
ID=77932767
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110495151.9A Pending CN113485701A (en) | 2021-05-07 | 2021-05-07 | Technical method for dynamically calculating position of dial plate part of instrument |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113485701A (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105608084A (en) * | 2014-11-14 | 2016-05-25 | 北大方正集团有限公司 | Regulation method and device of webpage page layout |
| CN112130943A (en) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | Method for self-defining visual layout design |
-
2021
- 2021-05-07 CN CN202110495151.9A patent/CN113485701A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105608084A (en) * | 2014-11-14 | 2016-05-25 | 北大方正集团有限公司 | Regulation method and device of webpage page layout |
| CN112130943A (en) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | Method for self-defining visual layout design |
Non-Patent Citations (1)
| Title |
|---|
| HEY_439: "React-Grid-Layout", pages 1 - 11, Retrieved from the Internet <URL:《https://www.jianshu.com/p/001df1e5772e》> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102663056B (en) | Method and device for displaying picture elements | |
| CN103870558B (en) | Page rendering method and mask layer creating method | |
| CN105677654B (en) | Advertisement filtering method and device | |
| CN107943466B (en) | Database access statement generation method, device and equipment | |
| CN102137306B (en) | Method and device for displaying web content on television | |
| CN106095437A (en) | The implementation method of the layout type of user interface RTL from right to left and device | |
| US9946806B2 (en) | Exporting responsive designs from a graphical design tool | |
| CN103440127A (en) | Software graphical interface drawing method and system | |
| CN109814865B (en) | Mobile application page generation method based on json data format | |
| CN105528217A (en) | Partial refreshing method and device based on display list | |
| CN102841790A (en) | Web application interface dynamic adapting method for heterogeneous terminal | |
| CN103176954A (en) | Mathematical formula display method and mathematical formula display system based on hypertext markup language (HTML) 5 canvas | |
| CN110825382A (en) | Front-end big data tree structure display method | |
| WO2015035319A1 (en) | Method and apparatus of controlling page element | |
| CN113408241A (en) | Text data processing method and device, electronic equipment and readable medium | |
| CN103914555A (en) | Webpage re-layout method and webpage re-layout device | |
| CN107678637A (en) | Method, equipment, browser and the electronic equipment of handoff options card | |
| CN110430472A (en) | Page control method, device and equipment | |
| CN107340886B (en) | Soft keyboard state determination method, device, medium and terminal | |
| CN105739962B (en) | Table cell editing machine control extended method based on HTML and system | |
| CN103150355A (en) | Web page content preview method and device, and equipment | |
| CN103365920A (en) | Method for displaying webpage, browser and mobile terminal | |
| CN110780872B (en) | Element arrangement method, element arrangement device, computer-readable storage medium and computer-readable storage device | |
| CN113485701A (en) | Technical method for dynamically calculating position of dial plate part of instrument | |
| CN107220351A (en) | The page is left white width calculation method, device, storage medium and electronic equipment |
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 |