CN103324476A - Page dynamic reference layout and display method - Google Patents
Page dynamic reference layout and display method Download PDFInfo
- Publication number
- CN103324476A CN103324476A CN2013102159427A CN201310215942A CN103324476A CN 103324476 A CN103324476 A CN 103324476A CN 2013102159427 A CN2013102159427 A CN 2013102159427A CN 201310215942 A CN201310215942 A CN 201310215942A CN 103324476 A CN103324476 A CN 103324476A
- Authority
- CN
- China
- Prior art keywords
- window frame
- laterally
- elements
- page
- height
- 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.)
- Granted
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a dynamic reference layout and display method for a page comprising an element A and an element B. A size relation among the element A, the element B and a window frame is determined to intelligently obtain a corresponding layout method to enable mutual reference and timely movement, locking and unlocking to be performed on the element A and the element B when the page moves in the window frame to achieve that vertical or horizontal effective areas of the element A and the element B maintain synchronization when existing and disappearing in the window frame to finally enable the page to achieve full, attractive and easy-to-use purposes and improve the user experience.
Description
Technical field
The present invention relates to the page, the interface of webpage, software, operating system and various material objects etc., Dynamic Distribution and the exhibiting method of space of a whole page element.
Background technology
Be accompanied by making rapid progress of society; when a page that has contained bulk information often can not all be shown by a window simultaneously; window will provide a kind of and be called the instrument of " scroll bar " to the user; the user can be rolled up and down to be checked; but in this case; a plurality of layout element often can appear because can not be contour or wide; the phenomenon of white space appears thereby can't align when page layout; not only wasted limited window resource; reduced the service efficiency of window; user's experience effect neither be fine; two hurdles about for example a page comprises, and the height on two hurdles is different, in the process of page rolling view; a relatively short hurdle will leave some space to window frame, such as Fig. 1 .1; shown in Fig. 1 .2.In order to solve this difficult problem, the most frequently used is exactly separately control of two hurdles about handle, about two hurdles respectively hold a scroll bar, shown in Fig. 1 .3, but like this, can produce new problem again: the one, bad control when the page has comprised a plurality of scroll bar, the 2nd, the appearance of scroll bar has reduced limited window display area, and the 3rd, affect integrality, the aesthetic property of the page.
Summary of the invention
The present invention provides a kind of dynamic with reference to layout and the method that represents for the page, if the elements A in certain page and element B are because height (or width) can not be reached unification, thereby the layout that causes the page is blank or disappearance, so by judging elements A, element B, size relationship between the window frame three, intelligence draw corresponding layout method, when the page is moved in window frame, elements A and element B are carried out mutual reference, in good time movement, locking, release, reach elements A, vertically (or laterally) of element B keeps synchronously when effective coverage exists with disappearance in its window frame, finally make the page reach complete, attractive in appearance, easy-to-use purpose, improve user's experience, its general layout process please refer to Fig. 2, shown in Figure 3.
For achieving the above object, the invention process adopts following technical scheme:
At first specify one vertical (or laterally) with reference to element B for certain elements A, judgement elements A by intelligence, the relation of the height (or width) of the height of B (or width) and its window frame, carry out corresponding layout method, in theory, elements A, B can specify arbitrarily, but in actual applications, for reaching the validity of intelligent distribution, generally try one's best greater than elements A with reference to the height (or width) of element B, and try one's best greater than the height (or width) of window frame with reference to the height (or width) of element B, elements A, B should have certain contact in the page, such as wanting in showing the process of B all the time display element A, certainly, sometimes during page layout, because the content of element needs dynamic load, so can't predict the height (or width) of each element, major embodiment three kinds of situations below:
One, the height of elements A (or width) is greater than the height (or width) of its window frame, simultaneously vertically (or laterally) is with reference to the height (or width) of the element B height (or width) greater than its window frame, as shown in Figure 4, for this kind situation, corresponding placement scheme is---at first comparison element A with reference to the height (or width) of element B, if the height of elements A (or width) is greater than the height (or width) of reference element B, need first with elements A with exchange with reference to the element of element B representative, carry out again layout method, enter vertically (or laterally) " reference is provided " state in the reference element B after, elements A can be mobile with reference to carrying out in a particular manner vertically (or laterally) in the window frame of element B under it, when the part of effective coverage in its window frame of elements A vertical (or laterally) will reduce, with vertically (or laterally) locking of elements A, until release when eligible;
Two, elements A, B has a side height (or width) greater than the height (or width) of its window frame, the opposing party's height (or width) is less than or equal to the height (or width) of its window frame, to this situation, if with reference to the height (or width) of the element B height (or width) less than or equal to its window frame, so at first will be with elements A, the element of B representative is exchanged, in the process of page movement, if after entering vertically (or laterally) " provide with reference to " state with reference to element B, with vertically (or laterally) locking of elements A, until release when eligible, as shown in Figure 5;
Three, the height of elements A (or width) is less than or equal to the height (or width) of its window frame, simultaneously vertically (or laterally) is with reference to the height (or width) of the element B height (or width) less than or equal to its window frame, as shown in Figure 6, for this kind situation, corresponding placement scheme is---can not carry out layout method.
Judge vertically whether (or laterally) is in " reference is provided " state with reference to element B, method is for when window frame vertical (or laterally) zone is within vertical (or laterally) " reference is provided " zone, be vertical (or laterally) " reference is provided " state with reference to element B, shown in Fig. 7 .1, otherwise be vertical (or laterally) " reference to be supplied " state, such as Fig. 7 .2, shown in Fig. 7 .3, it should be noted that, work as elements A, the height of element B (or width) is during all greater than its window frame height (or width), vertically (or laterally) " reference is provided " zone of this moment is exactly that vertical (or laterally) is with reference to vertically (or the laterally) zone at element B place, as shown in Figure 4, yet work as elements A, element B has a side less than or equal to its window frame height (or width), the opposing party is during greater than its window frame height (or width), vertically specific height (or width) zone is appended again for vertically (or laterally) regional following (or the right) with reference to the element B place in (or laterally) " reference is provided " zone, the computing method of specific height (or width) are---when window frame top margin (or left side) when overlapping with reference to the top margin (or left side) of element B, vertically (or the laterally) coordinate on the base of window frame (or the right) deducts the value of along slope coordinate on the base (or the right) of elements A, this value can be negative, as shown in Figure 5.
Vertically (or laterally) when " provide with reference to " state, provides two parameters with reference to element B: moving direction, displacement, and the parameter that elements A provided with reference to element B with reference to vertically (or laterally) moves, and mainly contains to move synchronously and mobile on year-on-year basis---
Synchronizing moving: if vertically (or laterally) moved the N pixel with reference to element B to certain direction, also equidirectional mobile N pixel simultaneously of elements A so, as shown in Figure 8;
It is mobile on year-on-year basis: if vertically (or horizontal) is with reference to the N% in element B vertical outside certain direction has moved its window frame (or laterally) zone, also N% in its window frame of equidirectional movement outer vertically (or laterally) zone simultaneously of elements A so, the two moving direction is identical, displacement is not necessarily identical, mobile formula is on year-on-year basis: vertically (or horizontal) displacement/element B height (or width) outside its window frame of the height (or width) of vertically (or laterally) displacement/elements A of elements A its window frame outside=element B, mathematical operation by this formula just can draw the distance that elements A should move with reference to element B, form mobile on year-on-year basis mode, as shown in Figure 9.
Locking is that elements A is for its window frame, no matter synchronizing moving or mobile or other move mode on year-on-year basis, if certain justified margin of certain edge of elements A and its window frame, and when the part of effective coverage in its window frame of elements A vertical (or laterally) will reduce, be fixed on elements A vertical (or laterally) in its window frame this moment, until release, for example shown in Fig. 2 .3, Fig. 3 .3.
Release is when elements A locks, remove the locking of itself and its window frame, and it is stayed its residing vertically (or laterally) position during release in the page, unlocking condition has two kinds: the first is elements A when vertical (or laterally) locking, vertically (or laterally) changed corresponding moving direction (namely go up lower a, left side the right side) with reference to element B; The second is that vertically (or horizontal) converted " reference to be supplied " state to reference to element B.
Description of drawings
For the method for the technology of the present invention better is described, the below will further set forth by the mode of accompanying drawing, in order to explain the profound in simple terms, all adopt typical two hurdle layout structures in the legend, hurdle in the practical application, three hurdle layout structures in addition more multicolumn layout structure in like manner, Horizontal vertical is to all in like manner;
Fig. 1: the two hurdle layout structures that webpage is common, because each hurdle content is different, make the height on two hurdles inconsistent, in the reading of rolling, the left hurdle of the page can be moved out of window, thereby reduced the reading machine meeting on the left hurdle of the page, for the problem that two hurdles about this shown in similar Fig. 1 .2 can not align, a scroll bar was respectively held on two hurdles about existing technical scheme allowed exactly;
Fig. 2, Fig. 3: because that the height on the left hurdle of the page causes the page to produce less than the height on right hurdle is invalid when blank, adopt the present technique method, after intelligent condition judgment, " the left hurdle of the page " is take " the right hurdle of the page " as vertical " with reference to element ", " the right hurdle of the page " height region is vertical " reference is provided " zone, can see, in the process that whole window frame rolls, invalid blank does not appear in the window frame to the user, not only information shows complete, the validity of operation also is improved, what Fig. 2 showed is that the left hurdle of the page take on the right hurdle of the page as vertical " with reference to element ", height region, the right hurdle of the page is vertical " reference is provided " zone, intelligent distribution step when the page moves up, Fig. 3 shows is " the left hurdle of the page " take " the right hurdle of the page " for vertically " with reference to element ", and height region, the right hurdle of the page is vertically " provide reference " zone, the intelligent distribution step the when page moves down;
Fig. 2 .1: as shown in the figure, page top shows in window frame, and this moment, what problem was layout do not have, and can normally show, do not process this moment;
Fig. 2 .2: as shown in the figure, the page moves in window frame, after the right hurdle of the page enters vertically " reference is provided " state, window frame lower limb and " the left hurdle of the page " are when lower limb aligns, if the page moves on continuing again, " the left hurdle of the page " longitudinally the part of effective coverage in its window frame will reduce, and vertically lock " the left hurdle of the page " this moment, the locking of namely aliging bottom window frame bottom " the left hurdle of the page ";
Fig. 2 .3: as shown in the figure, after " the left hurdle of the page " vertically locked onto window frame, the page moved on still continuing, but the left hurdle of the page vertically is not moved out of the blank problem of layout that window frame causes window frame;
Fig. 2 .4: as shown in the figure, after " the left hurdle of the page " vertically locked onto window frame, the page continues to move up, and vertically " with reference to element " (being the right hurdle of the page) will enter vertically " reference to be supplied " state, and " the left hurdle of the page " removes vertical locking relation with window frame at this moment;
Fig. 2 .5: as shown in the figure, " although the left hurdle of the page " and release of window frame, residing page location is different at the beginning but " the left hurdle of the page " is from it, " the left hurdle of the page " has been left on its vertical residing portrait position during release in the page, when window frame has viewed page bottom, full page is still keeping complete layout, and in fact, the original white space of the page has reasonably been filled by the left hurdle of the page;
Fig. 3 .1: as shown in the figure, Fig. 3 .1 and Fig. 2 .5 are a state in fact, also are the beginnings that the page is checked from lower to upper, and " the right hurdle of the page " is vertical " reference to be supplied " state at this moment;
Fig. 3 .2: as shown in the figure, upwards check scroll through pages, after the right hurdle of the page enters vertically " reference is provided " state, the window frame coboundary aligns with " the left hurdle of the page " coboundary, if continue again scroll through pages, " the left hurdle of the page " longitudinally the part of effective coverage in its window frame will reduce, and will " the left hurdle of the page " vertically lock this moment, i.e. " the left hurdle of the page " top locking of aliging with the window frame top;
Fig. 3 .3: as shown in the figure, after " the left hurdle of the page " vertically locked onto window frame, although the page still continues to move down, left hurdle did not leave the blank problem of layout that window frame causes current window;
Fig. 3 .4: as shown in the figure, after " the left hurdle of the page " vertically locked onto window frame, if the page continues to move down, vertically " with reference to element " (being the right hurdle of the page) will enter vertically " reference to be supplied " state, and " the left hurdle of the page " removes vertical locking relation with window frame at this moment;
Fig. 3 .5: as shown in the figure, when window frame was shown to page top, full page had been got back to again the initial layout pattern shown in Fig. 2 .1;
Fig. 4 .1: as shown in the figure, the left hurdle of the page, right hurdle height is all greater than the height of its window frame, by carrying out layout method after the preliminary intelligent decision, because the height on " the right hurdle of the page " is more than or equal to the height on " the left hurdle of the page ", originally " the left hurdle of the page " of definition is constant take " the right hurdle of the page " as vertical " with reference to element ", the left hurdle of page height＞its window frame height, the right hurdle of page height＞its window frame height, the left hurdle of height 〉=page, the right hurdle of page height, according to condition shown in the figure: the left hurdle of the page is the vertical left hurdle of " with reference to element " page height＞its window frame height take the right hurdle of the page, the right hurdle of page height＞its window frame height, the left hurdle of height 〉=page, the right hurdle of page height, according to condition shown in the figure: the left hurdle of the page is vertically " with reference to element " take the right hurdle of the page;
Fig. 4 .2: as shown in the figure, the left hurdle of the page, right hurdle height is all greater than the height of its window frame, by carrying out layout method after the preliminary intelligent decision, but because the height on " the right hurdle of the page " is less than the height on " the left hurdle of the page ", originally " the left hurdle of the page " of definition will intelligence be exchanged take " the right hurdle of the page " as vertical " with reference to element ", become " the right hurdle of the page " take " the left hurdle of the page " as vertical " with reference to element ", the left hurdle of page height＞its window frame height, the right hurdle of page height＞its window frame height, the left hurdle of height＜page, the right hurdle of page height, according to condition shown in the figure: the right hurdle of the page is vertically " with reference to element " take the left hurdle of the page;
Fig. 5 .1: as shown in the figure, " the left hurdle of the page " height is less than or equal to the height of its window frame, " the right hurdle of the page " height is greater than the height of its window frame, by carrying out layout method after the preliminary intelligent decision, originally " the left hurdle of the page " of definition is also constant take " the right hurdle of the page " as vertical " with reference to element ", enter vertically " reference is provided " state on " the right hurdle of the page " after, " the left hurdle of the page " can vertically be locked in its at that time lengthwise position in window frame, until release when eligible, the left hurdle of page height≤current window frame height, the right hurdle of page height＞current window frame height, according to condition shown in the figure: the left hurdle of the page is vertically " with reference to element " take the right hurdle of the page;
Fig. 5 .2: as shown in the figure, " the left hurdle of the page " height is greater than the height of its window frame, " the right hurdle of the page " height is less than or equal to the height of its window frame, by carrying out layout method after the preliminary intelligent decision, but " the left hurdle of the page " of definition will intelligence be exchanged take " the right hurdle of the page " as vertical " with reference to element " originally, become " the right hurdle of the page " take " the left hurdle of the page " as vertical " with reference to element ", enter vertically " reference is provided " state on " the left hurdle of the page " after, " the right hurdle of the page " can vertically be locked in its at that time lengthwise position in window frame, until release when eligible, the left hurdle of page height＞current window frame height, the right hurdle of page height≤current window frame height, according to condition shown in the figure: the right hurdle of the page is vertically " with reference to element " take the left hurdle of the page;
Fig. 6: as shown in the figure, the height on the left hurdle of the page, the right hurdle of the page is all less than or equal to the height of its window frame, can not carry out layout method in such cases by intelligent decision, because nonsensical, the left hurdle of page height≤its window frame height, the right hurdle of page height≤its window frame height;
Fig. 7: as shown in the figure, what this figure illustrated is the state of how judging with reference to element, because the height on the left hurdle of the page, the right hurdle of the page is all greater than the height of its window frame, therefore the longitudinal region at relatively high page You Lan place is vertically " reference is provided " zone, (" the left hurdle of the page " is take " the right hurdle of the page " as vertical " with reference to element " among this figure);
Fig. 7 .1: as shown in the figure, in the continuous moving process of the page, the window frame longitudinal region is within vertical " reference is provided " zone, and the right hurdle of page this moment is vertical " reference is provided " state;
Fig. 7 .2: as shown in the figure, regional top has exceeded a segment distance to the window frame longitudinal region vertically " providing reference ", and the right hurdle of page this moment is vertical " reference to be supplied " state;
Fig. 7 .3: regional bottom has exceeded a segment distance to the window frame longitudinal region vertically " providing reference ", and the right hurdle of page this moment is vertical " reference to be supplied " state;
Fig. 8: as shown be moving method it " synchronizing moving ", after vertically " with reference to element " (being the right hurdle of the page) enters " reference is provided " state, when the right hurdle of the page has moved up 400 pixel, the left hurdle of the page 400 pixels that also moved up simultaneously, (" the left hurdle of the page " is take " the right hurdle of the page " as vertically " with reference to element " among this figure);
Fig. 9: as shown be moving method it " mobile on year-on-year basis ", (" the left hurdle of the page " is take " the right hurdle of the page " as vertical " with reference to element " among this figure);
Fig. 9 .1: as shown in the figure, in this legend, there is the high not viewing area of 500 pixels on the left hurdle of the page, and there is the high not viewing area of 800 pixels on right hurdle;
Fig. 9 .2: as shown in the figure, in this legend, after vertically " with reference to element " (being the right hurdle of the page) enters " reference is provided " state, when the page moves up 400 pixel, the right hurdle of the page 400 pixels that moved up namely, proportionally calculate: 400 ÷ 800=50%, it is moved up 50% distance of the outer longitudinal region of its window frame of the page right hurdle, so according to mobile on year-on-year basis definition, also should move up simultaneously 50% distance of the outer longitudinal region of its window frame of the left hurdle of the page, but be not 400 pixels that the right hurdle of the page moves, but 500 * 50%=250 pixel;
Fig. 9 .3: the right hurdle of the page has moved up after 100% the distance of the outer longitudinal region of its window frame, also moved up simultaneously 100% distance of the outer longitudinal region of its window frame of the left hurdle of the page.
Originality:
This page dynamically comes from the porthole of submarine with reference to the method inspiration of layout, sometimes the page of an overlength is just as seawater, want to see the continuous dive floating of overall picture under the cleer sea, the scene that is presented in the porthole in continuous dive floating-upward process also can change thereupon, if but pasture and water have hung on the porthole, these pasture and water will be followed the submarine diving floating and can not disappeared in the porthole visual field so, a sea water advanced table has been installed on the porthole for another example, the pointer of depthmeter also can constantly fluctuate in the continuous dive floating-upward process of submarine, in this example, seawater is exactly with reference to element in fact, pasture and water, the pointer of depthmeter is exactly to follow the element that moves with reference to element in fact, although the two different size but can both represent in limited porthole.This cover page is dynamically created by this inspiration just with reference to layout and exhibiting method.
Application space and advantage:
Use 1: this technical method has solved the layout difficult problem that the group element size differs and brings in the page of multicolumn structure, makes page display content more substantial, more complete, more attractive in appearance, and more easily operation is clicked, and user's invalid rolling operation is reduced.This point is particularly important for ecommerce, such as present Taobao's shop page, general all is that the commodity classification catalogue in shop is put into the left side, buyer's guide is put into page right side, because to such an extent as to the content of buyer's guide and figure sector-meeting take the head and shoulders above height of left side commodity classification catalogue of very large length, to making the user in the process of downward rolling view, the catalogue in left side get out of the shown zone of current window already, after the user has browsed buyer's guide, think to see again the commodity classification catalogue in left side, a lot of invalid rollings can only be done and the commodity classification catalogue in left side could be again seen, this user experiences and is starved of improvement, also has a bit noticeable thing, a lot of businessmans can also be put into left hurdle to some advertisement positions, but still the column of the buyer's guide on too late right side is long, so when the user browses rolling, also can shift out current window to the advertisement in the left hurdle, all the time, there is thousands of user to access pages in the capital, if the user can't see advertisement, businessman has also just lost chance, and the loss that causes is well imagined.From another angle, at the different commodity pages, because the left side dynamically takes out with the content on right side, the left side can not be high together with the column on right side, and make left side or right side a large amount of blank occur, this also is the problem that artistic design is had a headache very much, the application of this inventive method intelligence, the user has been solved the operational validity of user with difficulty, businessman has been strengthened the friendliness of the page, the more important thing is has increased more commercial opportunity, and the designer has been solved the integrality of website design with the demand of aesthetic property.
Use 2: this technology provides a kind of method for the design of special effects of webpage, for example in the specific region of the page, the overlapping discharging of designed element and specific region, when using mobile on year-on-year basis mode, level produces a kind of nonsynchronous movement about can making, and gives the stereo perception that produces a kind of dislocation on people's sense organ.
Claims (10)
1. the layout method of a page elements intelligence, it is characterized in that: in a page, for certain elements A specifies one vertical (or laterally) with reference to element B, judgement elements A by intelligence, vertically (or laterally) with reference to the relation of height (or width) with the height (or width) of its window frame of element B, carry out corresponding layout method, by the in good time movement of element, locking, release, vertically (or laterally) of two elements when existing with disappearance in its window frame, effective coverage kept synchronously.
2. the layout method of page elements intelligence according to claim 1 is characterized in that: the described page, comprise any webpage, software, operating system and the page that relates to such as in kind, interface, space of a whole page etc., and below be referred to as " page ".
3. the layout method of page elements intelligence according to claim 1 is characterized in that: the little punctuation mark to a page of described element, and greatly to a paragraph, a node, a block, even full page etc., below be referred to as " element ".
4. the layout method of page elements intelligence according to claim 1, it is characterized in that: elements A, B can be in different window frames, also can be in the same window frame with one-level, the height (or width) that will redefine this window frame when the height (or width) of the window frame of element during greater than the height (or width) of current page window frame is the height (or width) of current page window frame, and the window frame scroll bar can be hidden or show as required.
5. the layout method of page elements intelligence according to claim 1, it is characterized in that: described vertically (or laterally) is with reference to element B, its vertical in affiliated window frame (or laterally) is when mobile, two states are arranged: vertically (or laterally) " reference is provided " and vertically (or laterally) " reference to be supplied ", vertically can provide two moving parameters under (or laterally) " reference is provided " state with reference to element B: moving direction and displacement, moving direction refers to, lower (or left, right), displacement refers to reference to vertically (or laterally) the coordinate difference distance that forms on the element B time snapshot last with it, only under " reference is provided " state, just provide moving parameter with reference to element, under " reference to be supplied ", do not provide moving parameter, when even element B just vertical in its window frame (or laterally) is mobile, can not provide moving parameter yet, elements A just can not respond movement yet, locking, the events such as release, one vertically (or laterally) can be simultaneously by a plurality of element assignments with reference to element, and an element can only have one with reference to element in vertical (or laterally).
6. the layout method of page elements intelligence according to claim 1, it is characterized in that: described judgement elements A by intelligence, vertically (or laterally) is with reference to the relation of height (or width) with the height (or width) of its window frame of element B, carry out corresponding layout method, mainly comprise following three kinds of situations, the first situation is elements A, the height of B (or width) is all greater than the height (or width) of its window frame, to this situation, the layout method of carrying out is---at first comparison element A and height (or width) with reference to element B, if the height of elements A (or width) is greater than the height (or width) of element B, need the element of elements A and element B representative is exchanged, enter vertically (or laterally) " reference is provided " state in the reference element B after, rolling along with window frame, elements A can be mobile with reference to carrying out in a particular manner vertically (or laterally) in the window frame of element B under it, when if the part of effective coverage in its window frame of elements A vertical (or laterally) will reduce, with vertically (or laterally) locking of elements A, until release when eligible; The second situation is elements A, B has a side height (or width) greater than the height (or width) of its window frame, the opposing party's height (or width) is less than or equal to the height (or width) of its window frame, to this situation, if with reference to the height (or width) of the element B height (or width) less than or equal to its window frame, so at first will be with elements A, the element of B representative is exchanged, then the layout method of carrying out is---enter vertically (or laterally) " reference is provided " state in the reference element B after, with vertically (or laterally) locking of elements A, until release when eligible; The third situation be the height (or width) of elements A, B all less than the height (or width) of its window frame, to this situation, do not trigger intelligent distribution method.
7. according to claim 6ly enter vertically (or laterally) " provide with reference to " state with reference to element B, it is characterized in that: described the first situation, vertically (or laterally) " reference is provided " zone is height (or width) region with reference to element B; Described the second situation, vertically (or laterally) " reference is provided " zone is for appending specific highly (or width) zone again with reference to height (or width) region following (or the right) of element B, the computing method of specific height (or width) are---when window frame top margin (or left side) when overlapping with reference to the top margin (or left side) of element B, vertically (or the laterally) coordinate on the base of window frame (or the right) deducts the value of along slope coordinate on the base (or the right) of elements A, and this value can be negative; When window frame vertical (or laterally) viewing area is within vertical (or laterally) " reference is provided " zone, be vertical (or laterally) " reference is provided " state with reference to element B, otherwise be vertical (or laterally) " reference to be supplied " state, but element B has special layout or pattern sometimes, stay white or the attribute such as indentation such as the marginal existence of element B, so visually can exist too early or the situation of the entering of evening " provide with reference to " state excessively.
8. elements A according to claim 6 can be mobile with reference to carrying out in a particular manner vertically (or laterally) in the window frame of element B under it, it is characterized in that: the two moving direction of elements A and element B is identical, translational speed, displacement are not necessarily identical, specifically be subjected to the impact of move mode, move mode mainly contains " synchronizing moving " and " mobile on year-on-year basis "; So-called " synchronizing moving " refer to when the distance that in its window frame, move to certain direction with reference to element B be N, the distance that elements A also moves to certain direction simultaneously in the window frame under it is N; What is called " mobile on year-on-year basis " refers to N% with reference to element B vertical outside certain direction has moved its window frame (or laterally) zone when vertical (or laterally), also N% in its window frame of equidirectional movement outer vertically (or laterally) zone simultaneously of elements A so, vertically mobile formula is on year-on-year basis: elements A vertically move the height=element B of distance/elements A outside its window frame vertically move the height of distance/element B outside its window frame, laterally mobile formula is on year-on-year basis: the width of transverse shifting distance/element B outside its window frame of the width=element B of transverse shifting distance/elements A outside its window frame of elements A, the unit of above-mentioned each each variable of formula is unified, just can draw the displacement of elements A by the mathematical operation of this formula, form mobile on year-on-year basis mode; Move mode is not limited to " synchronizing moving " and " mobile on year-on-year basis ", and move mode reserves a kind of expansion interface, can derive accordingly more move mode.
9. according to claim 1 or 6 described lockings, it is characterized in that: locking is that elements A is for its window frame, elements A is fixed on certain position of its window frame and is not subjected to vertically (or laterally) rolling operation and when vertically (or laterally) is mobile of its window frame, be locking, vertically the condition of (or laterally) locking is: after entering vertically (or laterally) " reference is provided " state with reference to element B, when elements A moves in its window frame, if certain justified margin of certain edge of elements A and its window frame, and when the part of effective coverage in its window frame of elements A vertical (or laterally) will reduce, this moment is with vertically (or laterally) locking of elements A, but sometimes because elements A exists and to stay white or indentation, visually can there be the situation that the edge of the edge of elements A and its window frame can't complete matching.
10. according to claim 1 or 6 described releases, it is characterized in that: release is that elements A is for its window frame, if the state with reference to element B becomes vertically (or laterally) " reference to be supplied " or element B when having changed corresponding moving direction in its window, remove so vertically (or laterally) locking relation of designed element A and its window frame, and stay its vertical residing vertically (or laterally) position during (or laterally) release in the page, after the elements A release, to not keep locking relation with its window frame, the rolling operation of window frame also will directly affect the position of elements A in window.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310215942.7A CN103324476B (en) | 2013-06-04 | 2013-06-04 | Page dynamic reference layout and exhibiting method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310215942.7A CN103324476B (en) | 2013-06-04 | 2013-06-04 | Page dynamic reference layout and exhibiting method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103324476A true CN103324476A (en) | 2013-09-25 |
| CN103324476B CN103324476B (en) | 2016-09-07 |
Family
ID=49193245
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310215942.7A Active CN103324476B (en) | 2013-06-04 | 2013-06-04 | Page dynamic reference layout and exhibiting method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103324476B (en) |
Cited By (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104090734A (en) * | 2014-06-03 | 2014-10-08 | 联想(北京)有限公司 | Information processing method and electronic equipment |
| CN105389362A (en) * | 2015-11-03 | 2016-03-09 | 百度在线网络技术（北京）有限公司 | Method and apparatus for displaying interactive interface |
| CN105677880A (en) * | 2016-01-12 | 2016-06-15 | 阿里巴巴集团控股有限公司 | Method and device for realizing dynamic partition of display area |
| CN105893437A (en) * | 2015-12-14 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Web page display method and apparatus |
| CN105893445A (en) * | 2015-12-15 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Data processing method, server and terminal device |
| CN106250117A (en) * | 2016-07-21 | 2016-12-21 | 东软集团股份有限公司 | For generating the method and device of interface layout constraint |
| CN106528580A (en) * | 2015-09-15 | 2017-03-22 | 阿里巴巴集团控股有限公司 | Display method for description information of service objects and devices |
| CN103701643B (en) * | 2013-12-23 | 2017-06-13 | 广东威创视讯科技股份有限公司 | Obtain method, device and the spelling wall system for spelling wall system configuration |
| CN107256142A (en) * | 2017-04-21 | 2017-10-17 | 腾讯科技（深圳）有限公司 | Method and terminal that a kind of page is shown |
| CN107728868A (en) * | 2016-08-11 | 2018-02-23 | 阿里巴巴集团控股有限公司 | The method, apparatus and mobile terminal of component in the synchronizing moving page |
| CN108763511A (en) * | 2018-05-30 | 2018-11-06 | 腾讯科技（深圳）有限公司 | Figure layer composition method, device, electronic equipment and storage medium in the page |
| CN108804406A (en) * | 2018-06-15 | 2018-11-13 | 广州视源电子科技股份有限公司 | Method and device for processing combined frame |
| CN110888584A (en) * | 2018-09-11 | 2020-03-17 | 北京京东尚科信息技术有限公司 | Page content display control method and device |
| CN111274509A (en) * | 2020-01-14 | 2020-06-12 | 拉扎斯网络科技（上海）有限公司 | Object list page display method and device |
| CN111382388A (en) * | 2020-03-19 | 2020-07-07 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by utilizing CSS (cascading style sheets) |
| CN112925453A (en) * | 2019-12-05 | 2021-06-08 | 阿里巴巴集团控股有限公司 | Component display method, device, electronic equipment and computer readable storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1208889A (en) * | 1997-07-25 | 1999-02-24 | 太阳微系统有限公司 | Detachable JAVA applets |
| US6836870B2 (en) * | 2001-06-15 | 2004-12-28 | Cubic Corporation | Method and system for incorporating a dynamic situation display in a powerpoint slide show presentation |
| CN1588864A (en) * | 2004-09-03 | 2005-03-02 | 王金堃 | Net page with play field |
| CN102117290A (en) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | Method and system used for showing page elements in webpage |
-
2013
- 2013-06-04 CN CN201310215942.7A patent/CN103324476B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1208889A (en) * | 1997-07-25 | 1999-02-24 | 太阳微系统有限公司 | Detachable JAVA applets |
| US6836870B2 (en) * | 2001-06-15 | 2004-12-28 | Cubic Corporation | Method and system for incorporating a dynamic situation display in a powerpoint slide show presentation |
| CN1588864A (en) * | 2004-09-03 | 2005-03-02 | 王金堃 | Net page with play field |
| CN102117290A (en) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | Method and system used for showing page elements in webpage |
Cited By (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103701643B (en) * | 2013-12-23 | 2017-06-13 | 广东威创视讯科技股份有限公司 | Obtain method, device and the spelling wall system for spelling wall system configuration |
| CN104090734A (en) * | 2014-06-03 | 2014-10-08 | 联想(北京)有限公司 | Information processing method and electronic equipment |
| CN104090734B (en) * | 2014-06-03 | 2017-12-29 | 联想(北京)有限公司 | A kind of information processing method and electronic equipment |
| CN106528580A (en) * | 2015-09-15 | 2017-03-22 | 阿里巴巴集团控股有限公司 | Display method for description information of service objects and devices |
| CN105389362A (en) * | 2015-11-03 | 2016-03-09 | 百度在线网络技术（北京）有限公司 | Method and apparatus for displaying interactive interface |
| CN105893437A (en) * | 2015-12-14 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Web page display method and apparatus |
| CN105893445A (en) * | 2015-12-15 | 2016-08-24 | 乐视网信息技术（北京）股份有限公司 | Data processing method, server and terminal device |
| CN105677880A (en) * | 2016-01-12 | 2016-06-15 | 阿里巴巴集团控股有限公司 | Method and device for realizing dynamic partition of display area |
| CN105677880B (en) * | 2016-01-12 | 2019-07-12 | 阿里巴巴集团控股有限公司 | Dynamic divides the implementation method and device of display area |
| CN106250117A (en) * | 2016-07-21 | 2016-12-21 | 东软集团股份有限公司 | For generating the method and device of interface layout constraint |
| CN107728868A (en) * | 2016-08-11 | 2018-02-23 | 阿里巴巴集团控股有限公司 | The method, apparatus and mobile terminal of component in the synchronizing moving page |
| CN107728868B (en) * | 2016-08-11 | 2021-03-09 | 阿里巴巴集团控股有限公司 | Method and device for synchronizing components in mobile page and mobile terminal |
| CN107256142A (en) * | 2017-04-21 | 2017-10-17 | 腾讯科技（深圳）有限公司 | Method and terminal that a kind of page is shown |
| CN107256142B (en) * | 2017-04-21 | 2020-12-29 | 腾讯科技（深圳）有限公司 | Page display method and terminal |
| CN108763511A (en) * | 2018-05-30 | 2018-11-06 | 腾讯科技（深圳）有限公司 | Figure layer composition method, device, electronic equipment and storage medium in the page |
| CN108763511B (en) * | 2018-05-30 | 2021-11-19 | 腾讯科技（深圳）有限公司 | Layer layout method and device in page, electronic equipment and storage medium |
| CN108804406A (en) * | 2018-06-15 | 2018-11-13 | 广州视源电子科技股份有限公司 | Method and device for processing combined frame |
| CN110888584A (en) * | 2018-09-11 | 2020-03-17 | 北京京东尚科信息技术有限公司 | Page content display control method and device |
| CN112925453A (en) * | 2019-12-05 | 2021-06-08 | 阿里巴巴集团控股有限公司 | Component display method, device, electronic equipment and computer readable storage medium |
| CN111274509A (en) * | 2020-01-14 | 2020-06-12 | 拉扎斯网络科技（上海）有限公司 | Object list page display method and device |
| CN111274509B (en) * | 2020-01-14 | 2021-08-17 | 拉扎斯网络科技（上海）有限公司 | Object list page display method and device |
| CN111382388A (en) * | 2020-03-19 | 2020-07-07 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by utilizing CSS (cascading style sheets) |
| CN111382388B (en) * | 2020-03-19 | 2023-10-24 | 中国银行股份有限公司 | Method and system for bottom element bottom suction control by using CSS |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103324476B (en) | 2016-09-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103324476A (en) | Page dynamic reference layout and display method | |
| CN104732479A (en) | Resizing An Image | |
| CN105094930A (en) | Image positioning system and method | |
| CN104915332A (en) | Method and device for generating composing template | |
| CN104571842A (en) | Information processing method and electronic equipment | |
| CN101013417B (en) | Page setup assisted apparatus and method for changing line-shifted attribute of composition data | |
| CN101908216A (en) | Method and device for realizing vector fonts | |
| CN102999931A (en) | Method and device for drawing electronic handwriting | |
| CN104754397A (en) | Hidden caption displaying method and system for digital TV | |
| CN106874387A (en) | A kind of adaptive H TML roll screens show the method for real time information | |
| CN104715054A (en) | Method for converting Silverlight content into HTML webpage content | |
| CN102542528B (en) | Image conversion processing method and system | |
| CN107526576B (en) | Method and device for displaying view components of page | |
| JP4714043B2 (en) | Change instruction drawing creation system and method, and program | |
| CN106909263A (en) | The interactive display method and system of 3-D view | |
| KR0142162B1 (en) | Character generating method and apparatus | |
| CN109948083A (en) | Web page processing method and device | |
| US20230196671A1 (en) | Method and System for Rendering Boundary of Map Area Within Game Map, and Computer-Readable Storage Medium | |
| JP6297169B2 (en) | Drawing apparatus and drawing method | |
| CN104778733B (en) | A kind of drafting of electric power simulation drawing based on webpage and display methods | |
| CN111310082A (en) | Page display method and device | |
| CN101794534B (en) | Automatic typesetting and positioning method of statistical graphs in zonal statistical map | |
| CN102663665A (en) | Display method and edit method of stereo image graphic label with adaptive depth | |
| CN104951187A (en) | Mobile phone page block displaying method | |
| CN104134201A (en) | Texture image stitching method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant |