CN104049899B - The cursor display method and device of a kind of graphic user interface - Google Patents
The cursor display method and device of a kind of graphic user interface Download PDFInfo
- Publication number
- CN104049899B CN104049899B CN201410305947.3A CN201410305947A CN104049899B CN 104049899 B CN104049899 B CN 104049899B CN 201410305947 A CN201410305947 A CN 201410305947A CN 104049899 B CN104049899 B CN 104049899B
- Authority
- CN
- China
- Prior art keywords
- character
- cursor
- index
- user interface
- graphical nodes
- 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.)
- Active
Links
Abstract
The invention provides a kind of cursor display method of graphic user interface and device, the cursor display method of the graphic user interface includes：Event is monitored by the document object model component created for graphic user interface, wherein, document object model component is editable and invisible；If listening to the mouse click event at the first graphical nodes, cursor is simulated in original display position display first by document object model component, wherein, document object model component is editable and invisible；If listening to the KeyEvent at the first graphical nodes, the first input content got by KeyEvent is then received by document object model component, and the first body matter at the first graphical nodes is updated according to the first input content, and the first simulation cursor is moved to current display position by original display position.The embodiment of the present invention can realize the effect of What You See Is What You Get, improve input experience of the user in graphical nodes.
Description
Technical field
The present invention relates to technical field of the computer network, more particularly to a kind of graphic user interface cursor display method and
Device.
Background technology
When user is browsed web sites by browser, website can provide multiple editable regions and allow user's typing content, use
Family is clicked on by mouse and edits the editable region, then the cursor of a flicker occurs in the editable region, when user exists
When the editable region inputs word or chooses word, cursor can and then change.As many complicated business are at webpage (web)
In displaying, for example, the product based on pattern exhibition such as inline graphics editing machine, by graphical interfaces by editable
Document dbject model (Document Object Model, referred to as DOM) element so that using browser provide it is primary
Cursor.Inventor has found, according to the primary cursor of browser itself offer, when user carries out word volume at the graphical nodes
When collecting, the input content in editable region is possible to eject and cover the graphical nodes, does not accomplish finding for user
Effect obtained by i.e., so as to reduce the input experience of user.
The content of the invention
Embodiments of the invention provide a kind of cursor display method and device of graphic user interface, word is in figure
In shape node, input experience of the user in graphical nodes is improved.
To reach above-mentioned purpose, embodiments of the invention are adopted the following technical scheme that：
A kind of cursor display method of graphic user interface, the cursor display method of the graphic user interface includes：
Monitor the mouse click event at the first graphical nodes in the graphic user interface；
Event is monitored by the document object model component created for the graphic user interface, wherein, the file pair
As model element is editable and invisible；
If listening to the mouse click event at the first graphical nodes, by the document object model component original
Display location shows the first simulation cursor；
If listening to the KeyEvent at first graphical nodes, receive logical by the document object model component
The first input content that the KeyEvent is got is crossed, and the first figure section is updated according to first input content
The first body matter at point, and the described first simulation cursor is moved to current display position by original display position.
A kind of cursor display device of graphic user interface, the cursor display device of the graphic user interface includes：
Action listener module, thing is monitored for the document object model component by being created for the graphic user interface
Part, wherein, the document object model component is editable and invisible；
First processing module, if clicking on thing for the mouse that the action listener module is listened at the first graphical nodes
Part, then simulate cursor by the document object model component in original display position display first；
Second processing module, if the keyboard thing listened to for the action listener module at first graphical nodes
Part, then receive the first input content got by the KeyEvent, and root by the document object model component
Update the first body matter at first graphical nodes according to first input content, and will described first simulate cursor by
Original display position is moved to current display position.
The cursor display method and device of graphic user interface provided in an embodiment of the present invention, because the DOM element is not
It is visible, therefore user is unable to perceive that the presence of the DOM element；Further, since the DOM element is editable, therefore can
Visible first figure of user is synchronized to the lteral data (the first input content) for inputting user on a graphical user interface
Node (displaying interface) place, by the way that the first simulation cursor is moved into current display position so that the first simulation cursor is protected all the time
Hold behind user input word, so that user feels to have directly inputted character at graphical nodes, accomplished finding
I.e. the effect of gained, improves input experience of the user in graphical nodes.
Brief description of the drawings
Fig. 1 is the flow chart of the cursor display method of the graphic user interface of the embodiment of the present invention one.
Fig. 2 is the flow chart of the cursor display method of the graphic user interface of the embodiment of the present invention two.
Fig. 3 is marked on the schematic diagram at a graphical nodes for a simulated light in the embodiment of the present invention two.
Fig. 4 is the flow chart of the cursor display method of the graphic user interface of the embodiment of the present invention three.
Fig. 5 is the schematic diagram of two simulation cursors respectively at two graphical nodes in the embodiment of the present invention three.
Fig. 6 is the structure chart of the cursor display device of the graphic user interface of the embodiment of the present invention four.
Fig. 7 is the structure chart of the cursor display device of the graphic user interface of the embodiment of the present invention five.
Fig. 8 is the structure chart of the cursor display device of the graphic user interface of the embodiment of the present invention six.
Embodiment
It is described in detail below in conjunction with the accompanying drawings to provided in an embodiment of the present invention.
Embodiment one
Fig. 1 is the flow chart of the cursor display method of the graphic user interface of the embodiment of the present invention one, as shown in figure 1, this
The cursor display method for the graphic user interface that inventive embodiments are provided specifically includes following steps：
Step 101, the document object model component monitoring event by being created for graphic user interface, wherein, file pair
As model element is editable and invisible.
If step 102, the mouse click event listened at the first graphical nodes, are existed by document object model component
Original display position display first simulates cursor.
If step 103, the KeyEvent listened at the first graphical nodes, receive logical by document object model component
The first input content that KeyEvent is got is crossed, and according to first at the first input content the first graphical nodes of renewal just
Literary content, and the first simulation cursor is moved to current display position by original display position.
The cursor display method of graphic user interface provided in an embodiment of the present invention, because the DOM element is sightless,
Therefore user is unable to perceive that the presence of the DOM element；Further, since the DOM element is editable, therefore can be by user
The lteral data (the first input content) inputted on a graphical user interface is synchronized to (the displaying of visible first graphical nodes of user
Interface) place, by the way that the first simulation cursor is moved into current display position so that it is defeated that the first simulation cursor remains at user
Enter behind word, so that user feels to have directly inputted character at graphical nodes, accomplished the effect of What You See Is What You Get
Really, input experience of the user in graphical nodes is improved.
Embodiment two
Fig. 2 is the flow chart of the cursor display method of the graphic user interface of the embodiment of the present invention two, and Fig. 3 is of the invention real
Apply a simulated light in example two and be marked on the schematic diagram at a graphical nodes；As shown in Fig. 2 figure provided in an embodiment of the present invention
The cursor display method of user interface specifically includes following steps：
Step 201, the mouse click event at the first graphical nodes monitored in graphic user interface, if listening to mouse
Punctuate hits event, then performs step 202, if not hearing, continue executing with step 201.
Step 202, obtained by the DOM element created for graphic user interface in the first graphical nodes upper left the
One position coordinates, wherein, the DOM element is editable and invisible.And perform step 203.
Step 203, obtain click location of the mouse click event at the first graphical nodes and obtain click position
The location index of the character relative to first position coordinate at place is put, and performs step 204.
Step 204, the first simulated light target original display position is determined according to the click location and the location index, and held
Row step 205；Wherein, the first simulated light target original display position can be specifically determined as follows：Obtain the position
The position coordinates in the upper left corner of the corresponding character of index, character duration, character height；According to the click location and the character
The position coordinates in the upper left corner, character duration, character height determine the first simulated light target original display position.
In addition, the embodiment of the present invention is while step 202~step 204 is performed or after execution of step 204, also
The first body matter at the first graphical nodes can be captured by DOM element, the first body matter is synchronized to DOM element
In.
Step 205, pass through DOM element monitor KeyEvent, if listening to KeyEvent, perform step 206, if not supervising
Hear, then continue executing with step 205.
Step 206, the first input content got by DOM element reception by KeyEvent, it is defeated according to first
Enter the first body matter at the graphical nodes of content update first, perform step 207.
Step 207, the first index for obtaining newly-increased character in the first body matter after updating, perform step 208.
Step 208, according to first index and the upper left corner of newly-increased character position coordinates, character duration, character height it is true
Fixed first simulated light target current display position, flow terminates.
In step 206, the width for increasing character in the first body matter after updating newly is obtained, the number to increasing character newly
Added up, obtain the first index of the first body matter；First simulation cursor is moved to the position that the first index is specified, and
By the first index again assignment.
The embodiment of the method shown in Fig. 2 is described in detail with reference to Fig. 3, the embodiment of the present invention has with DOM element
Body is that div containers are illustrative, and div containers could be arranged to editable and sightless, specifically, sets div
Content editable (contentEditable) attribute of container is true (true), by the form (style) for setting div containers
Attribute, for example, clip is set to rect：(1em1em1em1em), rect represents that div containers are rectangle, by rectangular four
The parameter of individual drift angle (being followed successively by upper left, upper right, bottom right, lower-left) position is set to identical, then div containers be can be achieved can not
The effect seen.In addition, div containers can be created in newly-built graphic user interface, can also be when loading graphic user interface
Create.
Specifically, referring to Fig. 3, the graphic user interface 31 of entitled " mind map ", the graphic user interface are shown
31 show that user operates by the way of graphical nodes, and further, graphical nodes are specifically as follows in graphic user interface 31
Not editable figure square frame, for example, central theme, first branch's theme, second branch's theme, the 3rd branch's theme,
Figure square frame where four branch's themes.When user clicks on the first graphical nodes on the graphic user interface 31 (for example, upper left
Angle figure square frame) place word (the first body matter) when, the first mouse event can have been listened to by step 201, entered one
Step ground, can be realized by registered events and monitor the first mouse event；Div containers can be created by performing step 202；Holding
, can also be by the first body matter at the graphical nodes in the upper left corner (for example, first point while row step 202 or afterwards
Branch theme) it is synchronized in div containers.
First simulation cursor can be included by the figure in mouse click event in the upper left corner by step 202~step 204
Original display position at shape node, the original display position is determined by the click location of mouse click event, for example, working as user
Need to get the upper left first position coordinate of the graphical nodes in the upper left corner when clicking on " the ", and obtain the character being clicked
" the " relative to the upper left position coordinates of the graphical nodes location index, because " the " is located at the 1st word, therefore should
Location index is " 1 ", by obtaining the location index, the position that can be clicked on according to mouse " the " place, and " the " position
Index " 1 " gets original display position；Further, should be shown in be accurately determined the first simulation cursor " the "
Below, then the first simulation can be determined by the position coordinates, the character duration of " " and character height in the upper left corner of " "
The original display position of cursor, for example, by character duration divided by 2, determine click location be the center of " " left side or
Right side, so that it is determined that be by the first simulated light target original display position be moved to before " " or behind, pass through this kind
Mode determines the first simulated light target original display position, and the first simulated light target original display position can be made more accurate.Fig. 3
It is middle to show in the first simulation cursor behind " dividing ", if mouse clicks " dividing ", the same foregoing description of processing procedure.
Monitoring KeyEvent by DOM element in step 205 and step 206 specifically can be by registering keydown things
Part realizes the monitoring to keyboard operation, specifically, when user is in graphical nodes (the first graphical nodes) place input text in the upper left corner
During word, the contents of div containers changes with input content, now updates the input content in div containers and arrives the upper left corner
Graphical nodes at word content, for example, the first body matter before by input through keyboard word content is " the
Theme ", " one point " is the first input content for being obtained by monitoring after keyboard operation, then needs " one point " by div containers
Update at the first graphical nodes.
In step 207 and step 208, when obtaining the first input content " one point " by above-mentioned steps 205 and step 206
When, then the newly-increased character in the first body matter is " one point ", then " one ", first index of " dividing " are respectively：2nd, 3, due to
Through " one point " has been synchronized at the first graphical nodes, now need the first simulation cursor moving behind to " dividing " from " the "
Behind, at this point it is possible to by increase newly character " one ", the upper left corner of " divide " position coordinates, " one ", " dividing " first index with
And character height determines the first simulated light target current display position, for example, the first simulated light target current display position is
Behind " dividing ", so, as user input " one ", the first simulation cursor may be displayed on behind " one ", when input " dividing "
When, first simulation cursor may be displayed on behind " divide ", therefore user input character when as on genuine interface input
Word is the same, and the first simulation cursor will not have any pause when user inputs character at the first graphical nodes, so as to improve
The input experience of user.
To sum up, the whole flow process that the embodiment of the present invention is provided is the process of an order, therefore user is in graphical nodes
The first simulation cursor will not have input word at any pause, the graphical nodes of user in graphical user interfaces during place's input character
Imperceptible during symbol to have any interim card, it is the same to input on interface word just as user, so as to improve the input body of user
Test.
Above-mentioned embodiment illustrated in fig. 2 at same graphical nodes (the first graphical nodes) place only to first listen to mouse thing
Part, the order for monitoring KeyEvent at the first graphical nodes again afterwards is described, it will be appreciated by those skilled in the art that
If having listened to mouse click event at the first graphical nodes, but it is separated by after a period of time, not in the first figure
KeyEvent is listened at node, but mouse click event is there occurs at second graph node, then is still needed to by DOM element
Monitoring event, is that mouse click event is there occurs at second graph node to determine, or, in the first graphical nodes
" dividing " place there occurs mouse click event, and the first simulation cursor is included behind " dividing " word, separated in time it
Afterwards, " branch " place has been listened to by DOM element and has there occurs mouse click event, then needed to include the first simulation cursor in " branch "
Behind word, therefore the event listened to by DOM element, it may be possible to mouse click event, it is also possible to be KeyEvent,
Whether the event that the embodiment of the present invention is specifically listened to DOM element is not limited, be also first to listen to mouse point to DOM element
Hit after event and listen to the order of KeyEvent and do not limit, it is only necessary to be specific in the graphic user interface 31 according to user
Depending on operational scenario.
Embodiment three
Fig. 4 is the flow chart of the cursor display method of the graphic user interface of the embodiment of the present invention three, and Fig. 5 is of the invention real
Apply the schematic diagram of two simulation cursors respectively at two graphical nodes in example three；As shown in figure 4, shown in above-mentioned Fig. 2 and Fig. 3
On the basis of embodiment, if the graphic user interface 31 shown in the Fig. 3 is sent to by user by way of linking or be shared
Other terminal devices, then the cursor display method of graphic user interface provided in an embodiment of the present invention can also be including following step
Suddenly：
The node index and the second index of step 401, the other terminal devices of acquisition in second graph node；
Step 402, according to node index with second index determination the second simulated light be marked on it is original at second graph node
Display location；
The second input content that step 403, the user of the other terminal devices of acquisition input in second graph node；
Step 404, according to the second input content update second graph node the second body matter, and according to renewal after
Second input content and second index upgrade the second simulated light target current display position.
The embodiment of the method shown in Fig. 4 is described in detail with reference to Fig. 5, the embodiment of the present invention is still with DOM element
Specially div containers are illustrative, and div containers are editable and sightless, specifically, set div containers
Content editable (contentEditable) attribute is true (true), and the clip attributes of div containers are set into rect:
(1em1em1em1em), rect represents that div containers are rectangle, and (rectangular four drift angles are followed successively by into upper left, upper right, the right side
Under, lower-left) parameter of position is set to identical, then div containers are that sightless effect can be achieved.
Specifically, referring to Fig. 5, show in the mind map 31 shown in Fig. 3 when other terminal devices are also in the figure
Graphical nodes (second graph node) place of lower left in user interface carries out example during copy editor, by step 401
Node index and second index of other terminal devices in second graph node are obtained, specifically, back-end server can be passed through
Place obtains node index and second index of other terminal devices in second graph node, and node index is specifically as follows figure section
The numbering of point, for example, the node index of the first graphical nodes is " 1 ", the node index of second graph node is " 2 ", the 3rd figure
The node of shape node (graphical nodes in correspondence upper right side) is " 3 ", and the 4th graphical nodes (graphical nodes of correspondence lower right) are
" 4 ", it will be appreciated by persons skilled in the art that node index can be the numbering of graphical nodes in graphical user interfaces；
Second index is the sequence of the word in graphical nodes, for example, " the " is located at the first character at second graph node, because
This second index is " 1 ", by obtaining second index, can be operated other terminal devices on second graph node
Second simulation cursor is shown in behind " the ", further, should be shown in be accurately determined the second simulation cursor
Behind " the ", it can use and determine that the second simulation cursor is shown in before " the " with above-mentioned first simulated light target mode
Or behind.The second simulation cursor show in behind " branch " in Fig. 5, if mouse clicks " branch ", processing procedure
Same foregoing description.
In step 403 and step 404, if during the second input content " two branches ", it is newly-increased in the first body matter
Character is " two branches ", then " two ", " dividing ", first index of " branch " are respectively：2nd, 3,4, due to that " two branches " is synchronous
Arrive at second graph node, now needed the second simulation cursor moving behind to behind " branch " from " the ", now, can
With by increase newly character " two ", " divide ", the upper left corner of " branch " position coordinates, " two ", " dividing ", " branch " second index and word
Symbol height determines the second simulated light target current display position, for example, the second simulated light target current display position is " branch "
Below.
When the user of other terminal devices is obtaining the link of the graphic user interface or by being obtained by way of sharing
When getting the graphic user interface, the user of other terminal devices equally can be on the graphical nodes on the graphic user interface
Enter edlin；It will be appreciated by persons skilled in the art that when simultaneously the other terminal devices for having more than three are used in the figure
When being operated on the interface of family, the simulation cursor of more than three can equally be shown in the machine, and by three with
On the input content of other-end equipment shown and updated so that in-local user it can be seen that other users
The graphic user interface is operated by other terminal devices, so that many people are simultaneously to graphical user circle
Face is operated, and realizes cooperative operation of many people to same graphic user interface.
Example IV
Fig. 6 is the structure chart of the cursor display device of the graphic user interface of the embodiment of the present invention four；As shown in fig. 6, this
The cursor display device for the graphic user interface that inventive embodiments are provided includes：
Action listener module 61, thing is monitored for the document object model component by being created for the graphic user interface
Part, wherein, the document object model component is editable and invisible；
First processing module 62, if clicking on thing for the mouse that action listener module 61 is listened at the first graphical nodes
Part, then simulate cursor by the document object model component in original display position display first；
Second processing module 63, if the keyboard thing listened to for action listener module 61 at first graphical nodes
Part, then receive the first input content got by the KeyEvent, and root by the document object model component
Update the first body matter at first graphical nodes according to first input content, and will described first simulate cursor by
Original display position is moved to current display position.
The cursor display device of graphic user interface provided in an embodiment of the present invention, due to what is created by display module 62
DOM element is sightless, therefore user is unable to perceive that the presence of the DOM element；Further, since the DOM element is to compile
Volume, therefore to be synchronized to user visible for the lteral data (the first input content) that can input user on a graphical user interface
The first graphical nodes (displaying interface) place, by Second processing module 63 by first simulation cursor be moved to currently displaying position
Put so that the first simulation cursor is remained at behind user input word, so that user is felt at graphical nodes
Character has been directly inputted, has accomplished the effect of What You See Is What You Get, input experience of the user in graphical nodes is improved.
Embodiment five
Fig. 7 is the structure chart of the cursor display device of the graphic user interface of the embodiment of the present invention five；Shown in above-mentioned Fig. 6
On the basis of embodiment, as shown in fig. 7, the cursor display device of graphic user interface provided in an embodiment of the present invention includes：
First processing module 62 includes：
First acquisition unit 621, for being obtained by the document object model component in first graphical nodes
Upper left first position coordinate；
Second acquisition unit 622, for obtaining click position of the mouse click event at first graphical nodes
Put and obtain location index of the character relative to the first position coordinate at the click location；
First determining unit 623, for determining the first simulated light target according to the click location and the location index
Original display position.
Further, second acquisition unit 622 includes：First obtains subelement, relative for obtaining the location index
The position coordinates in the upper left corner for the character answered, character duration, character height；First determination subelement, for according to described
Click location and the position coordinates, character duration, character height in the upper left corner of the character determine the first simulated light target
Original display position.
Further, Second processing module 63 includes：
3rd acquiring unit 631, increases the first index of character newly for obtaining in first body matter after updating；
Second determining unit 632, for the position coordinates according to the described first index and the upper left corner of the newly-increased character,
Character duration, character height determine the first simulated light target current display position.
Further, the cursor display device also includes：
First trapping module 64, if for the mouse listened to by action listener module 61 at first graphical nodes
Click event, then capture the first body matter at first graphical nodes by the document object model component；
Synchronization module 65, first body matter for the first trapping module 64 to be captured is synchronized to the file
In object model element.
The Advantageous Effects of the embodiment of the present invention may be referred to the Advantageous Effects in Fig. 2 and embodiment illustrated in fig. 3,
It will not be repeated here.
Embodiment six
Fig. 8 is the structure chart of the cursor display device of the graphic user interface of the embodiment of the present invention six as shown in figure 8, in figure
On the basis of 6 illustrated embodiments, the cursor display device also includes：
First acquisition module 66, for obtaining node index and second of the other terminal devices in second graph node
Index；
Determining module 67, for determining that the second simulated light is marked on described the with the described second index according to node index
Display location at two graphical nodes.
Further, the cursor display device also includes：
Second acquisition module 68, for obtaining what the user of other terminal devices inputted in the second graph node
Second input content；
In update module 69, the second text for updating the second graph node according to second input content
Hold, and the second simulated light target shows position according to second input content after renewal and second index upgrade
Put.
Further, update module 69 includes：
4th acquiring unit 691, for being obtained according to the described second index in second body matter after updating
The position coordinates in the upper left corner of each character, character duration, character height；
3rd determining unit 692, for the position coordinates in the upper left corner according to each character, the character duration,
The character height determines the position that the second simulation cursor is shown.
The Advantageous Effects of the embodiment of the present invention may be referred to the Advantageous Effects in Fig. 4 and embodiment illustrated in fig. 5,
It will not be repeated here.
Further, it will be appreciated by persons skilled in the art that above-described embodiment five can also be combined with embodiment six
A new embodiment is formed together, show two simulations in the first graphical nodes and second graph node so as to realize
Cursor, realizes that user in the machine cooperates with behaviour with the user of other terminal devices beyond the machine to same graphic user interface
Make.
The foregoing is only a specific embodiment of the invention, but protection scope of the present invention is not limited thereto, any
Those familiar with the art the invention discloses technical scope in, change or replacement can be readily occurred in, should all be contained
Cover within protection scope of the present invention.Therefore, protection scope of the present invention should be based on the protection scope of the described claims.
Claims (18)
1. a kind of cursor display method of graphic user interface, it is characterised in that the cursor display side of the graphic user interface
Method includes：
Event is monitored by the document object model component created for the graphic user interface, wherein, the file object mould
Type element is editable and invisible；
If listening to the mouse click event at the first graphical nodes, by the document object model component in original display
Position display first simulates cursor；
If listening to the KeyEvent at first graphical nodes, received by the document object model component and pass through institute
The first input content that KeyEvent is got is stated, and is updated according to first input content at first graphical nodes
The first body matter, and the described first simulation cursor by original display position is moved to current display position.
2. cursor display method according to claim 1, it is characterised in that described by being created for the graphic user interface
The document dbject model built includes in original display position display the first simulated light target step：
Upper left first position coordinate in first graphical nodes is obtained by the document object model component；
The mouse click event is obtained at the click location and the acquisition click location at first graphical nodes
Location index of the character relative to the first position coordinate；
First simulated light target original display position is determined according to the click location and the location index.
3. cursor display method according to claim 2, it is characterised in that described according to the click location and institute's rheme
Putting the step of index determines the first simulated light target original display position includes：
Obtain the position coordinates, character duration, character height in the upper left corner of the corresponding character of the location index；
Described the is determined according to the position coordinates, character duration, character height in the click location and the upper left corner of the character
One simulated light target original display position.
4. cursor display method according to claim 1, it is characterised in that if listening at first graphical nodes
Mouse click event, the cursor display method also includes：
The first body matter at first graphical nodes is captured by the document object model component；
First body matter is synchronized in the document object model component.
5. cursor display method according to claim 1, it is characterised in that described to simulate cursor by original by described first
The step of display location is moved to current display position includes：
Obtain the first index for increasing character in first body matter after updating newly；
Institute is determined according to the described first index and the position coordinates, character duration, character height in the upper left corner of the newly-increased character
State the first simulated light target current display position.
6. cursor display method according to claim 1, it is characterised in that the cursor display method also includes：
Obtain node index and second index of other terminal devices in second graph node；
Determine that the second simulated light is marked on according to node index and the described second index original at the second graph node
Display location.
7. cursor display method according to claim 6, it is characterised in that described according to node index and described the
Two indexes determine after the step of the second simulated light is marked on the original display position at the second graph node that the cursor shows
Show that method also includes：
Obtain the second input content that the user of other terminal devices inputs in the second graph node；
The second body matter of the second graph node is updated according to second input content, and according to after renewal
Second input content and the second simulated light target current display position described in second index upgrade.
8. cursor display method according to claim 7, it is characterised in that second input according to after renewal
Content described in second index upgrade the step of the second simulated light target current display position with including：
The position that the upper left corner of each character in second body matter after updating is obtained according to the described second index is sat
Mark, character duration, character height；
Described second is determined according to the position coordinates, the character duration, the character height in the upper left corner of each character
The position that simulation cursor is shown.
9. according to any described cursor display method of claim 1~8, it is characterised in that the document object model component
For div containers, the div containers are created in the newly-built or loading graphic user interface.
10. a kind of cursor display device of graphic user interface, it is characterised in that the cursor display dress of the graphic user interface
Put including：
Action listener module, event is monitored for the document object model component by being created for the graphic user interface, its
In, the document object model component is editable and invisible；
First processing module, if the mouse click event listened to for the action listener module at the first graphical nodes,
Cursor is simulated in original display position display first by the document object model component；
Second processing module, if the KeyEvent listened to for the action listener module at first graphical nodes,
The first input content got by the KeyEvent is received by the document object model component, and according to described
First input content updates the first body matter at first graphical nodes, and by the described first simulation cursor by original aobvious
Show that position is moved to current display position.
11. cursor display device according to claim 10, it is characterised in that the first processing module includes：
First acquisition unit, for obtaining upper left in first graphical nodes by the document object model component
First position coordinate；
Second acquisition unit, for obtaining click location of the mouse click event at first graphical nodes and obtaining
Take location index of the character relative to the first position coordinate at the click location；
First determining unit, for determining the first simulated light target original display according to the click location and the location index
Position.
12. cursor display device according to claim 11, it is characterised in that the second acquisition unit includes：
First obtains subelement, the position coordinates in the upper left corner for obtaining the corresponding character of the location index, word
Accord with width, character height；
First determination subelement, for the position coordinates according to the click location and the upper left corner of the character, character duration,
Character height determines the first simulated light target original display position.
13. cursor display device according to claim 10, it is characterised in that the cursor display device also includes：
First trapping module, if being clicked on for listening to the mouse at first graphical nodes by the action listener module
Event, then capture the first body matter at first graphical nodes by the document object model component；
Synchronization module, for first body matter to be synchronized in the document object model component.
14. cursor display device according to claim 10, it is characterised in that the Second processing module includes：
3rd acquiring unit, increases the first index of character newly for obtaining in first body matter after updating；
Second determining unit, for wide according to the described first index and the position coordinates in the upper left corner of the newly-increased character, character
Degree, character height determine the first simulated light target current display position.
15. cursor display device according to claim 10, it is characterised in that the cursor display device also includes：
First acquisition module, for obtaining node index and second index of other terminal devices in second graph node；
Determining module, for determining that the second simulated light is marked on the second graph with the described second index according to node index
Display location at node.
16. cursor display device according to claim 15, it is characterised in that the cursor display device also includes：
Second acquisition module, for obtain the users of other terminal devices the second graph node input it is second defeated
Enter content；
Update module, the second body matter for updating the second graph node according to second input content, and root
According to second input content after renewal and the second simulated light target display location described in second index upgrade.
17. cursor display device according to claim 16, it is characterised in that the update module includes：
4th acquiring unit, for obtaining each character in second body matter after updating according to the described second index
The position coordinates in the upper left corner, character duration, character height；
3rd determining unit, position coordinates, the character duration, the character for the upper left corner according to each character
Highly determine the position that the second simulation cursor is shown.
18. according to any described cursor display device of claim 10~17, it is characterised in that the document dbject model member
Element is div containers, and the div containers are created in the newly-built or loading graphic user interface.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410305947.3A CN104049899B (en) | 2014-06-30 | 2014-06-30 | The cursor display method and device of a kind of graphic user interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410305947.3A CN104049899B (en) | 2014-06-30 | 2014-06-30 | The cursor display method and device of a kind of graphic user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104049899A CN104049899A (en) | 2014-09-17 |
| CN104049899B true CN104049899B (en) | 2017-07-14 |
Family
ID=51502838
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410305947.3A Active CN104049899B (en) | 2014-06-30 | 2014-06-30 | The cursor display method and device of a kind of graphic user interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104049899B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2001005606A (en) * | 1999-06-18 | 2001-01-12 | Nec Eng Ltd | Mouse control system |
| CN102968913A (en) * | 2012-09-21 | 2013-03-13 | 无敌科技(西安)有限公司 | Visual association learning system and method for historical knowledge |
| CN104933224A (en) * | 2015-05-25 | 2015-09-23 | 国家电网公司 | Quick configurator of electronic equipment for intelligent substation |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8386951B2 (en) * | 2006-09-29 | 2013-02-26 | Fluke Corporation | Display adjustment features |
-
2014
- 2014-06-30 CN CN201410305947.3A patent/CN104049899B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2001005606A (en) * | 1999-06-18 | 2001-01-12 | Nec Eng Ltd | Mouse control system |
| CN102968913A (en) * | 2012-09-21 | 2013-03-13 | 无敌科技(西安)有限公司 | Visual association learning system and method for historical knowledge |
| CN104933224A (en) * | 2015-05-25 | 2015-09-23 | 国家电网公司 | Quick configurator of electronic equipment for intelligent substation |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104049899A (en) | 2014-09-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103631487B (en) | A kind of method and device of the configuration page | |
| KR101974695B1 (en) | Method and apparatus for displaying recommendation result | |
| CN105260170B (en) | A kind of accident deducing manoeuver method and system based on case | |
| CN106527892A (en) | Screen capture method and system for electronic device | |
| CN105426502A (en) | Social network based person information search and relational network drawing method | |
| CN104991898A (en) | Processing method and apparatus for pushing information | |
| CN105955935A (en) | Text control realization method and apparatus | |
| CN106354891A (en) | Geographic information service inquiring method based on TGIS (temporal geographic information system) | |
| CN105955888A (en) | Page debugging and previewing method and system | |
| CN106682329A (en) | Virtual sand table system and data processing method thereof | |
| CN106462828A (en) | Active summaries in user interfaces to collaboration services | |
| CN103618773B (en) | Display method, device and system for thermodynamic diagrams | |
| CN102999595B (en) | A kind of for providing method and the equipment of the accession page corresponding with page info | |
| CN107025037A (en) | A kind of control method and device of smart machine | |
| CN104268273B (en) | Processing method, device and browser, the browser plug-in of pushed information | |
| CN104765746A (en) | Data processing method and device for mobile communication terminal browser | |
| CN106468999A (en) | A kind of screenshotss method and system | |
| CN106484384A (en) | A kind of page animation methods of exhibiting and system | |
| CN110007842A (en) | Web page contents choosing method and device | |
| CN106201461A (en) | Generation method, system and the background server at a kind of interface | |
| CN104881201A (en) | Data display method and electronic equipment | |
| CN106993226A (en) | A kind of method and terminal of recommendation video | |
| CN110413765A (en) | A kind of interactive system and its method of mass data set analysis and displaying | |
| CN107220230A (en) | A kind of information collecting method and device, and a kind of intelligent terminal | |
| CN102929636A (en) | Method and device for creating human-computer interaction interface |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |