CN109542423A - A kind of method and device adjusting mode frame position - Google Patents
A kind of method and device adjusting mode frame position Download PDFInfo
- Publication number
- CN109542423A CN109542423A CN201811407137.3A CN201811407137A CN109542423A CN 109542423 A CN109542423 A CN 109542423A CN 201811407137 A CN201811407137 A CN 201811407137A CN 109542423 A CN109542423 A CN 109542423A
- Authority
- CN
- China
- Prior art keywords
- mode frame
- height
- width
- offset
- page
- 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
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/34—Graphical or visual programming
-
- 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)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
This application discloses a kind of methods for adjusting mode frame position, comprising: judges that active sheet whether there is in mode frame in Bootstrap Table form generating process；If it is determined that active sheet is present in mode frame, preset Tuning function is called to adjust the offset of the mode frame.Disclosed herein as well is a kind of devices for adjusting mode frame position.The method and device of adjustment mode frame position disclosed in the present application, if judging that active sheet is present in mode frame Modal in Bootstrap Table form generating process, preset Tuning function is called to adjust the offset of the mode frame, then so as to automatically adjust the position of mode frame.
Description
Technical field
The present invention relates to page development technology, espespecially a kind of method and device for adjusting mode frame position.
Background technique
It is succinct, intuitive, intrepid that Bootstrap is that Twitter company, the U.S. is developed based on HTML, CSS, JavaScript
Front end Development Framework so that Web exploitation it is more quick.Bootstrap provides graceful HTML and CSS specification, and provides
Bootstrap mode frame plug-in unit Bootstrap Modal and front end table plug-in unit Bootstrap Table.
During page development, mode frame is often used.Mode frame is the child form being covered on parent form.In general,
Mode frame is used to show from the content in an individual source can there is some interactions, example without departing from parent form
Such as child form can provide information, interaction.Mode frame attribute of an element, comprising: when mouse is moved in element, display one
Section ToolTips text.The position that mode frame is shown at present is substantially to be positioned according to the upper left corner of mode frame, Bu Nenggen
It is automatically adjusted according to page actual height and width.
For above-mentioned situation, current most of ways are fixed mode frame height degree and width, then use page height
Mode frame height degree is subtracted, page residual altitude is obtained, using the half of residual altitude as mode frame apart from page tip height, this
Sample makes mode frame height degree placed in the middle, and width is similarly.In actual use, usually dynamic change, mode frame height degree fixation are mode frame
A kind of disagreeableness solution, is not able to satisfy the actual demand of user.
Summary of the invention
It in view of the above technical problems, can basis this application provides a kind of method and device for adjusting mode frame position
The correlation of the page and mode frame automatically adjusts the position of mode frame.
According to the one aspect of the application, the method for adjustment mode frame position is provided, comprising:
Judge that active sheet whether there is in mode frame in Bootstrap Table form generating process；
If it is determined that active sheet is present in mode frame, preset Tuning function is called to adjust the offset of the mode frame
Amount.
Optionally, following operation is packaged in the Tuning function:
The height and width of mode frame are obtained by JavaScript；
The height in hand and available width of the page where obtaining the mode frame by JavaScript；
According to the height and width of the height in hand of the page and available width and the mode frame, the mode is determined
Height offset and width offset when frame is placed in the middle；
By the height offset and width offset be respectively set to the mode frame height offset and width it is inclined
Shifting amount.
Optionally, the height and width of the height in hand and available width according to the page and the mode frame,
Determine the height offset and width offset when the mode frame is placed in the middle, comprising:
The height in hand of the page and the half of the difference of the height of the mode frame is placed in the middle as the mode frame
When height offset；
The available width of the page and the half of the difference of the width of the mode frame is placed in the middle as the mode frame
When width offset.
Optionally, described to judge that active sheet whether there is in mode in Bootstrap Table form generating process
In frame, comprising:
Judge whether active sheet belongs to preset pattern class in Bootstrap Table form generating process, if
Judge that the active sheet belongs to preset pattern class, determines that the active sheet is present in mode frame.
Optionally, the preset Tuning function is previously integrated in the source code of Bootstrap Table plug-in unit.
According to another invention of the application, a kind of device for adjusting mode frame position is additionally provided, comprising:
Judgment module, for judging that active sheet whether there is in mould in Bootstrap Table form generating process
In state frame；
Module is adjusted, for calling preset adjustment letter when judgment module judges that active sheet is present in mode frame
Number adjusts the offset of the mode frame.
Optionally, the Tuning function includes:
Mode frame parameter acquiring unit, for obtaining the height and width of mode frame by JavaScript；
Page parameter acquiring unit, for the page where obtaining the mode frame by JavaScript height in hand and
Available width；
Mode frame shift amount determining unit, for the height in hand and available width and the mode frame according to the page
Height and width, determine the height offset and width offset when the mode frame is placed in the middle；
Mode frame offset setting unit, for the height offset and width offset to be respectively set to the mould
The height offset and width offset of state frame.
Optionally, the mode frame shift amount determining unit is specifically used for:
The height in hand of the page and the half of the difference of the height of the mode frame is placed in the middle as the mode frame
When height offset；
The available width of the page and the half of the difference of the width of the mode frame is placed in the middle as the mode frame
When width offset.
Optionally, the judgment module is specifically used for:
Judge whether active sheet belongs to preset pattern class in Bootstrap Table form generating process, if
Judge that the active sheet belongs to preset pattern class, determines that the active sheet is present in mode frame.
Optionally, described device further include:
Setup module, for integrating the Tuning function in advance in the source code of Bootstrap Table plug-in unit.
The method and device of adjustment mode frame position provided by the embodiments of the present application, by BootstrapTable plug-in unit
Source code in advance integrate mode frame offset Tuning function, and using mode frame plug-in unit Bootstrap Modal develop
When the page, special pattern class is set by the table in source code.In Bootstrap Table form generating process, as long as
Judge that active sheet is present in mode frame, i.e., preset Tuning function is called to adjust the offset of the mode frame automatically, from
And it can be made according to the height in hand and width of the specific page and the position of the height of mode frame and width adjustment mode frame
Mode frame automatic centering meets the page development needs of client.
Other features and advantages of the present invention will be illustrated in the following description, also, partly becomes from specification
It obtains it is clear that understand through the implementation of the invention.The objectives and other advantages of the invention can be by specification, right
Specifically noted structure is achieved and obtained in claim and attached drawing.
Detailed description of the invention
Attached drawing is used to provide to further understand technical solution of the present invention, and constitutes part of specification, with this
The embodiment of application technical solution for explaining the present invention together, does not constitute the limitation to technical solution of the present invention.
Fig. 1 is a kind of method schematic diagram for adjustment mode frame position that the application first embodiment provides；
Fig. 2 is a kind of schematic device for adjustment mode frame position that the application second embodiment provides.
Specific embodiment
To make the objectives, technical solutions, and advantages of the present invention clearer, below in conjunction with attached drawing to the present invention
Embodiment be described in detail.It should be noted that in the absence of conflict, in the embodiment and embodiment in the application
Feature can mutual any combination.
Step shown in the flowchart of the accompanying drawings can be in a computer system such as a set of computer executable instructions
It executes.Also, although logical order is shown in flow charts, and it in some cases, can be to be different from herein suitable
Sequence executes shown or described step.
As shown in Figure 1, the application first embodiment provides a kind of method for adjusting mode frame position, comprising:
Step S02: judge that active sheet whether there is in mode frame in Bootstrap Table form generating process
In；
Step S04: if it is determined that active sheet is present in mode frame, preset Tuning function is called to adjust the mode
The offset of frame.
Embodiment provided by the present application judges whether active sheet is deposited in Bootstrap Table form generating process
It is in mode frame；If it is determined that active sheet is present in mode frame, preset Tuning function is called to adjust the mode frame
Offset judged in Bootstrap Table form generating process using front end table plug-in unit Bootstrap Table
Active sheet whether there is in mode frame Modal, if active sheet is present in mode frame, call preset adjustment letter
Number adjusts the offset of the mode frame, so as to automatically adjust the position of mode frame.
Optionally, following operation is packaged in Tuning function described in the above method:
Step S100: the height and width of mode frame are obtained by JavaScript；
Step S102: the height in hand and available width of the page where obtaining the mode frame by JavaScript；
Step S104: according to the height and width of the height in hand of the page and available width and the mode frame, really
Height offset and width offset when the mode frame is placed in the middle calmly；
Step S106: the height offset and width offset are respectively set to the height offset of the mode frame
And width offset.
Optionally, it in the step S104, specifically includes:
The height in hand of the page and the half of the difference of the height of the mode frame is placed in the middle as the mode frame
When height offset；
The available width of the page and the half of the difference of the width of the mode frame is placed in the middle as the mode frame
When width offset.
For example, the height modal_height and width modal_width of mode frame can be obtained by JavaScript；
The height in hand web_height and width web_ of the page where obtaining the mode frame by JavaScript
width；
Be calculated mode frame it is placed in the middle when height offset offset_height=(web_height-modal_
height)/2；
Width offset offset_width=(web_width-modal_width)/2.
For current mode frame, height offset offset_height and width offset offset_width is set；Then,
Above-mentioned steps are encapsulated as function set_offset ().
Optionally, it in the step S02, specifically includes:
Judge whether active sheet belongs to preset pattern class in Bootstrap Table form generating process, if
Judge that the active sheet belongs to preset pattern class, determines that the active sheet is present in mode frame.
Specifically, special pattern can be set by the table in source code when using the mode frame developing plug page
Class identifies in mode frame that with the presence or absence of table, table is specifically generated by Bootstrap by judging that the pattern class whether there is
Table plug-in unit is completed.Therefore, in Bootstrap Table form generating process if it is determined that the active sheet belong to it is pre-
If pattern class, that is, can determine that the active sheet is present in mode frame.
Optionally, preset Tuning function described in the above method can be previously integrated to Bootstrap Table plug-in unit
Source code in.
For example, JavaScript function Set_offset () can be integrated in the source generation of Bootstrap Table plug-in unit
In code.In this manner it is ensured that all can be according to the height in hand and width of the specific page, Yi Jimo when table Table is generated every time
The height offset and width offset of mode frame is dynamically arranged, so that mode frame be made to occupy automatically in the height and width of state frame
In.
The method of adjustment mode frame position provided by the present application, by the source code of Bootstrap Table plug-in unit
Integrated mode frame offset Tuning function in advance, and when using the mode frame plug-in unit Bootstrap Modal exploitation page, by source
Table in code is set as special pattern class.In Bootstrap Table form generating process, as long as judging active sheet
It is present in mode frame, i.e., calls preset Tuning function to adjust the offset of the mode frame, automatically so as to according to tool
The height in hand and width of the body page and height and the width dynamic of mode frame adjust the position of mode frame, make mode frame certainly
It is dynamic placed in the middle, meet the page development needs of client.
Correspondingly, as shown in Fig. 2, the application second embodiment provides a kind of device for adjusting mode frame position, comprising:
Judgment module 22, for judge in Bootstrap Table form generating process active sheet with the presence or absence of in
In mode frame；
Module 24 is adjusted, for calling preset adjustment when judgment module judges that active sheet is present in mode frame
Function adjusts the offset of the mode frame.
Optionally, the Tuning function may include:
Mode frame parameter acquiring unit, for obtaining the height and width of mode frame by JavaScript；
Page parameter acquiring unit, for the page where obtaining the mode frame by JavaScript height in hand and
Available width；
Mode frame shift amount determining unit, for the height in hand and available width and the mode frame according to the page
Height and width, determine the height offset and width offset when the mode frame is placed in the middle；
Mode frame offset setting unit, for the height offset and width offset to be respectively set to the mould
The height offset and width offset of state frame.
Optionally, the mode frame shift amount determining unit is specifically used for:
The height in hand of the page and the half of the difference of the height of the mode frame is placed in the middle as the mode frame
When height offset；
The available width of the page and the half of the difference of the width of the mode frame is placed in the middle as the mode frame
When width offset.
Optionally, the judgment module is specifically used for:
Judge whether active sheet belongs to preset pattern class in Bootstrap Table form generating process, if
Judge that the active sheet belongs to preset pattern class, determines that the active sheet is present in mode frame.
Optionally, described device further include:
Setup module 20: for integrating the Tuning function in advance in the source code of Bootstrap Table plug-in unit.
The device of adjustment mode frame position provided by the present application, by the source code of Bootstrap Table plug-in unit
Integrated mode frame offset Tuning function in advance, and when using the mode frame plug-in unit Bootstrap Modal exploitation page, by source
Table in code is set as special pattern class.In Bootstrap Table form generating process, as long as judgment module judges
Active sheet is present in mode frame, adjusts the offset that module calls preset Tuning function to adjust the mode frame automatically
Amount, so as to according to the height and width of the height in hand of the specific page and width and mode frame dynamic adjustment mode frame
Position, make mode frame automatic centering, meet the page development needs of client.
It will appreciated by the skilled person that whole or certain steps, system, dress in method disclosed hereinabove
Functional module/unit in setting may be implemented as software, firmware, hardware and its combination appropriate.In hardware embodiment,
Division between the functional module/unit referred in the above description not necessarily corresponds to the division of physical assemblies；For example, one
Physical assemblies can have multiple functions or a function or step and can be executed by several physical assemblies cooperations.Certain groups
Part or all components may be implemented as by processor, such as the software that digital signal processor or microprocessor execute, or by
It is embodied as hardware, or is implemented as integrated circuit, such as specific integrated circuit.Such software can be distributed in computer-readable
On medium, computer-readable medium may include computer storage medium (or non-transitory medium) and communication media (or temporarily
Property medium).As known to a person of ordinary skill in the art, term computer storage medium is included in for storing information (such as
Computer readable instructions, data structure, program module or other data) any method or technique in the volatibility implemented and non-
Volatibility, removable and nonremovable medium.Computer storage medium include but is not limited to RAM, ROM, EEPROM, flash memory or its
His memory technology, CD-ROM, digital versatile disc (DVD) or other optical disc storages, magnetic holder, tape, disk storage or other
Magnetic memory apparatus or any other medium that can be used for storing desired information and can be accessed by a computer.This
Outside, known to a person of ordinary skill in the art to be, communication media generally comprises computer readable instructions, data structure, program mould
Other data in the modulated data signal of block or such as carrier wave or other transmission mechanisms etc, and may include any information
Delivery media.
Claims (10)
1. a kind of method for adjusting mode frame position characterized by comprising
Judge that active sheet whether there is in mode frame in Bootstrap Table form generating process；
If it is determined that active sheet is present in mode frame, preset Tuning function is called to adjust the offset of the mode frame.
2. the method according to claim 1, wherein being packaged with following operation in the Tuning function:
The height and width of mode frame are obtained by JavaScript；
The height in hand and available width of the page where obtaining the mode frame by JavaScript；
According to the height and width of the height in hand of the page and available width and the mode frame, determine that the mode frame occupies
Height offset and width offset when middle；
The height offset and width offset are respectively set to the height offset and width offset of the mode frame.
3. according to the method described in claim 2, it is characterized in that, the height in hand and available width according to the page
With the height and width of the mode frame, height offset and width offset when the mode frame is placed in the middle are determined, comprising:
Using the half of the height in hand of the page and the difference of the height of the mode frame as the mode frame when placed in the middle
Height offset；
Using the half of the available width of the page and the difference of the width of the mode frame as the mode frame when placed in the middle
Width offset.
4. the method according to claim 1, wherein described in Bootstrap Table form generating process
Judge that active sheet whether there is in mode frame, comprising:
Judge whether active sheet belongs to preset pattern class in Bootstrap Table form generating process, if it is determined that
The active sheet belongs to preset pattern class, determines that the active sheet is present in mode frame.
5. the method according to claim 1, wherein the preset Tuning function is previously integrated to
In the source code of Bootstrap Table plug-in unit.
6. a kind of device for adjusting mode frame position characterized by comprising
Judgment module, for judging that active sheet whether there is in mode frame in Bootstrap Table form generating process
In；
Module is adjusted, for calling preset Tuning function tune when judgment module judges that active sheet is present in mode frame
The offset of the whole mode frame.
7. device according to claim 6, which is characterized in that the Tuning function includes:
Mode frame parameter acquiring unit, for obtaining the height and width of mode frame by JavaScript；
Page parameter acquiring unit, for obtaining the height in hand of the mode frame place page by JavaScript and can be used
Width；
Mode frame shift amount determining unit, for according to the height in hand and available width of the page and the height of the mode frame
Degree and width, determine the height offset and width offset when the mode frame is placed in the middle；
Mode frame offset setting unit, for the height offset and width offset to be respectively set to the mode frame
Height offset and width offset.
8. device according to claim 7, which is characterized in that the mode frame shift amount determining unit is specifically used for:
Using the half of the height in hand of the page and the difference of the height of the mode frame as the mode frame when placed in the middle
Height offset；
Using the half of the available width of the page and the difference of the width of the mode frame as the mode frame when placed in the middle
Width offset.
9. device according to claim 6, which is characterized in that the judgment module is specifically used for:
Judge whether active sheet belongs to preset pattern class in Bootstrap Table form generating process, if it is determined that
The active sheet belongs to preset pattern class, determines that the active sheet is present in mode frame.
10. device according to claim 6, which is characterized in that further include:
Setup module, for integrating the Tuning function in advance in the source code of Bootstrap Table plug-in unit.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811407137.3A CN109542423A (en) | 2018-11-23 | 2018-11-23 | A kind of method and device adjusting mode frame position |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811407137.3A CN109542423A (en) | 2018-11-23 | 2018-11-23 | A kind of method and device adjusting mode frame position |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109542423A true CN109542423A (en) | 2019-03-29 |
Family
ID=65850422
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811407137.3A Pending CN109542423A (en) | 2018-11-23 | 2018-11-23 | A kind of method and device adjusting mode frame position |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109542423A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110597583A (en) * | 2019-08-14 | 2019-12-20 | 北京金堤科技有限公司 | Method and device for ceiling of modal frame, storage medium and electronic equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060242557A1 (en) * | 2003-06-03 | 2006-10-26 | Nortis Iii Forbes H | Flexible, dynamic menu-based web-page architecture |
| CN108052365A (en) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | The component generation method and device of user interface |
-
2018
- 2018-11-23 CN CN201811407137.3A patent/CN109542423A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060242557A1 (en) * | 2003-06-03 | 2006-10-26 | Nortis Iii Forbes H | Flexible, dynamic menu-based web-page architecture |
| CN108052365A (en) * | 2017-12-19 | 2018-05-18 | 深圳市四格互联信息技术有限公司 | The component generation method and device of user interface |
Non-Patent Citations (3)
| Title |
|---|
| ALTABA: "bootstrap 模态框（modal）实现水平垂直居中显示 含具体分析", 《CSDN 博客HTTPS://BLOG.CSDN.NET/ALTABA/ARTICLE/DETAILS/54669660》 * |
| XEONYU: "js设置居中", 《CSDN博客 HTTPS://BLOG.CSDN.NET/YUZHIQIANG_1993/ARTICLE/DETAILS/65444235?UTM_SOURCE=BLOGXGWZ4》 * |
| 永远飞翔的心: "模态框居中显示", 《博客园 HTTPS://WWW.CNBLOGS.COM/LCYXFEI/P/7518950.HTML》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110597583A (en) * | 2019-08-14 | 2019-12-20 | 北京金堤科技有限公司 | Method and device for ceiling of modal frame, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10565293B2 (en) | Synchronizing DOM element references | |
| US20160292892A1 (en) | Methods and Devices for Interface Display | |
| CN105824517B (en) | A kind of implementation method and device of desktop | |
| CN106886545B (en) | Page display method, page resource caching method and device | |
| US8984424B2 (en) | Layout of user interface elements | |
| CN111190672A (en) | UI (user interface) adaptation method of electronic equipment, electronic equipment and storage medium | |
| KR20200104899A (en) | Digital component background rendering | |
| CN109542423A (en) | A kind of method and device adjusting mode frame position | |
| CN110888922A (en) | Method and device for creating target table during data synchronization | |
| CN109857964B (en) | Thermodynamic diagram drawing method and device for page operation, storage medium and processor | |
| CN106484424A (en) | A kind of method and system obtaining the control being adapted to screen | |
| CN107148027B (en) | Method and device for solving ZigBee internetwork communication | |
| CN111736825B (en) | Information display method, device, equipment and storage medium | |
| CN110908646B (en) | Building block type callback function block construction method and device, storage medium and processor | |
| CN108920180A (en) | A kind of creation method and server of service orchestration template | |
| CN106293671B (en) | Method and device for generating component template | |
| CN111240678A (en) | Setting method and device of pop-up window, electronic equipment and storage medium | |
| CN112579927A (en) | Method and device for displaying navigation bar | |
| CN112579066A (en) | Chart display method and device, storage medium and equipment | |
| CN110968811A (en) | Display control method and device | |
| CN110989982B (en) | Building block construction method and device with return value function, storage medium and processor | |
| CN108563486B (en) | Cursor control method and device | |
| CN114281463A (en) | Form interface format configuration and interface display method, equipment and medium | |
| CN109324871B (en) | Virtual machine hardware configuration method and system | |
| CN114594945A (en) | Method, device, system, equipment and medium for generating advanced popup selection frame |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190329 |