Embodiment
The embodiment of the invention is adjusted hurdle frame in the single webpage by mouse, determines adjusted size of hurdle frame or position according to the mouse event that listens to by browser, realizes the adjustable of hurdle frame size.
Webpage in the embodiment of the invention is based on the single page of web agreement.The hurdle frame is a kind of rectangle frame that is used for the zoning, and is concrete as form (table) or piece literal (can claim DIV, a kind of is the structure of control module with the piece) etc.Described rectangle frame has constituted the border of hurdle frame.The width of hurdle frame (it is wide to be called for short the hurdle) is meant hurdle frame length in the horizontal direction, and the height of hurdle frame (being called for short the hurdle height) is meant the length of hurdle frame in the vertical direction.Because the actual size of webpage is with exploration on display resolution ratio and show that the size of forms is relevant, so use percentage recently to determine size in the webpage design usually, promptly wide the and height of the page is 100%.
Referring to Fig. 3, the main method flow process of adjusting the hurdle frame in the present embodiment is as follows:
At least one hurdle frame is set in single page in advance, and is state of self-adapting adjustment, specifically can pass through pattern (CSS) and realize the self-adaptation adjustment described page setup.
Step 301: the user passes through the browser browsing page, and by mouse hurdle frame in the webpage and content (comprising literal, picture and image etc.) is edited.
Step 302: monitor mouse event by browser.Mouse event comprise mouse position, rolling mouse, drag mouse, unclamp mouse, click options button (being generally left button) and click property key (being generally right button) etc.
Step 303: according to the mouse event that listens to know the hurdle frame of mouse drag and drag after this hurdle edge circle position in the described page.
Step 304:, adjust the size of this hurdle frame in the described page according to the position of this hurdle edge circle after dragging.
Further export the adjusted hurdle frame and the page to the user by browser.
Present embodiment is technical scheme for convenience of description, and the synoptic diagram (being Fig. 4) of a page is provided.Describing the implementation procedure of adjusting the hurdle frame in detail at continuous mouse event below, referring to shown in Figure 5, is that example describes with individual blog, and idiographic flow is as follows:
Step 501: the user obtains the blog template that operator provides by the browser browsing page, and this template is the single page that comprises the hurdle frame, and the number of hurdle frame is generally 3, comprises 4 hurdle frames so present embodiment makes things convenient for for example.
Step 502: monitor mouse event, catch the coordinate of current mouse, know that mouse moves to the right margin of hurdle frame 1 (also being the left margin of hurdle frame 2), when the position of the right margin of front fence frame 1 is 40%, symbol " % " can omit.This operation will have influence on the size of hurdle frame 1 and hurdle frame 2.
Step 503: monitor mouse event, know and click the mouse left button and drag mouse.Be that example describes to drag mouse left below.
Step 504: monitor mouse event, know and unclamp left mouse button, catch the coordinate of current mouse, according to the definite position of adjusting the right margin of back fence frame 1 of this coordinate, as 20%.
Step 505: the right margin of hurdle frame 1 adjusts to 20% from 40%, and the up-and-down boundary of hurdle frame 1 needs the self-adaptation adjustment, has dwindled 50% so the hurdle of adjusted hurdle frame 1 is wide, cause hurdle frame 1 size reduction 50%.
Step 506: self-adaptation is adjusted the size of hurdle frame 2, and promptly the left margin of hurdle frame 2 adjusts to 20% from 40%, so adjusted hurdle frame 2 has increased 1/3rd.
Step 507: export the adjusted hurdle frame state and the page to the user by browser.
If imported literal in the hurdle frame, then when adjusting the hurdle frame, need adjust literal wherein, otherwise influence user experience.Referring to shown in Figure 6, idiographic flow is as follows at the processing of hurdle frame Chinese words:
Step 601: monitor mouse event, the right margin of knowing hurdle frame 1 adjusts to 20% from 40%, and hurdle frame 1 has dwindled 50%.
Step 602: according to the size of adjusting back fence frame order output character again, the number of hurdle tolerance system delegation literal, the line number of the high restriction in hurdle literal.Specifically can control by pixel, for example, a Chinese character accounts for 4 pixels, and hurdle wide 20% comprises 12 pixels, and hurdle high 50% comprises 24 pixels, then exportable 6 Chinese characters of the delegation in this hurdle frame, 72 Chinese characters of exportable 12 row altogether.If this hurdle frame has been imported 80 Chinese characters, then need to hide 8 Chinese characters (not considering punctuation mark).
Step 603: the discovery literal takes up space and ((as 12 * 24=288), needs the hidden parts literal as 4 * 80=320) sizes greater than the hurdle frame.
Step 604: the order according to input characters is hidden the literal that exceeds part, promptly hides the literal of afterbody, as back 8 words in the concealment column frame.
Above-mentioned steps is the adjustment at hurdle frame 1 Chinese words, for adjusting the hurdle frame 2 that rear space increases, may also need to adjust literal wherein, and implementation procedure is as follows:
Step 605: monitor mouse event, know that the left margin of hurdle frame 2 adjusts to 20% from 40%.
Step 606: according to the size of adjusting back fence frame order output character again.For example, for adjusted hurdle frame 2, hurdle wide 80% comprises 48 pixels, and hurdle high 50% comprises 24 pixels, then exportable 24 Chinese characters of the delegation in this hurdle frame, 288 Chinese characters of exportable 12 row altogether.If this hurdle frame has been imported 150 Chinese characters, then before adjustment, hidden 56 Chinese characters (not considering punctuation mark), after adjustment, need to export hiding Chinese character so.
Step 607: adjust the space that the back increases according to hurdle frame 2, according to the hiding Chinese character of the order output of input characters.
Above-mentioned steps is the method for adjustment at literal, for picture or image, because the position relative fixed of the pixel in picture or the image, can not therefrom enter a new line automatically, so at picture or image is the wide and high content of hiding or exporting appropriate section in hurdle according to adjusted hurdle, referring to shown in Figure 7.
The foregoing description is described the wide method in horizontal adjustment hurdle in detail, for the high method in vertical adjustment hurdle, as drag the lower boundary (also being the coboundary of hurdle frame 3, may also be the coboundary of the lower boundary and the hurdle frame 4 of hurdle frame 2) of hurdle frame 1, the method wide with the horizontal adjustment hurdle is similar, does not repeat them here.Equally, drag mouse when mouse moves to the lower right corner of hurdle frame 1, the method for adjusting the hurdle frame is equivalent to adopt simultaneously the wide method in horizontal adjustment hurdle and vertically adjusts the high method in hurdle, does not repeat them here.
The foregoing description is that to overlap with the border of adjacent two hurdle frames be the explanation that example is carried out, adjacent as hurdle frame 1 and hurdle frame 2, hurdle frame 3 with hurdle frame 4, if the border of adjacent two hurdle frames does not overlap, there is certain distance, this distance immobilizes usually, then when adjusting hurdle frame 1, but still self-adaptation is adjusted hurdle frame 2, hurdle frame 3 and hurdle frame 4.
The template that present embodiment provides for the user is that acquiescence comprises 4 hurdle frames, and in actual applications, the user may need 3 or 5 hurdle frames, then needs hurdle frame number is adjusted.Referring to shown in Figure 8, the realization flow that reduces hurdle frame number is as follows:
Be provided with the scope that is used to limit the hurdle frame in the page, the hurdle frame can not exceed this scope, can be with the border of the page range boundary as restriction hurdle frame.And, be provided with hurdle frame number.
Step 801: monitor mouse event by browser, find that mouse is dragging the right margin of hurdle frame 1.
Step 802: monitor mouse event, know and unclamp left mouse button, catch the coordinate of current mouse.
Step 803: determine that the position of current mouse overlaps with range boundary, promptly the right margin of hurdle frame 1 overlaps with its left margin (also being range boundary).If its position has exceeded described scope when unclamping mouse, the position of then giving tacit consent to current mouse overlaps with range boundary.
Step 804: deletion hurdle frame 1, and upgrade hurdle frame number subtracts 1 to major general hurdle frame number.
Step 805: automatic accommodation hurdle frame 2.
Step 806: may need automatic accommodation hurdle frame 3 and hurdle frame 4, because the right margin of hurdle frame 1 and overlapping of left margin may cause the right margin of hurdle frame 3 and overlapping of left margin, thus need deletion hurdle frame 3, and upgrade hurdle frame number.
Wherein, step 804-806 is relatively independent operation, does not have strict execution successively, also can carry out synchronously.So the operation of upgrading hurdle frame number in the step 804 and 806 can be same operation, promptly once hurdle frame number is subtracted 2.
If before adjusting hurdle frame 1, in hurdle frame 1, imported literal or picture etc., then with the right margin of hurdle frame 1 with after left margin overlaps, concealment column frame 1, and do not delete hurdle frame 1 does not need to upgrade the number of hurdle frame yet.
Referring to Fig. 9, the realization flow that increases hurdle frame number is as follows:
Step 901: monitor mouse event by browser, find that mouse is dragging the left margin (left margin of scope shown in also being) of hurdle frame 1.
Step 902: monitor mouse event, know and unclamp left mouse button, catch the coordinate of current mouse.
Step 903: the position of determining current mouse neither is positioned at left margin and also is not positioned at right margin in described scope.
Step 904: increase a hurdle frame, and upgrade hurdle frame number, add 1 to major general hurdle frame number.
Step 905: self-adaptation is adjusted hurdle frame 1 and hurdle frame 2.
Step 906: may need automatic accommodation hurdle frame 3 and hurdle frame 4.Because to dragging of the left margin of hurdle frame 1, may increase a hurdle frame in the left side of hurdle frame 3, the hurdle frame that increases in the hurdle frame of this increase and the step 904 can be a same hurdle frame, hurdle frame that also can be different, if different hurdle frames then needs to upgrade the number of hurdle frame.
Wherein, step 904-906 is relatively independent operation, does not have strict execution successively, also can carry out synchronously.So the operation of upgrading hurdle frame number in the step 904 and 906 can be same operation, when the left side at hurdle frame 1 and hurdle frame 3 respectively increases a hurdle frame, can once hurdle frame number be added 2.Can increase the mode of hurdle frame when adjusting the hurdle frame by the information inquiry, the present embodiment acquiescence increases a hurdle frame in the left side of hurdle frame 1, and hurdle frame 3 remains unchanged.The mode of above-mentioned three kinds of increase hurdle frames can be referring to synoptic diagram shown in Figure 10.
In step 903 and 904, if the left margin of hurdle frame 1 has being drawn to the right margin of described scope, then deletion hurdle frame 1 and hurdle frame 2 when increasing a hurdle frame need subtract 1 with hurdle frame number at this moment.If before adjusting the hurdle frame, imported content in hurdle frame 1 and the hurdle frame 2, when then the left margin of hurdle frame 1 being drawn to the right margin of described scope, concealment column frame 1 and hurdle frame 2, and do not delete.
Above-mentioned two embodiment describe that the horizontal adjustment hurdle increases when wide or the method for deletion hurdle frame in detail, increase when high for vertical adjustment hurdle or the method for deletion hurdle frame, as drag the lower boundary (lower boundary of scope as described in also being of hurdle frame 3, may also be the lower boundary of hurdle frame 4), method with the horizontal adjustment hurdle when wide is similar, does not repeat them here.
Present embodiment to position and the size of user's display field frame in the page, has adopted scale and vernier for more intuitively, and the scale on the scale is represented the number percent of hurdle frame scope, and adjusts the hurdle frame by dragging of vernier.Horizontal level in page top is provided with scale and vernier, and the quantity of vernier is relevant with the number of horizontal direction hurdle frame, and present embodiment mainly is applicable to the integral body adjustment of hurdle frame 1 and hurdle frame 3.At first introduce the method when being applied in hurdle frame adjustment below, do not relate to the increase of hurdle frame number.Referring to shown in Figure 11, the concrete grammar flow process is as follows:
Step 1101: the user obtains the blog template that operator provides, referring to synoptic diagram shown in Figure 12 by the browser browsing page.
Step 1102: monitor mouse event, catch the coordinate of current mouse, know that mouse has moved on the vernier in left side, the position is 25%.
Step 1103: monitor mouse event, know and click the mouse left button and drag mouse.Be that example describes to drag mouse left below.
Step 1104: monitor mouse event, know and unclamp left mouse button, catch the coordinate of current mouse, determine the position of left side vernier, promptly 0% according to this coordinate.
Step 1105: hide or delete the hurdle frame in left side, may need to upgrade the number of hurdle frame.If the hurdle frame in deletion left side then also can be deleted the vernier in left side.
Step 1106: self-adaptation is adjusted the hurdle frame on middle and right side.
Referring to Figure 13, as follows with the method realization flow that increases the hurdle frame by dragging vernier adjustment hurdle frame:
At least at the two ends of scale a vernier is set respectively.Present embodiment acquiescence provides two hurdle frames on the horizontal direction to the user, so at the two ends of scale two verniers are arranged, a vernier that is used for two hurdles of mark frame coincidence boundary is arranged also in the centre of scale.
Step 1301: monitor mouse event by browser, find that mouse is dragging the vernier of left end.
Step 1302: monitor mouse event, know and unclamp left mouse button, catch the coordinate of current mouse.
Step 1303: position after vernier moves and is determined according to the position of current mouse in the position of determining current mouse in range boundary.
Step 1304: increase a hurdle frame, and upgrade the number of hurdle frame, hurdle frame number is added 1.It is wide that the scale label of current vernier correspondence is the hurdle of this hurdle frame.
Step 1305: self-adaptation is adjusted former left-hand column frame (the hurdle frame in centre position now) and right-hand column frame.
Step 1306: at vernier of left end output of scale.This vernier may be newly-generated, then needs the number of vernier is added 1.Also may when vernier is set, be provided with, be equivalent to a plurality of verniers and overlap, for example set in advance 5 verniers, before adjustment, only export 3 verniers, then 6 hurdle frames can be set at most.Also can not limit the maximum number of hurdle frame, the number that is about to vernier is set to infinitely, in actual applications, the number that vernier can be set is 100, usually the user can not use 101 hurdle frames in one direction, so 100 verniers can satisfy all users' demand, be equivalent to be provided with unlimited a plurality of vernier.
To adjust the hurdle high or when by vertical direction the adjustment of hurdle frame being increased or reducing the hurdle frame when needs, vertical direction (normally in page left side) at the page is provided with scale and vernier, similar when its method and horizontal direction are provided with scale and vernier do not repeat them here.
Referring to Figure 14, the device that is used to adjust the hurdle frame in the present embodiment comprises: monitor module 1401 and processing module 1402.This device can be specially server or client.
Monitor the mouse event that module 1401 is used for monitoring by browser the single page that is set to state of self-adapting adjustment, and know the hurdle frame of mouse drag and drag after this hurdle edge circle in the position of the described page.
Processing module 1402 is used for the position according to this hurdle edge circle after dragging, and adjusts the size of this hurdle frame in the described page.Processing module 1402 also is used to hide, delete or increase the processing of aspects such as hurdle frame when adjusting the hurdle frame, and upgrades the number of hurdle frame and vernier; And also be used for hiding or the processing of aspects such as the literal of Output bar frame or picture.
Described device also comprises interface module, and this interface module can be specially browser, is used to know user's operation and exports when adjusting and the adjusted page to the user.
Described device also comprises the memory module that is used for buffer memory or forever preserves described single page, can be specially storage mediums such as buffer memory, hard disk and flash memory.
Be used for realizing that the software of the embodiment of the invention can be stored in storage mediums such as floppy disk, hard disk and flash memory.
The embodiment of the invention determines adjustment to single page intermediate hurdles frame to have realized that the user can adjust the wide and hurdle height in hurdle arbitrarily by monitoring mouse event, especially realized hiding automatically or deleting of hurdle frame under the limiting case of adjusting.And the embodiment of the invention has realized the automatic increase of hurdle frame by adjusting the relation of hurdle edge circle and range boundary.The embodiment of the invention is also pointed out the position and the size of each hurdle frame of user intuitively by scale and vernier, improved user experience.The embodiment of the invention is realizing the hurdle adjustable while of frame, has also realized changing the content of adjusting automatically in the hurdle frame according to the adjustment of hurdle frame, helps the correct output of content and browsing of user.
Obviously, those skilled in the art can carry out various changes and modification to the present invention and not break away from the spirit and scope of the present invention.Like this, if of the present invention these are revised and modification belongs within the scope of claim of the present invention and equivalent technologies thereof, then the present invention also is intended to comprise these changes and modification interior.