CN106201505A - The display packing of a kind of page and device - Google Patents
The display packing of a kind of page and device Download PDFInfo
- Publication number
- CN106201505A CN106201505A CN201610530494.3A CN201610530494A CN106201505A CN 106201505 A CN106201505 A CN 106201505A CN 201610530494 A CN201610530494 A CN 201610530494A CN 106201505 A CN106201505 A CN 106201505A
- Authority
- CN
- China
- Prior art keywords
- page
- value
- covering layer
- layer
- current display
- 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/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)
- Telephone Function (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present invention provides display packing and the device of a kind of page, for operating the scene of multilamellar layout architecture in browser of mobile terminal, time it can be avoided that the superiors' page is operated, the problem of the content of operation to covered layer, thus improve the viewing experience of user to a certain extent.The display packing of the page of the present invention includes: the value of the Left attribute of current display page position is set to the first preset value, and arranges the height value of current display page to obtain changing the page according to the screen height of mobile terminal；The width arranging covering layer is the 100% of described current display page, the value of the Left attribute of covering layer is 0；And the width arranging ejection layer is the second preset value；Show the described change page, covering layer and ejection layer simultaneously.
Description
Technical field
The present invention relates to computer and software technology field thereof, particularly to display packing and the device of a kind of page.
Background technology
In mobile phone browser, access webpage is through being commonly encountered ejection covering layer, when covering layer inside is realized certain operations
(such as, slide up and down), due to the mechanism of the event bubbling in javascript, when covering layer internal slide to top or the end
The when of portion, the scroll event of covering layer father's container (html layer) can be triggered, cause the page below covering layer to occur sliding
Phenomenon, thus have impact on the viewing experience of user.Container is region during for showing the page, region can be carried out width and
Highly it is configured.
The scheme that sliding problem be appear below below existing solution covering layer is: after ejecting covering layer, first
Utilize the screen height of JavaScript technical limit spacing client, a layer of scroll bar dynamically occurs under amendment covering layer
The height of (such as major part be html this layer of node) so that it is can not roll；Then disappear when covering layer, recover just to be limited
That layer of system height, and the value dynamically arranging this layer of scrollTop returns to the position that is rolled into before.
Above-mentioned this technical scheme is after the height limiting father's container, and the scroll bar of father's container can disappear automatically, but
The page can return to the initialized state of rolling layer, and the page all has not a particle of youngster and rolls, and the when of hiding ejection layer, needs page
Face arranges the state rolled before, and such full page there will be a sudden strain of a muscle alternately, and the phenomenon that the page is beated affects user's body
Test；Therefore prior art is not to stop penetrating of event from basic, still can trigger the touch event of covered layer, simply
It is provided with a fixing screen high, it can not be rolled.
Summary of the invention
In view of this, the present invention provides display packing and the device of a kind of page, for grasping in browser of mobile terminal
Make the scene of multilamellar layout architecture, it is possible to when avoiding the superiors' page is operated, the content of operation to covered layer
Problem, thus improve the viewing experience of user to a certain extent.
For achieving the above object, according to an aspect of the invention, it is provided the display packing of a kind of page.
The display packing of the page of the present invention includes: the value of the Left attribute of current display page position is set to first
Preset value, and according to the screen height of mobile terminal, the height value of current display page is set to obtain changing the page；Screening is set
The width of cap rock is the 100% of described current display page, the value of the Left attribute of covering layer is 0；And ejection layer is set
Width is the second preset value；Show the described change page, covering layer and ejection layer simultaneously.
Alternatively, the described width that covering layer is set be the 100% of described current display page, the Left attribute of covering layer
The step that value is 0 after also include: described covering layer register click event.
Alternatively, also include after the described step simultaneously showing the described change page, covering layer and ejection layer:
There is to close after described click event covering layer and ejection layer, and the value of the left attribute of the described change page is set to 0 with
Recover described current display page.
Alternatively, it is characterised in that described first preset value is the negative of the second preset value.
According to another aspect of the present invention, it is provided that the display device of a kind of page.
The display device of the page of the present invention, including: first arranges module, for by the Left of current display page position
The value of attribute is set to the first preset value, and arranges the height value of current display page to obtain according to the screen height of mobile terminal
To the change page；Second arranges module, and the width being used for arranging covering layer is the 100% of described current display page, covering layer
The value of Left attribute be 0；And the width arranging ejection layer is the second preset value；Display module, described for display simultaneously
The change page, covering layer and ejection layer.
Alternatively, also include Registering modules, for registering click event at described covering layer.
Alternatively, also include that the 3rd arranges module, for closing covering layer and ejection layer after there is described click event,
And the value of the left attribute of the described change page is set to 0 to recover described current display page.
Alternatively, described first preset value is the negative of the second preset value.
According to technical scheme, for operating the scene of multilamellar layout architecture, energy in browser of mobile terminal
When enough avoiding the superiors' page is operated, the problem of the content of operation to covered layer, thus carry to a certain extent
The high viewing experience of user.
Accompanying drawing explanation
Accompanying drawing is used for being more fully understood that the present invention, does not constitute inappropriate limitation of the present invention.Wherein:
Fig. 1 is the schematic diagram of the display packing of a kind of page according to embodiments of the present invention；
Fig. 2 is the schematic diagram of the display device of a kind of page according to embodiments of the present invention.
Detailed description of the invention
Below in conjunction with accompanying drawing, the one exemplary embodiment of the present invention is explained, various including the embodiment of the present invention
Details is to help understanding, it should they are thought the most exemplary.Therefore, those of ordinary skill in the art it should be noted that
Arrive, the embodiments described herein can be made various changes and modifications, without departing from scope and spirit of the present invention.With
Sample, for clarity and conciseness, eliminates the description to known function and structure in description below.
Fig. 1 is the schematic diagram of the display packing of a kind of page according to embodiments of the present invention.As it is shown in figure 1, the present invention is real
The display packing of the page executing example mainly includes steps S10 to S12.
Step S10: the value of the Left attribute of current display page position is set to the first preset value, and according to mobile whole
The screen height of end arranges the height value of current display page to obtain changing the page.Carry out the page in the terminal to show
Time, generally using the screen width of mobile terminal as the width value of display Page Container, thus in this step, by currently displaying
Page location left property value be set to the first preset value (such as-90%), left property value herein is used for arranging current
Display the page left side away from screen away from, i.e. carry out the width of horizontal left 90% using current screen as object of reference current display page
Degree；The height of the front display page is set to the screen height of mobile terminal the most again, thus controls full page and do not roll；
In this step, the first preset value being previously mentioned can according to ejection layer content number be configured, if ejection layer needs aobvious
Show that content is the most, then the first set preset value is larger；If ejection layer display content is fewer, then set
First preset value is the least, therefore when the content of ejection layer is fewer, the first preset value it can also be provided that-80% ,-
70% or-50% etc..
Step S11: the width arranging covering layer is the 100% of described current display page, the Left attribute of covering layer
Value is 0；And the width arranging ejection layer is the second preset value.In this step, the width arranging covering layer is 100%,
The value of left is 0；Wherein, the width of set covering layer sets using the current display page mentioned in step S10 as reference, width
It is set to 100%, the most just covers the content part of current page；Meanwhile, left value is set to 0, will covering layer relative to
Current display page is to left-justify；And the width arranging ejection layer is 90%, i.e. the 90% of the screen width of mobile terminal, use
The 90% screen width region that current display page reserves after horizontal left in filling step S10；And described second preset value
Change along with the change of the first preset value, hereby it is ensured that whole ejection process just with movement after page seamless link, and
And the most laterally roll.Embodiment of the present invention technical scheme adds covering layer, not only lets the user know that and thing has been presented herein below,
The most also optimize visual effect, and by registering click event on covering layer, to control hiding of ejection layer.
Step S12: simultaneously show the described change page, covering layer and ejection layer.After step s 12, when hiding
After layer occurs the click event registered, close covering layer and ejection layer, and the value of the left attribute of the described change page is set
It is set to 0 to recover described current display page.In embodiment of the present invention technical scheme, provide the user a point by covering layer
Hit region to make the covered page return to original position.
Through three above step, by the display page produces the region of scroll bar, it is moved to the left the width of 90%, afterwards
Screen height according to mobile terminal changes the height of the page, eliminates scroll bar, even if thus remove slip covering layer, can not
Full page is made to roll；The width of 90% be available on the right of simultaneously the panel of ejection layer being filled, it is achieved within ejection layer
Roll, due to the height already provided with the covered page, thus also do not interfere with carrying out ejection layer roll inside when
Rolling to next layer of page.
Fig. 2 is the schematic diagram of the display device of a kind of page according to embodiments of the present invention.As in figure 2 it is shown, the present invention is real
The display device 20 of the page executing example mainly includes first arranging module 21, second arranging module 22 and display module 23；The
One arranges module 21 for the value of the Left attribute of current display page position is set to the first preset value, and according to mobile eventually
The screen height of end arranges the height value of current display page to obtain changing the page；Second arranges module 22 for arranging covering
The width of layer is the 100% of described current display page, the value of the Left attribute of covering layer is 0；And the width of ejection layer is set
Degree is the second preset value；Display module 23 shows the described change page, covering layer and ejection layer for simultaneously；Described first
Preset value is the negative of the second preset value.
The display device 20 of the page may also include Registering modules (not shown), for clicking in the registration of above-mentioned covering layer
Event.
The display device 20 of the page may also include the 3rd and arranges module (not shown), for there is described click thing
Close covering layer and ejection layer after part, and the value of the left attribute of the described change page is set to 0 to recover described current aobvious
Show the page.
Technical scheme according to embodiments of the present invention, for operating the field of multilamellar layout architecture in browser of mobile terminal
Scape, it is possible to when avoiding the superiors' page is operated, the problem of the content of operation to covered layer, thus to a certain degree
On improve the viewing experience of user.
Above-mentioned detailed description of the invention, is not intended that limiting the scope of the invention.Those skilled in the art should be bright
White, depend on that design requires and other factors, various amendment, combination, sub-portfolio and replacement can occur.Any
Amendment, equivalent and the improvement etc. made within the spirit and principles in the present invention, should be included in scope
Within.
Claims (8)
1. the display packing of a page, it is characterised in that including:
The value of the Left attribute of current display page position is set to the first preset value, and according to the screen height of mobile terminal
The height value of current display page is set to obtain changing the page；
The width arranging covering layer is the 100% of described current display page, the value of the Left attribute of covering layer is 0；And set
The width putting ejection layer is the second preset value；
Show the described change page, covering layer and ejection layer simultaneously.
Method the most according to claim 1, it is characterised in that the described width arranging covering layer is described currently displaying page
The 100% of face, also include after the step that value is 0 of the Left attribute of covering layer: register click event at described covering layer.
Method the most according to claim 2, it is characterised in that described show simultaneously the described change page, covering layer and
Also include after the step of ejection layer: after there is described click event, close covering layer and ejection layer, and by described change page
The value of the left attribute in face is set to 0 to recover described current display page.
The most according to the method in any one of claims 1 to 3, it is characterised in that described first preset value be second preset
The negative of value.
5. the display device of a page, it is characterised in that including:
First arranges module, for the value of the Left attribute of current display page position being set to the first preset value, and according to
The screen height of mobile terminal arranges the height value of current display page to obtain changing the page；
Second arranges module, and the width being used for arranging covering layer is the 100% of described current display page, the Left of covering layer belongs to
The value of property is 0；And the width arranging ejection layer is the second preset value；
Display module, shows the described change page, covering layer and ejection layer for simultaneously.
Device the most according to claim 5, it is characterised in that also include Registering modules, for registering at described covering layer
Click event.
, for there is described point in device the most according to claim 6, it is characterised in that also include that the 3rd arranges module
Hit and close covering layer and ejection layer after event, and the value of the left attribute of the described change page is set to 0 works as recovering described
The front display page.
8. according to the device according to any one of claim 5 to 7, it is characterised in that described first preset value be second preset
The negative of value.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610530494.3A CN106201505A (en) | 2016-07-07 | 2016-07-07 | The display packing of a kind of page and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610530494.3A CN106201505A (en) | 2016-07-07 | 2016-07-07 | The display packing of a kind of page and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106201505A true CN106201505A (en) | 2016-12-07 |
Family
ID=57472525
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610530494.3A Pending CN106201505A (en) | 2016-07-07 | 2016-07-07 | The display packing of a kind of page and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106201505A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106844749A (en) * | 2017-02-16 | 2017-06-13 | 郑州云海信息技术有限公司 | A kind of page display method and device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103631866A (en) * | 2013-11-01 | 2014-03-12 | 北京奇虎科技有限公司 | Webpage display method and browser |
| CN105677893A (en) * | 2016-02-02 | 2016-06-15 | 深圳市万普拉斯科技有限公司 | Web page display method and device |
-
2016
- 2016-07-07 CN CN201610530494.3A patent/CN106201505A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103631866A (en) * | 2013-11-01 | 2014-03-12 | 北京奇虎科技有限公司 | Webpage display method and browser |
| CN105677893A (en) * | 2016-02-02 | 2016-06-15 | 深圳市万普拉斯科技有限公司 | Web page display method and device |
Non-Patent Citations (1)
| Title |
|---|
| AQ10046810: "禁止滑动-手机端弹出时弹出层的内容滚动，同时禁止body内容滚动-CSDN问答频道", 《HTTPS://ASK.CSDN.NET/QUESTIONS/196544》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106844749A (en) * | 2017-02-16 | 2017-06-13 | 郑州云海信息技术有限公司 | A kind of page display method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104360816B (en) | Screenshotss method and system | |
| US10430068B2 (en) | Method for displaying interface content and user equipment | |
| CA2779030C (en) | List display apparatus | |
| EP3623923A1 (en) | Method and corresponding apparatus for displaying arc menu index | |
| CN103425386B (en) | The method and microblogging client of microblogging display control | |
| CN103150170B (en) | The desktop of a kind of mobile terminal generates and method of operating and corresponding device thereof | |
| CN105593812A (en) | Pan and selection gesture detection | |
| CN104102418A (en) | Method and device for locating target position of input box in mobile terminal browser | |
| CN103197885A (en) | Method for controlling mobile terminal and mobile terminal thereof | |
| CN103543949A (en) | Touch control terminal and control method and system thereof | |
| DE112013006066T5 (en) | Emulate the pressure sensitivity on multi-touch units | |
| CN104461312A (en) | Display control method and electronic equipment | |
| KR20110104620A (en) | Apparatus and method for inputing character in portable terminal | |
| CN105183304A (en) | Navigation menu display method and device based on human-computer interaction | |
| CN104182144A (en) | Mobile terminal interface browsing method and system | |
| CN104978030B (en) | The software and method of display interface of mobile phone are automatically adjusted based on right-hand man | |
| CN106201505A (en) | The display packing of a kind of page and device | |
| CN104077036A (en) | Realization method of pull-down menu design of category navigation | |
| CN105511782A (en) | Game instruction processing method and device | |
| CN104580704B (en) | Method and device for viewing details of short messages | |
| CN104765564B (en) | A kind of screenshot method and device | |
| CN103176726B (en) | Page touch control and terminal | |
| CN104090719B (en) | Mobile terminal is according to the method and system of acceleration knots modification translating displayed content | |
| CN108345390B (en) | Auxiliary input method and device and electronic equipment applying same | |
| CN107844249A (en) | The moving method and device of calendar entries |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into 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: 20161207 |