CN102663056B - Method and device for displaying picture elements - Google Patents
Method and device for displaying picture elements Download PDFInfo
- Publication number
- CN102663056B CN102663056B CN201210089585.XA CN201210089585A CN102663056B CN 102663056 B CN102663056 B CN 102663056B CN 201210089585 A CN201210089585 A CN 201210089585A CN 102663056 B CN102663056 B CN 102663056B
- Authority
- CN
- China
- Prior art keywords
- picture element
- mask layer
- object model
- document object
- model tree
- 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.)
- Expired - Fee Related
Links
- 238000000034 method Methods 0.000 title claims abstract description 42
- 230000033001 locomotion Effects 0.000 claims description 74
- 238000012856 packing Methods 0.000 claims description 8
- 230000009471 action Effects 0.000 abstract description 3
- 238000009877 rendering Methods 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 21
- 230000008859 change Effects 0.000 description 9
- 230000006870 function Effects 0.000 description 9
- 238000010992 reflux Methods 0.000 description 8
- 238000004364 calculation method Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 241000931705 Cicada Species 0.000 description 1
- 235000007926 Craterellus fallax Nutrition 0.000 description 1
- 240000007175 Datura inoxia Species 0.000 description 1
- 230000004913 activation Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013499 data model Methods 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention provides a method and a device for displaying picture elements, and relates to the technical field of network. The method provided by the invention comprises the following steps: adding a mask layer when initially dragging action of a mouse is intercepted, creating a second picture element corresponding to a dragged first picture element on the mask layer, wherein the second picture element is an icon including content data of the first picture element; acquiring coordinates in a mouse moving procedure, and changing the coordinates of the second picture element along with changing of the coordinates in the mouse moving procedure; hiding the mask layer while bounce of the mouse is intercepted, exchanging the content data of the first picture element with the content data of a third picture element when the mouse is bounced to point the third picture element; and rendering and displaying picture elements which are acquired after an exchanging procedure again. According to the method and device provided by the invention, reflowing times are reduced; namely, the number of elements of position needs to be counted again; therefore, redrawing times are also reduced; an occupancy rate of system resource is reduced; and a use rate of a CPU (central processing unit) is also reduced.
Description
Technical field
The application relates to networking technology area, particularly relates to a kind of picture element display packing and device.Background technology
RIA (Rich Internet Applications) rich internet application, has high interaction, abundant user experiences and powerful function.Abundant interface element: RIA technology provides the more interface representative element of horn of plenty than HTML, picture element and the data model of intensive, fast response time and graphics rich combine, the experience providing for user.In RIA, be generally the document object model tree element in conjunction with page script (Javascript) operation pages, picture element can be moved.
And in browser, present flow process as Fig. 1 for the page, browser is from HTML Source (HTML resource, wherein HTML is: Hypertext Markup Language Source, HTML (Hypertext Markup Language)) in parse DOM Tree (document object model tree), from CSS (Cascading Style Sheet, Cascading Style Sheet) in parse after the layout architecture body that Cascading Style Sheet is corresponding, construct Render Tree (presenting tree), then browser shows according to the Render Tree drafting page.In building process, browser can be put into the element in document object model tree the corresponding Cascading Style Sheet of the layout architecture body position that Cascading Style Sheet is corresponding one by one, then builds.The wherein rendering content of document object model tree major decision picture element, the position that the layout architecture body major decision picture element that Cascading Style Sheet is corresponding presents.But in the time that the part in Render Tree (or all) changes because of scale size, the layout etc. of Render Tree element, need to rebuild Render Tree; Or some elements need Update attribute, and these attributes just affect the outward appearance of element, style, and can not affect layout, such as background color; Will cause that so browser plays up the page again, generally deserve to be called and state two kinds of modes for refluxing and redrawing.Particularly, if certain picture element position changes, for element corresponding to position after the position that in document object model tree, this element is corresponding, need to again reflux so, calculating location, the redrawing of the row element pattern of going forward side by side.And in this process, the cost of backflow is far away higher than the cost redrawing.
In RIA, there is a drag motions, pulling is an important composition of RIA, is mainly used to change the page and forms and layout, according to pulling the operation of combine certain semantic, such as exchanging the position etc. of two elements.
In prior art, while pulling, common implementation procedure is to add mouse and intercept event, in the time capturing mouse click event in effective interaction area, the process of dragging starts, add and intercept mouse moving event, while triggering mouse moving event, just moved to mouse current location by pulling element by the mode of CSS absolute position is set at every turn, upspring when mouse, drag the processing of end.From aforementioned browser renders process, Content placement by document object model tree builds and presents tree in corresponding Cascading Style Sheet position, pull in process above-mentioned so, that the Cascading Style Sheet position at certain element place is dragged together with its content, wherein the coordinate of CSS is followed the coordinate that mouse moves and is changed, and the variation of Cascading Style Sheet position, so according to the rule of playing up of browser, can cause the backflow of the page or redraw, browser need to recalculate this element reposition in browser of all elements afterwards in this element and document object model tree, and carry out pattern based on reposition and play up, the load calculating and play up is large, system resource takies seriously, CPU (Central Processing Unit, central processing unit) utilization rate is high, affecting other programs of system normally moves.
Summary of the invention
The application's technical matters to be solved is to provide a kind of picture element display packing and device, solve in prior art and pull in process, browser is in document object model tree, all being needed again to reflux by all elements that can be pulled after dragging object position, recalculate its position, and the process of playing up, thereby the load that causes calculating and play up is large, system resource takies seriously, CPU (Central Processing Unit, central processing unit) utilization rate is high, affects the problem of the normal operation of other programs of system.
In order to address the above problem, the application discloses picture element display packing in a kind of webpage, comprising:
The drag motions of intercepting the first picture element in page display area starts, and adds mask layer; Wherein said mask layer is added in page documents object model tree after last element position, and described mask layer brings to Front, and the region that described mask layer covers comprises the region that the page shows;
Create the second picture element corresponding with the first picture element being pulled at mask layer, described second picture element comprises the picture in the content-data of the first picture element;
Intercept the movement that pulls of second picture element, according to pulling the mobile position that described second picture element is set;
The drag motions of intercepting the first picture element in page display area finishes, and hides described mask layer, according to the 3rd picture element of drag motions end, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged;
In the region showing at the described page, only play up the first exchanged picture element and the 3rd picture element.
Preferably, the drag motions of intercepting the first picture element in page display area starts, and adds mask layer, and the step that creates the second picture element corresponding with the first picture element being pulled at mask layer comprises:
Listen to mouse drag motions and start, obtain the content-data in Cascading Style Sheet position data, document object model tree structured data and the document object model tree structure of the first picture element;
In described mask layer, create the second picture element corresponding with the first picture element according to described Cascading Style Sheet position data and document object model tree structured data;
Content-data in described document object model tree structure is set to described second picture element according to document object model tree version.
The step of preferably, adding described mask layer comprises:
In document object model tree corresponding to the page, after the position of last element, add mask layer structure in advance;
The overlay area that mask layer is set in layout architecture body corresponding to Cascading Style Sheet is the region that the described page shows.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
Add the div of corresponding mask layer at the trunk tail end of document object model tree.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
After the each placement of document object model tree respectively can pull last father div of the sub-div in element place, add the div of corresponding mask layer, and be top layer div by its setup of attribute.
Preferably, described in intercept the first picture element in page display area drag motions finish, hide described mask layer step and comprise:
Delete the second picture element creating in described mask layer.
Preferably, according to the 3rd picture element of drag motions end, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged and is comprised:
Listen to drag motions and finish, if while there is content-data in document object model tree structure corresponding to the 3rd picture element corresponding to region, obtain the content-data in the document object model tree structure that the 3rd picture element is corresponding;
Keep Cascading Style Sheet position and the document object model tree structure of the first picture element and the 3rd picture element constant, and the content-data in corresponding the first picture element document object model tree structure is exchanged with the content-data in the corresponding document object model tree structure of the 3rd picture element.
The drag motions of intercepting the first picture element in page display area preferably, starts step and comprises:
When listening to mouse and pressing, judge whether mouse belongs to effective coverage by lower area; If so, listen to mouse and whether start to move, if so, load described mask layer.
Preferably, further comprise:
Judge that drag motions end pulls mouse region whether in the preset range of the 3rd picture element region;
If so, determine that the picture element that described drag motions end pulls mouse region is the 3rd picture element.
Preferably, described mask layer is covered on the picture element building with absolute layout type;
And/or described mask layer is covered on the picture element building with streaming layout type.
Preferably, the picture element that described absolute layout type builds comprises the picture element of nine grids form and/or the picture element of 12 palace lattice.
Accordingly, the application discloses a kind of picture element display device, comprising:
Mask layer adds module, starts for the drag motions of intercepting page display area the first picture element, adds mask layer; Wherein said mask layer is added in page documents object model tree after last element position, and described mask layer brings to Front, and the region that described mask layer covers comprises the region that the page shows;
Second picture element creation module, for creating the second picture element corresponding with the first picture element being pulled at mask layer, described second picture element comprises the picture in the content-data of the first picture element;
Second picture element is modules dragged, for intercepting the movement that pulls of second picture element, according to pulling the mobile position that described second picture element is set;
Content processing module, finish for the drag motions of intercepting page display area the first picture element, hide described mask layer, according to the 3rd picture element of drag motions end, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged;
Play up display module, only play up the first exchanged picture element and the 3rd picture element for the region showing at the described page.
Preferably, described second picture element creation module comprises:
The first data acquisition submodule, starts for listening to mouse drag motions, obtains the content-data in Cascading Style Sheet position data, document object model tree structured data and the document object model tree structure of the first picture element;
First creates submodule, for creating the second picture element corresponding with the first picture element according to described Cascading Style Sheet position data and document object model tree structured data at described mask layer;
Assignment submodule, for being set to described second picture element by the content-data of described document object model tree structure according to document object model tree version.
The module of preferably, adding described mask layer comprises:
Document object model tree is added submodule, in document object model tree corresponding to the page, after the position of last element, adds mask layer structure in advance;
Style setting submodule is the region that the described page shows for the overlay area of mask layer is set at layout architecture body corresponding to Cascading Style Sheet.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
Add the div of corresponding mask layer at the trunk tail end of document object model tree.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
After the each placement of document object model tree respectively can pull last father div of the sub-div in element place, add the div of corresponding mask layer, and be top layer div by its setup of attribute.
Preferably, described content processing module comprises:
Delete submodule, the second picture element creating for deleting described mask layer.
Preferably, described content processing module comprises:
The 3rd picture element obtains submodule, being used for listening to drag motions finishes, if while there is content-data in document object model tree structure corresponding to the 3rd picture element corresponding to region, obtain the content-data in the document object model tree structure that the 3rd picture element is corresponding;
Replace submodule, for keeping Cascading Style Sheet position and the document object model tree structure of the first picture element and the 3rd picture element constant, and the content-data in corresponding the first picture element document object model tree structure is exchanged with the content-data in the corresponding document object model tree structure of the 3rd picture element.
Preferably, add module at described mask layer, described in intercept the first picture element in page display area drag motions comprise while starting:
Judge submodule, in the time listening to mouse and press, judge whether mouse belongs to effective coverage by lower area; If so, listen to mouse and whether start to move, if so, load described mask layer.
Preferably, further comprise::
Pull end region judge module, for judging that drag motions end pulls mouse region whether in the preset range of the 3rd picture element region;
If so, determine that the picture element that described drag motions end pulls mouse region is the 3rd picture element.
Preferably, described mask layer is covered on the picture element building with absolute layout type;
And/or described mask layer is covered on the picture element building with streaming layout type.
Preferably, the picture element that described absolute layout type builds comprises the picture element of nine grids form and/or the picture element of 12 palace lattice.
Compared with prior art, the application comprises following advantage:
The application, in the time that the drag motions that listens to mouse starts, activates interpolation and is covered in the whole mask layer that pulls region, then in mask layer, creates second picture element corresponding to the first picture element being pulled; The position of wherein said mask layer correspondence in document object model tree, after the each position in each element correspondence in document object model tree; So when mouse drag, it is the second picture element in the mask layer dragging, do not drag the first picture element of origin-location, the position of the first picture element like this does not change, according to the rule of playing up of browser, the position of the element in document object model tree after this element is also without re-starting calculating, and general as long as calculate the position of second picture element in mask layer, calculated amount reduces.In addition, dragging after end, just by the displaying contents of the first picture element, the content-data in the document object model tree structure that the first picture element is corresponding, as the 3rd picture element content, if there is displaying contents in the 3rd picture element, so also only need be using the displaying contents of the 3rd picture element as first, in this process, just its displaying contents that the 3rd picture element and the first picture element change, its position and structure all change, therefore, browser also without recalculate in document object model tree the first picture element or the 3rd picture element after the position of element, and during due to calculating element position, need to use in a large number page script and go to calculate, and the application is owing to there is no the element that recalculates position, goes to calculate so generally need not use page script.Again, after content replacement completion, while redrawing, only need to redraw the content of the first picture element and the 3rd picture element, without redraw in document object model tree the first picture element or the 3rd picture element after the content of element.
Therefore, the application has reduced the number of times refluxing, and needs the number of the element that recalculates position, thereby has also reduced the number of times redrawing, and has reduced system resource occupancy, has also reduced the utilization rate of CPU.
Accompanying drawing explanation
Fig. 1 is the schematic flow sheet of a kind of picture element display packing of the application;
Fig. 2 is the preferred mask layer of the application position exemplary plot in document object model tree structure corresponding to HTML;
Fig. 3 is that the picture element of the application while adopting 12 palace lattice layout pulls example;
Fig. 4 is the structural representation of a kind of picture element display device of the application.
Embodiment
For the above-mentioned purpose, the feature and advantage that make the application can become apparent more, below in conjunction with the drawings and specific embodiments, the application is described in further detail.
One of core concept of the application is: in document object model tree, after last element, add a mask layer structure; In the time listening to mouse and start drag motions, add mask layer, and in mask layer, copy a second picture element that the first picture element pulling with mouse is corresponding, so, pulling in process, what pull is the second picture element in mask layer, and the first picture element does not carry out the movement of any position; In the time listening to mouse and upspring, hide described mask layer, indication the 3rd picture element while upspringing according to mouse, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged, so can guarantee in the immovable situation in position of the first picture element and the 3rd picture element exchanging contents.In this process, what moved position is the second picture element in mask layer, and because mask layer structure is in document object model tree structure after last element position, after this second picture element, there is no that other elements need to re-start position calculation so, the second picture element in the just mask layer also refluxing.Meanwhile, only need to, by after the content-data exchange of element and the 3rd picture element, redraw and play up.
With reference to Fig. 1, show the schematic flow sheet of a kind of picture element display packing of the application, specifically can comprise:
In this application, can in document object model tree, be provided with in advance a mask layer, in the time that un-activation is added in hidden state.
The step that described mask layer is set comprises:
Steps A 1, in document object model tree corresponding to the page, after the position of last element, adds mask layer structure in advance.
In RIA, movably also corresponding relevant position in document object model tree of element, generally, each removable element is in the time being arranged by layout architecture body corresponding to Cascading Style Sheet, in browser window, there is certain region in it, such as existing with the pattern of a rectangle, user can be by the rectangle of this position of mouse drag to other positions.
After mask layer is arranged the position of last removable element in document object model tree by the application.With reference to Fig. 2, it shows the preferred mask layer of the application position exemplary plot in document object model tree structure corresponding to HTML.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
Steps A 11, adds the div of corresponding mask layer at the trunk tail end of document object model tree.
Main content will be placed in Fig. 2 in <div id=" mainwrapper " > layer, and according to the complexity of application, the nested quantity of level may be more.All elements that drag are all in <div id=" mainwrapper " > layer, such as <div class=" qsitecontainer " ></div>.
Body finally have a <div id=" drag_layer " >, as mask layer, the real process that drags completes in his inside.
Or preferred, steps A 12, after the each placement of document object model tree respectively can pull last father div of the sub-div in element place, adds the div of corresponding mask layer, and is top layer div by its setup of attribute.
In example, multiple page layer are comprised at body matter layer <div id=" mainwrapper " >......</div> layer, such as <div id=" page0 " >......</div>, <div id=" page1 " >......</div>, <div id=" page2 " >......</div>, page layer represents that current browser shows paging.<div id=" page0 " element of >......</div> shows at first page, <divid=" page2 " element in >......</div> shows at second page, <div id=" page2 " element in >......</div> is the 3rd page of demonstration.Can directly in the end after the div structure of one page, add <div id=" drag_layer " > so, be top level structure but this kind of mode need to arrange this structure, and this div div afterwards can be presented on this layer.
Steps A 2, the overlay area that mask layer is set in layout architecture body corresponding to Cascading Style Sheet is the region that the described page shows.
For the element that guarantees to pull moves all the time in mask layer, need to be in the time that structure present tree, the overlay area that mask layer is set in layout architecture body corresponding to Cascading Style Sheet comprises the region at each removable element place.The coordinate that generally, mask layer overlay area can be set is the coordinate of browser display window.Play up calculated amount in order to save, the region that the application preferably covers mask layer is fixedly installed the region showing into the described page.
Described mask layer is covered on the picture element building with absolute layout type;
And/or described mask layer is covered on the picture element building with streaming layout type.
The picture element that described absolute layout type builds comprises the picture element of nine grids form and/or the picture element of 12 palace lattice.In actual displayed, when in viewing area, picture element drags, be trailing with the form of picture element.
Preferably, the drag motions of intercepting the first picture element in page display area starts, and adds mask layer, and the step that creates the second picture element that the first picture element of being pulled is corresponding at mask layer comprises:
Step B1, listens to mouse drag motions and starts, and obtains the content-data in Cascading Style Sheet position data, document object model tree structured data and the document object model tree structure of the first picture element;
Mouse event generally has three kinds: press down, and mobile move, up upsprings.Can add mouse and intercept event and intercept the action of mouse, in the time listening to down+move, can judge that the drag motions of mouse starts.
When mouse is pressed and starts to move, it has indicated the position of the first picture element being pulled, so can be by the Cascading Style Sheet position data of the first picture element of this position, the content-data in document object model tree structured data and document object model tree structure obtains.Such as the document object model tree structure of an element is <div class=" qsitecontainer " ></div>, content-data in its document object model tree structure is so " qsitecontainer ", its Cascading Style Sheet position data comprises this element region, such as coordinate of four jiaos of rectangular area etc.
The drag motions of intercepting the first picture element in page display area in addition, starts step and comprises:
When listening to mouse and pressing, judge whether mouse belongs to effective coverage by lower area; If so, listen to mouse and whether start to move, if so, load described mask layer.
The application also can arrange the effective coverage pulling, and such as the rectangular area that an element occupies, this rectangle is set so and wherein for pulling effective coverage, in the time that mouse does not drop on this region, can not carries out drag motions in 1/4 sub-rectangular area.When mouse drops on this region, start to move when listening to mouse, add mask layer, start to enter drag motions processing.
In addition, in the time listening to mouse and upspring, judge region according to current mouse place coordinate, and determine described the 3rd picture element according to the one-to-one relationship of described region and the 3rd picture element.
In the application, whole region, page place can subregion processing, whole region can be divided into multiple regions, and each region is corresponding with corresponding the 3rd picture element.
Such as, if the picture element showing with nine grids form can be divided into full page region nine regions so: upper left, in upper, upper right, left, center, right, lower-left, under, bottom right.Respectively from left to right, from corresponding first to the 9th picture element under upper.So in the time that mouse is upspring in lower right area, can judge that element corresponding to the current target area pulling is the 9th picture element.
Step B2 creates the second picture element corresponding with the first picture element according to described Cascading Style Sheet position data and document object model tree structured data in described mask layer;
Based on the mask layer building in abovementioned steps, known activation is covered on the content layer of current demonstration while interpolation, can in mask layer, create so the second picture element with the first picture element model identical.Generally based on the first picture element corresponding document object model tree structure, i.e. div structure creates the document object model tree structure identical document object model tree structure corresponding with the first picture element in mask layer; Meanwhile, it is identical with the Cascading Style Sheet position data of the first picture element that the Cascading Style Sheet position of second picture element is arranged to data, and the position data of general the first picture element comprises wide, high, place coordinate of its region etc.
Step B3, is set to described second picture element by the content-data in described document object model tree structure according to document object model tree version.
Then, the content-data in the document object model tree structure of the first picture element is given in the document object model tree structure of second picture element.So, can guarantee that second picture element appears at the position at the first picture element place, and similar to the first picture element.
The example code that content-data in described document object model tree structure is set to described second picture element according to document object model tree version is as follows:
Such as in function onDragStart (e) function when listen to element mouse drag motions time, add mask layer draglayer, and in mask layer, create second picture element gost. $ element, and give second picture element the Cascading Style Sheet position attribution of the first picture element etc.
Obtain the coordinate in mouse moving process, and the coordinate of described second picture element is changed with the coordinate in described mouse moving process.In mouse moving process, the coordinate of mouse can correspondingly change, and so in order to make second picture element also along with mouse moves, the coordinate of second picture element also need to be along with the coordinate of mouse changes and changes accordingly so.
Such as in function onDragAppMove (e) function, while pulling, in mouse moving process, there is coordinate (x, y), with the first upper right corner, picture element position coordinate (X, Y) be benchmark, (x, y) in mouse moving process and (X, Y) are calculated and processed, the position that can obtain the second picture element of current movement, second picture element converts with coordinate transform.
In the time listening to the upspringing of mouse (up) action, now can hide mask layer, for user side, now mask layer is just invisible, while upspringing according to mouse, indication the 3rd picture element, exchanges the content-data of the content-data of the first picture element and the 3rd picture element simultaneously.
Preferably, according to the 3rd picture element of drag motions end, when being exchanged, the content-data of the content-data of the first picture element and the 3rd picture element comprises:
Step C1, listens to drag motions and finishes, if while there is content-data in document object model tree structure corresponding to the 3rd picture element corresponding to region, obtain the content-data in the document object model tree structure that the 3rd picture element is corresponding.
Further comprise:
Judge that drag motions end pulls mouse region whether in the preset range of the 3rd picture element region;
If so, determine that the picture element that described drag motions end pulls mouse region is the 3rd picture element.
When mouse is upspring, corresponding region while upspringing according to mouse, can indicate the 3rd picture element and the position thereof pulling.Now, in the time there is displaying contents in the 3rd picture element position, while there is content-data in its corresponding DOM Document Object Model object model tree construction, obtain the 3rd picture element corresponding document object model tree structure in content-data.If no, do not obtain, be directly set to content-data in the document object model tree structure to be exchanged of the 3rd picture element for empty.
Step C2, keep Cascading Style Sheet position and the document object model tree structure of the first picture element and the 3rd picture element constant, and the content-data in corresponding the first picture element document object model tree structure is exchanged with the content-data in the corresponding document object model tree structure of the 3rd picture element.
Content-data in the document object model tree structure of the first picture element and the 3rd picture element is exchanged, so, the content of the first picture element and the 3rd picture element has been changed mutually, but the Cascading Style Sheet position of the first picture element and the 3rd picture element and document object model tree structure all do not change.
Preferably, described in intercept the first picture element in page display area drag motions finish, hide described mask layer step and comprise:
Delete the second picture element creating in described mask layer.
In order to save system resource, when time drag motions finishes, while hiding mask layer, the interim second picture element creating in mask layer can be deleted.
Such as in function onDragAppUp (e) function, arrange and delete the function of second picture element and the function of hiding mask layer,, hide mask layer, and the interim second picture element creating in mask layer deleted.
Such as the nine grids form page with absolute layout setting, each grid is presented on the page with the form of CSS absolute fix.If the content of the first picture element and the 3rd picture element is replaced, can play up so the content after the first picture element and the 3rd picture element are replaced, and again play up the structure of mask layer, the nine grids page after replacing can be shown.
Again such as, with a row or multi-row picture element of streaming layout setting, replace after the content of first and the 5th picture element of first row, only need play up first and the content of the 5th each picture element, and can show after mask layer.
In the application, the general content that only need redraw the 3rd picture element and the first picture element, refluxes and redraws mask layer position and content.Because the position of the 3rd picture element and the first picture element does not change, therefore need not reflux and calculate the 3rd picture element and the first picture element and the position of the element after the position of two elements in document object model tree.Only needing refluxes calculates the position of the mask layer in rearmost position, and in mask layer in rearmost position, the movement of element does not affect the position calculation of element above.Therefore the application has greatly reduced the calculated amount pulling in process, raises the efficiency, and has reduced resource consumption.
With reference to Fig. 3, it is that the picture element of the application while adopting 12 palace lattice layout pulls example.
In figure, the dom tree structure of the htlm language of the page can be as shown in Figure 2.As for the tail end in body in dom tree structure, and be top level structure by mask layer structure.
Wherein, display page viewing area is 301, and mask layer is 302, in the drawings because mask layer does not have imbody, so mask layer 302 does not mark; In the drawings, described mask layer has comprised page display area 301.
In the time that mouse is pressed, whether coordinate when system is intercepted and obtained current mouse and press belongs to effective coverage.Judge in this example coordinate when mouse is pressed whether in figure from left to right, the effective coverage of second picture element 310 correspondence from top to bottom;
If, whether intercept mouse starts mobile, if start mobile, activate and add described mask layer 302, and in described mask layer 302, create with described second picture element 310 and there is the second picture element 320 of identical content, the coordinate of described second picture element 310 is given to the second picture element 320 in mask layer simultaneously, can be shown in the position of described second picture element 310.
In mouse moving process, obtain the coordinate in mouse moving process, given the second picture element 320 in described mask layer, make described second picture element 320 can follow mouse and move and move.
In the time upspringing in mouse arrival target location, mask layer under hiding, here, has hidden described mask layer and can hide the second picture element 320 creating in mask layer, also described second picture element 320 can be deleted.And judge the region under the coordinate of current mouse, and according to the corresponding relation of the picture element of region and current region, determine the 3rd picture element.While upspringing such as mouse, the region at its place is " Taobao " place picture element 330 in figure.
Determining after the 3rd picture element, after the Target Photo element of having confirmed to pull, by described by the content in the picture element of second position, such as picture, link, documents etc., replace with the content of (such as the picture element 330 at Taobao place) in described the 3rd picture element, keep the coordinate attributes of above-mentioned two picture elements and structure attribute constant.
Then the picture element of two positions after replacing is played up, and described hiding mask layer is played up, the page can be shown.
With reference to Fig. 4, the structural representation that it shows a kind of picture element display device of the application, comprising:
Mask layer adds module 510, starts for the drag motions of intercepting page display area the first picture element, adds mask layer; Wherein said mask layer is added in page documents object model tree after last element position, and described mask layer brings to Front, and the region that described mask layer covers comprises the region that the page shows;
Second picture element creation module 520, for create second picture element corresponding to the first picture element being pulled at mask layer, described second picture element is the picture comprising in the content-data of the first picture element;
Second picture element is modules dragged 530, for intercepting the movement that pulls of second picture element, according to pulling the mobile position that described second picture element is set;
Play up display module 550, only play up the first exchanged picture element and the 3rd picture element for the region showing at the described page.
Preferably, described second picture element creation module comprises:
The first data acquisition submodule, starts for listening to mouse drag motions, obtains the content-data in structured data and the document object model tree structure of position data, document object model tree of the Cascading Style Sheet of the first picture element;
First creates submodule, for creating the second picture element corresponding with the first picture element according to the position data of described Cascading Style Sheet and the structured data of document object model tree at described mask layer;
Assignment submodule, for being set to described second picture element by the content-data of described document object model tree structure according to document object model tree version.
The module of preferably, adding described mask layer comprises:
Document object model tree is added submodule, in document object model tree corresponding to the page, after the position of last element, adds mask layer structure in advance;
Style setting submodule is the region that the described page shows for the overlay area of mask layer is set at layout architecture body corresponding to Cascading Style Sheet.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
Add the div of corresponding mask layer at the trunk tail end of document object model tree.
Preferably, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
After the each placement of document object model tree respectively can pull last father div of the sub-div in element place, add the div of corresponding mask layer, and be top layer div by its setup of attribute.
Preferably, described content processing module comprises:
Delete submodule, the second picture element creating for deleting described mask layer.
Preferably, described content processing module comprises:
The 3rd picture element obtains submodule, being used for listening to drag motions finishes, if while there is content-data in document object model tree structure corresponding to the 3rd picture element corresponding to region, obtain the content-data in the document object model tree structure that the 3rd picture element is corresponding;
Replace submodule, for keeping Cascading Style Sheet position and the document object model tree structure of the first picture element and the 3rd picture element constant, and the content-data in corresponding the first picture element document object model tree structure is exchanged with the content-data in the corresponding document object model tree structure of the 3rd picture element.
Preferably, add module at described mask layer, described in intercept the first picture element in page display area drag motions comprise while starting:
Judge submodule, in the time listening to mouse and press, judge whether mouse belongs to effective coverage by lower area; If so, listen to mouse and whether start to move, if so, load described mask layer.
Preferably, further comprise::
Pull end region judge module, for judging that drag motions end pulls mouse region whether in the preset range of the 3rd picture element region;
If so, determine that the picture element that described drag motions end pulls mouse region is the 3rd picture element.
Preferably, described mask layer is covered on the picture element building with absolute layout type;
And/or described mask layer is covered on the picture element building with streaming layout type.
Preferably, the picture element that described absolute layout type builds comprises the picture element of nine grids form and/or the picture element of 12 palace lattice.
For system embodiment, because it is substantially similar to embodiment of the method, so description is fairly simple, relevant part is referring to the part explanation of embodiment of the method.
Each embodiment in this instructions all adopts the mode of going forward one by one to describe, and what each embodiment stressed is and the difference of other embodiment, between each embodiment identical similar part mutually referring to.
Finally, also it should be noted that, in this article, relational terms such as the first and second grades is only used for an entity or operation to separate with another entity or operational zone, and not necessarily requires or imply and between these entities or operation, have the relation of any this reality or sequentially.
The embodiment of the present application can be embodied in the acquisition of any support graphics process, internet content and the device (or multiple device) played up on.These devices include but not limited to personal computer, cluster server, mobile phone, workstation, embedded system, game machine, TV, Set Top Box, or any other supported the calculation element that computer graphical and content show.These devices can include but not limited to have to be carried out and one or more processors of save command and the device of storer.These devices can comprise software, firmware and hardware.Software can comprise one or more application programs and operating system.Hardware can include but not limited to processor, storer and display.
Although described the application's preferred embodiment, once those skilled in the art obtain the basic creative concept of cicada, can make other change and modification to these embodiment.So claims are intended to be interpreted as comprising preferred embodiment and fall into all changes and the modification of the application's scope.
A kind of picture element display packing and the device that above the application are provided, be described in detail, applied principle and the embodiment of specific case to the application herein and set forth, the explanation of above embodiment is just for helping to understand the application's method and core concept thereof; , for one of ordinary skill in the art, according to the application's thought, all will change in specific embodiments and applications, in sum, this description should not be construed as the restriction to the application meanwhile.
Claims (22)
1. a picture element display packing in webpage, is characterized in that, comprising:
The drag motions of intercepting the first picture element in page display area starts, and adds mask layer; Wherein said mask layer is added in page documents object model tree after last element position, and described mask layer brings to Front, and the region that described mask layer covers comprises the region that the page shows;
Create the second picture element corresponding with the first picture element being pulled at mask layer, described second picture element comprises the picture in the content-data of the first picture element;
Intercept the movement that pulls of second picture element, according to pulling the mobile position that described second picture element is set;
The drag motions of intercepting the first picture element in page display area finishes, and hides described mask layer, according to the 3rd picture element of drag motions end, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged;
In the region showing at the described page, only play up the first exchanged picture element and the 3rd picture element.
2. method according to claim 1, is characterized in that, the drag motions of intercepting the first picture element in page display area starts, and adds mask layer, and the step that creates the second picture element corresponding with the first picture element being pulled at mask layer comprises:
Listen to mouse drag motions and start, obtain the content-data in Cascading Style Sheet position data, document object model tree structured data and the document object model tree structure of the first picture element;
In described mask layer, create the second picture element corresponding with the first picture element according to described Cascading Style Sheet position data and document object model tree structured data;
Content-data in described document object model tree structure is set to described second picture element according to document object model tree version.
3. method according to claim 1, is characterized in that, the step of adding described mask layer comprises:
In document object model tree corresponding to the page, after the position of last element, add mask layer structure in advance;
The overlay area that mask layer is set in layout architecture body corresponding to Cascading Style Sheet is the region that the described page shows.
4. method according to claim 3, is characterized in that, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprises in advance:
Add the div of corresponding mask layer at the trunk tail end of document object model tree.
5. method according to claim 3, is characterized in that, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprises in advance:
After the each placement of document object model tree respectively can pull last father div of the sub-div in element place, add the div of corresponding mask layer, and be top layer div by its setup of attribute.
6. method according to claim 1, is characterized in that, described in intercept the first picture element in page display area drag motions finish, hide described mask layer step and comprise:
Delete the second picture element creating in described mask layer.
7. method according to claim 2, is characterized in that, according to the 3rd picture element of drag motions end, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged and is comprised:
Listen to drag motions and finish, if while there is content-data in document object model tree structure corresponding to the 3rd picture element corresponding to region, obtain the content-data in the document object model tree structure that the 3rd picture element is corresponding;
Keep Cascading Style Sheet position data and the document object model tree structured data of the first picture element and the 3rd picture element constant, and the content-data in corresponding the first picture element document object model tree structure is exchanged with the content-data in the corresponding document object model tree structure of the 3rd picture element.
8. method according to claim 1, is characterized in that, described in intercept the first picture element in page display area drag motions start step and comprise:
When listening to mouse and pressing, judge whether mouse belongs to effective coverage by lower area; If so, listen to mouse and whether start to move, if so, add described mask layer.
9. according to the method described in claim 1 or 8, it is characterized in that, further comprise:
Judge that drag motions end pulls mouse region whether in the preset range of the 3rd picture element region;
If so, determine that the picture element that described drag motions end pulls mouse region is the 3rd picture element.
10. method according to claim 1, is characterized in that:
Described mask layer is covered on the picture element building with absolute layout type;
And/or described mask layer is covered on the picture element building with streaming layout type.
11. methods according to claim 10, is characterized in that:
The picture element that described absolute layout type builds comprises the picture element of nine grids form and/or the picture element of 12 palace lattice.
12. 1 kinds of picture element display device, is characterized in that, comprising:
Mask layer adds module, starts for the drag motions of intercepting page display area the first picture element, adds mask layer; Wherein said mask layer is added in page documents object model tree after last element position, and described mask layer brings to Front, and the region that described mask layer covers comprises the region that the page shows;
Second picture element creation module, for creating the second picture element corresponding with the first picture element being pulled at mask layer, described second picture element comprises the picture in the content-data of the first picture element;
Second picture element is modules dragged, for intercepting the movement that pulls of second picture element, according to pulling the mobile position that described second picture element is set;
Content processing module, finish for the drag motions of intercepting page display area the first picture element, hide described mask layer, according to the 3rd picture element of drag motions end, the content-data of the content-data of the first picture element and the 3rd picture element is exchanged;
Play up display module, only play up the first exchanged picture element and the 3rd picture element for the region showing at the described page.
13. devices according to claim 12, is characterized in that, described second picture element creation module comprises:
The first data acquisition submodule, starts for listening to mouse drag motions, obtains the content-data in Cascading Style Sheet position data, document object model tree structured data and the document object model tree structure of the first picture element;
First creates submodule, for creating the second picture element corresponding with the first picture element according to described Cascading Style Sheet position data and document object model tree structured data at described mask layer;
Assignment submodule, for being set to described second picture element by the content-data of described document object model tree structure according to document object model tree version.
14. devices according to claim 12, is characterized in that, described mask layer adds module and comprises:
Document object model tree is added submodule, in document object model tree corresponding to the page, after the position of last element, adds mask layer structure in advance;
Style setting submodule is the region that the described page shows for the overlay area of mask layer is set at layout architecture body corresponding to Cascading Style Sheet.
15. devices according to claim 14, is characterized in that, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
Add the div of corresponding mask layer at the trunk tail end of document object model tree.
16. devices according to claim 14, is characterized in that, in document object model tree corresponding to the page, after the position of last element, while adding mask layer structure, comprise in advance:
After the each placement of document object model tree respectively can pull last father div of the sub-div in element place, add the div of corresponding mask layer, and be top layer div by its setup of attribute.
17. devices according to claim 12, is characterized in that, described content processing module comprises:
Delete submodule, the second picture element creating for deleting described mask layer.
18. devices according to claim 12, is characterized in that, described content processing module comprises:
The 3rd picture element obtains submodule, being used for listening to drag motions finishes, if while there is content-data in document object model tree structure corresponding to the 3rd picture element corresponding to region, obtain the content-data in the document object model tree structure that the 3rd picture element is corresponding;
Replace submodule, for keeping Cascading Style Sheet position and the document object model tree structure of the first picture element and the 3rd picture element constant, and the content-data in corresponding the first picture element document object model tree structure is exchanged with the content-data in the corresponding document object model tree structure of the 3rd picture element.
19. devices according to claim 12, it is characterized in that, described mask layer adds module, further comprise: judge submodule, for in the time that described drag motions of intercepting page display area the first picture element starts, press when listening to mouse, judge whether mouse belongs to effective coverage by lower area; If so, listen to mouse and whether start to move, if so, add described mask layer.
20. according to the device described in claim 12 or 19, it is characterized in that, further comprises:
Pull end region judge module, for judging that drag motions end pulls mouse region whether in the preset range of the 3rd picture element region, if so, determine that the picture element that described drag motions end pulls mouse region is the 3rd picture element.
21. devices according to claim 12, is characterized in that:
Described mask layer is covered on the picture element building with absolute layout type;
And/or described mask layer is covered on the picture element building with streaming layout type.
22. devices according to claim 21, is characterized in that:
The picture element that described absolute layout type builds comprises the picture element of nine grids form and/or the picture element of 12 palace lattice.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210089585.XA CN102663056B (en) | 2012-03-29 | 2012-03-29 | Method and device for displaying picture elements |
| CN201410078815.1A CN103870558B (en) | 2012-03-29 | 2012-03-29 | Page rendering method and mask layer creating method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210089585.XA CN102663056B (en) | 2012-03-29 | 2012-03-29 | Method and device for displaying picture elements |
Related Child Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410078815.1A Division CN103870558B (en) | 2012-03-29 | 2012-03-29 | Page rendering method and mask layer creating method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102663056A CN102663056A (en) | 2012-09-12 |
| CN102663056B true CN102663056B (en) | 2014-05-28 |
Family
ID=46772547
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210089585.XA Expired - Fee Related CN102663056B (en) | 2012-03-29 | 2012-03-29 | Method and device for displaying picture elements |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102663056B (en) |
Families Citing this family (25)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102929923B (en) * | 2012-09-19 | 2017-05-03 | Tcl集团股份有限公司 | Organization and management and displaying methods and devices for ordered data interface elements |
| CN102999579B (en) * | 2012-11-13 | 2015-11-25 | 北京奇虎科技有限公司 | Page text frame process browser and page text frame element disposal route |
| CN102981847B (en) * | 2012-11-13 | 2015-11-25 | 北京奇虎科技有限公司 | The browser that page text frame is processed and method |
| CN102915378B (en) * | 2012-11-16 | 2016-05-04 | 北京奇虎科技有限公司 | In webpage, content show state changes method and apparatus |
| CN102999598B (en) * | 2012-11-16 | 2016-05-11 | 北京奇虎科技有限公司 | Change the method and apparatus of the show state of the content in webpage |
| CN104063118B (en) * | 2013-03-22 | 2018-11-06 | 腾讯科技（深圳）有限公司 | A kind of the click display methods and device of web page contents |
| JP6018996B2 (en) * | 2013-09-04 | 2016-11-02 | シャープ株式会社 | Information processing device |
| CN104461476B (en) * | 2013-09-12 | 2018-12-18 | 腾讯科技（深圳）有限公司 | Interface element based on Metro redraws method and device |
| CN104933078B (en) * | 2014-03-20 | 2018-08-21 | 中标软件有限公司 | A kind of Web five application pages rendering optimization method |
| CN103955469B (en) * | 2014-03-28 | 2018-01-19 | 北京奇虎科技有限公司 | A kind of method and apparatus that page zoom-in and zoom-out is carried out in browser |
| CN104516865B (en) * | 2014-12-29 | 2017-09-19 | 北京大学 | Association desktop based on Web demonstrates the online presentation file edit methods of subdocument |
| CN105809054B (en) | 2016-01-26 | 2019-04-23 | 腾讯科技（北京）有限公司 | Information acquisition method and device |
| CN106168978B (en) * | 2016-07-25 | 2020-12-15 | 腾讯科技（深圳）有限公司 | Method and device for processing popup in webpage |
| CN107678815B (en) * | 2017-09-14 | 2020-12-18 | 中国银联股份有限公司 | Page mask display method and webpage server |
| CN107862041A (en) * | 2017-11-06 | 2018-03-30 | 山东浪潮云服务信息科技有限公司 | A kind of shade coating control method, device, computer-readable recording medium and storage control |
| CN110569454A (en) * | 2018-03-28 | 2019-12-13 | 武汉斗鱼网络科技有限公司 | Item processing method and electronic terminal |
| CN111209499B (en) * | 2018-11-22 | 2021-10-29 | 北京字节跳动网络技术有限公司 | Page display method, device, equipment and readable medium |
| CN111368234B (en) * | 2018-12-25 | 2023-12-19 | 阿里巴巴集团控股有限公司 | Window adjusting method, device and storage medium |
| CN109753333B (en) * | 2019-01-11 | 2022-07-08 | 广州视源电子科技股份有限公司 | Interface layout method, device, equipment and medium |
| CN111028329B (en) * | 2019-05-22 | 2020-10-16 | 珠海随变科技有限公司 | Rendering graph providing method, device and equipment and storage medium |
| CN110955362B (en) * | 2019-11-21 | 2022-08-30 | 北京达佳互联信息技术有限公司 | Method and device for processing elements in webpage, electronic equipment and storage medium |
| CN111338520B (en) * | 2020-02-11 | 2021-06-25 | 上海掌门科技有限公司 | Label display method, device and computer readable medium |
| CN111857488B (en) * | 2020-06-30 | 2022-06-28 | 北京百度网讯科技有限公司 | Method and device for popping up menu in applet, electronic equipment and storage medium |
| WO2022041162A1 (en) * | 2020-08-29 | 2022-03-03 | Citrix Systems, Inc. | Mask including moveable window for viewing content |
| CN112614209B (en) * | 2020-12-30 | 2024-02-20 | 凌云光技术股份有限公司 | Element redrawing method and system during flow chart refreshing |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101710268A (en) * | 2009-12-17 | 2010-05-19 | 深圳华为通信技术有限公司 | Method and device for adjusting page layout |
| CN102073502A (en) * | 2011-01-11 | 2011-05-25 | 百度在线网络技术（北京）有限公司 | Method for rendering page frame by WEB primary layout and device thereof |
| CN102117290A (en) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | Method and system used for showing page elements in webpage |
| CN102200985A (en) * | 2010-03-23 | 2011-09-28 | 深圳市金蝶中间件有限公司 | Correspondence device and method of webpage and document object model (DOM) |
| CN102306174A (en) * | 2011-08-24 | 2012-01-04 | 百度在线网络技术（北京）有限公司 | Method and equipment for interacting with user based on web page elements |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040103364A1 (en) * | 2002-11-25 | 2004-05-27 | Dornback Jason Robert | Method of an action occurring as a result of dragging and dropping a defined object within a web page |
-
2012
- 2012-03-29 CN CN201210089585.XA patent/CN102663056B/en not_active Expired - Fee Related
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101710268A (en) * | 2009-12-17 | 2010-05-19 | 深圳华为通信技术有限公司 | Method and device for adjusting page layout |
| CN102117290A (en) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | Method and system used for showing page elements in webpage |
| CN102200985A (en) * | 2010-03-23 | 2011-09-28 | 深圳市金蝶中间件有限公司 | Correspondence device and method of webpage and document object model (DOM) |
| CN102073502A (en) * | 2011-01-11 | 2011-05-25 | 百度在线网络技术（北京）有限公司 | Method for rendering page frame by WEB primary layout and device thereof |
| CN102306174A (en) * | 2011-08-24 | 2012-01-04 | 百度在线网络技术（北京）有限公司 | Method and equipment for interacting with user based on web page elements |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102663056A (en) | 2012-09-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102663056B (en) | Method and device for displaying picture elements | |
| CN103870558A (en) | Page rendering method and mask layer creating method | |
| CN105740315B (en) | The method of one kind of multiple screen response type page layout adjustment | |
| US12112120B2 (en) | System and method for extended dynamic layout | |
| WO2016150052A1 (en) | Method and system for utilizing image to generate link | |
| US10366155B2 (en) | Method and apparatus for displaying data grids | |
| CN105373567B (en) | Page generation method and client | |
| CN104978317B (en) | Webpage generation method and device, website generation method and website establishment server | |
| US20140229268A1 (en) | Comprehensive measurement of the opportunity to see online advertisements | |
| US20110307772A1 (en) | Scrolling in Large Hosted Data Set | |
| CN103873277A (en) | Layered network topology visualizing method and system | |
| CN101615121A (en) | The style editor of BS platform information delivery system | |
| JP2014149834A (en) | Page search method and terminal supporting the same | |
| WO2007101390A1 (en) | Method and system for realizing table local rolling-display in web-page | |
| CN108319683B (en) | Webpage display method and device and terminal | |
| CN102306174A (en) | Method and equipment for interacting with user based on web page elements | |
| US10599754B2 (en) | Context editing without interfering with target page | |
| WO2014036927A1 (en) | Method and device for implementing page mask | |
| CN106162302B (en) | Layout method and device for Launcher main interface and smart television | |
| CN114357345A (en) | Picture processing method and device, electronic equipment and computer readable storage medium | |
| WO2014113676A1 (en) | Supporting user interactions with rendered graphical objects | |
| CN102609414A (en) | Picture hot zone highlighting display method, device and system based on browser | |
| US9158743B1 (en) | Grid layout control for network site design | |
| JP4874363B2 (en) | Web page display method using browser plug-in | |
| CN103514202B (en) | Method and device for achieving webpage display |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| ASS | Succession or assignment of patent right |
Owner name: QIZHI SOFTWARE (BEIJING) CO., LTD. Effective date: 20121108 Owner name: BEIJING QIHU TECHNOLOGY CO., LTD. Free format text: FORMER OWNER: QIZHI SOFTWARE (BEIJING) CO., LTD. Effective date: 20121108 |
|
| C41 | Transfer of patent application or patent right or utility model | ||
| COR | Change of bibliographic data |
Free format text: CORRECT: ADDRESS; FROM: 100016 CHAOYANG, BEIJING TO: 100088 XICHENG, BEIJING |
|
| TA01 | Transfer of patent application right |
Effective date of registration: 20121108 Address after: 100088 Beijing city Xicheng District xinjiekouwai Street 28, block D room 112 (Desheng Park) Applicant after: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Applicant after: Qizhi software (Beijing) Co.,Ltd. Address before: The 4 layer 100016 unit of Beijing city Chaoyang District Jiuxianqiao Road No. 14 Building C Applicant before: Qizhi software (Beijing) Co.,Ltd. |
|
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220725 Address after: Room 801, 8th floor, No. 104, floors 1-19, building 2, yard 6, Jiuxianqiao Road, Chaoyang District, Beijing 100015 Patentee after: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Address before: 100088 room 112, block D, 28 new street, new street, Xicheng District, Beijing (Desheng Park) Patentee before: BEIJING QIHOO TECHNOLOGY Co.,Ltd. Patentee before: Qizhi software (Beijing) Co.,Ltd. |
|
| TR01 | Transfer of patent right | ||
| CF01 | Termination of patent right due to non-payment of annual fee | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20140528 |