CN109710355A - TIP display content processing method, device and electronic equipment based on WEB interaction - Google Patents
TIP display content processing method, device and electronic equipment based on WEB interaction Download PDFInfo
- Publication number
- CN109710355A CN109710355A CN201811550058.8A CN201811550058A CN109710355A CN 109710355 A CN109710355 A CN 109710355A CN 201811550058 A CN201811550058 A CN 201811550058A CN 109710355 A CN109710355 A CN 109710355A
- Authority
- CN
- China
- Prior art keywords
- character
- width
- tip
- display content
- prompting frame
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Abstract
A kind of TIP display content processing method, device and electronic equipment based on WEB interaction is provided in the embodiment of the present invention, belong to technical field of data processing, this method comprises: including the display content in the overall width W for obtaining TIP prompting frame, first edge width W11, second edge width W12 and prompting frame；The character of the every row distribution of the TIP prompting frame is determined based on the display content in the overall width W, first edge width W11, second edge width W12 and prompting frame；Judge the whole story character in every line character with the presence or absence of not full occupy-place character；If it exists, then space width W2 caused by the not full placeholder is calculated, and redraws the TIP prompting frame using Canvas tool, shows that the display content again in the width range of W-W11-W12-W2.By the processing scheme of the application, keep the character arranging of TIP prompting frame more reasonable.
Description
Technical field
The present invention relates to technical field of data processing more particularly to a kind of TIP based on WEB interaction to show contents processing side
Method, device and electronic equipment.
Background technique
With the development of technology, information is carried out based on Web to propagate to have obtained more more applications.By browser into
After row information transmission, it will usually to some real-time or necessary progress TIP pop-up prompt by the way of prompting frame.Prompt
Show that content can be after user inputs keyword in the input frame in screen in frame, system can be prejudged according to the keyword
The possible object content of user, and the object content is shown to user in such a way that prompting frame shows content, in this way, to use
Family can be obtained by required as a result, effectively saving the time of user in turn inputting a small amount of text.Due to user's meeting
Different contents is often inputted, it, generally can be by multiple display contents in order to keep content recommended to the user more accurate or effective
It is pushed to user.
The middle prompting frame of the prior art is usually displayed on the corner location (for example, lower right corner) of screen, is limited by prompting frame
The lesser limitation of area, the character number that every row is shown in prompting frame is usually less, occurs when in the starting of prompting frame or end
After relatively narrow character, it will usually cause the display content of prompting frame to seem that typesetting is irregular.For example, to the left in Chinese character
Symbol ",；]".,！) " to the left during showing that content is rendered, there is most of white space, if leading to these symbols
End is appeared in, so that the visual white space of current line increases, by calculating, each character can save at least 1/2 control.
Similarly symbol to the right in Chinese character " [" (", which then belongs to left side, the remaining symbol of 1/2 control, so these symbols appear in
When the left side starts, left side has more remaining spaces.
It shows that content is usually automatic display, neat display mode is needed for complicated display content, if passing through hand
The mode of work is adjusted, then it is generally necessary to which multi-pass operation could be completed, complex steps, and real-time is poor, influences in display
The user experience of appearance.
Summary of the invention
In view of this, the embodiment of the present invention provide it is a kind of based on WEB interaction TIP display content processing method, device and
Electronic equipment, at least partly solution problems of the prior art.
In a first aspect, the embodiment of the invention provides a kind of TIP display content processing methods based on WEB interaction, comprising:
It obtains in overall width W, first edge width W11, second edge width W12 and the prompting frame of TIP prompting frame
Show content；
Based on the display content in the overall width W, first edge width W11, second edge width W12 and prompting frame
Determine the character of the every row distribution of the TIP prompting frame；
Judge the whole story character in every line character with the presence or absence of not full occupy-place character；
If it exists, then space width W2 caused by the not full placeholder is calculated, and redraws institute using Canvas tool
TIP prompting frame is stated, shows that the display content again in the width range of W-W11-W12-W2.
A kind of specific implementation according to an embodiment of the present invention, the overall width W for obtaining TIP prompting frame, first
Display content in border width W11, second edge width W12 and prompting frame, comprising:
Obtain the display time that the TIP shows content；
Before the display content, the CSS code that the TIP shows content is obtained in advance；
The Margin attribute that the display content is read in CSS code, determines the TIP based on the Margin attribute
Overall width W, the first edge width W11 and second edge width W12 of prompting frame.
A kind of specific implementation according to an embodiment of the present invention, it is described that the TIP is determined based on the Margin attribute
Overall width W, the first edge width W11 and second edge width W12 of prompting frame, comprising:
Judge the CSS code with the presence or absence of padding layers；
If it exists, then padding layers of the attribute setting is further read；
Based on padding layers of attribute setting and the Margin attribute, first edge width W11 and second is determined
Border width W12.
A kind of specific implementation according to an embodiment of the present invention, it is described to be based on the overall width W, first edge width
Display content in W11, second edge width W12 and prompting frame determines the character of the every row distribution of the TIP prompting frame, comprising:
From the width for obtaining each character in the display content in CSS code；
The alignment thereof of display content is obtained from the Margin attribute of the display content；
The character that should be distributed according to the width range that the width of the alignment thereof and each character calculates W-W11-W12
Number；
The character number of every row based on calculating sequentially determines the character of the every row distribution of the TIP prompting frame.
A kind of specific implementation according to an embodiment of the present invention, whether whole story character of the judgement in every line character
In the presence of not full occupy-place character, comprising:
Obtain the character of the every row distribution of the TIP prompting frame and the Margin attribute of the display content；
In the case where the Margin attribute left-justify, further judge in the display content in the last character of every row
With the presence or absence of half occupy-place character；
If it exists, then assert that the last character in the line character is not full occupy-place character.
A kind of specific implementation according to an embodiment of the present invention, whether whole story character of the judgement in every line character
In the presence of not full occupy-place character, further includes:
In the case where the Margin attribute Right Aligns, further judge in the display content in the beginning character of every row
With the presence or absence of half occupy-place character；
If it exists, then assert that the beginning character in the line character is not full occupy-place character
A kind of specific implementation according to an embodiment of the present invention, it is described to redraw the TIP prompt using Canvas tool
Frame, comprising:
Obtain the display width that CSS code is the not full placeholder distribution；
It is pre- whether the ratio of the display width and the display width of saturation placeholder that judge the not full placeholder is less than
If threshold value；
If so, using the difference of the display width of the display width and not full placeholder that are saturated placeholder as W2.
A kind of specific implementation according to an embodiment of the present invention, it is described to redraw the TIP prompt using Canvas tool
Frame, further includes:
ID by obtaining the display content is that Canvas element obtains DOM object；
The context of the display content is drawn based on the DOM object；
Based on the Margin attribute in the CSS code, the borderline properties of the display area are determined；
Judge whether the display content loads completion, if so, in the width range of W-W11-W12-W2, using drawing
Function processed draws the display content within the borderline properties.
Second aspect, the embodiment of the invention provides a kind of TIP based on WEB interaction to show content processing apparatus, comprising:
Module is obtained, for obtaining the overall width W, first edge width W11, second edge width W12 of TIP prompting frame
And the display content in prompting frame；
Determining module, for being based on the overall width W, first edge width W11, second edge width W12 and prompt
Display content in frame determines the character of the every row distribution of the TIP prompting frame；
Judgment module, for judging the whole story character in every line character with the presence or absence of not full occupy-place character；
Drafting module, when for the whole story character in every line character with the presence or absence of not full occupy-place character, described in calculating
Space width W2 caused by not full placeholder, and the TIP prompting frame is redrawn using Canvas tool, make the display content
It is shown again in the width range of W-W11-W12-W2.
The third aspect, the embodiment of the invention also provides a kind of electronic equipment, which includes:
At least one processor；And
The memory being connect at least one processor communication；Wherein,
The memory is stored with the instruction that can be executed by least one processor, and the instruction is by least one processor
It executes, so that at least one processor is able to carry out the base in any implementation of aforementioned first aspect or first aspect
In the TIP display content processing method of WEB interaction.
Fourth aspect, the embodiment of the invention also provides a kind of non-transient computer readable storage medium, the non-transient meters
Calculation machine readable storage medium storing program for executing stores computer instruction, and the computer instruction is for making the computer execute aforementioned first aspect or the
The TIP display content processing method based on WEB interaction in any implementation of one side.
5th aspect, the embodiment of the invention also provides a kind of computer program product, which includes
The calculation procedure being stored in non-transient computer readable storage medium, the computer program include program instruction, when the program
Instruction is when being computer-executed, make the computer execute in aforementioned first aspect or any implementation of first aspect based on
The TIP display content processing method of WEB interaction.
The TIP based on WEB interaction in the embodiment of the present invention shows contents processing scheme, including obtaining TIP prompting frame
Display content in overall width W, first edge width W11, second edge width W12 and prompting frame；Based on described whole wide
Display content in degree W, first edge width W11, second edge width W12 and prompting frame determines the every row of TIP prompting frame
The character of distribution；Judge the whole story character in every line character with the presence or absence of not full occupy-place character；If it exists, then described in calculating
Space width W2 caused by not full placeholder, and the TIP prompting frame is redrawn using Canvas tool, make the display content
It is shown again in the width range of W-W11-W12-W2.By the processing scheme of the application, make the character arranging of TIP prompting frame
More rationally.
Detailed description of the invention
In order to illustrate the technical solution of the embodiments of the present invention more clearly, below will be to needed in the embodiment attached
Figure is briefly described, it should be apparent that, drawings in the following description are only some embodiments of the invention, for this field
For those of ordinary skill, without creative efforts, it can also be obtained according to these attached drawings other attached drawings.
Fig. 1 is that a kind of TIP based on WEB interaction provided in an embodiment of the present invention shows contents processing flow diagram；
Fig. 2 is that another TIP based on WEB interaction provided in an embodiment of the present invention shows contents processing flow diagram；
Fig. 3 is that another TIP based on WEB interaction provided in an embodiment of the present invention shows contents processing flow diagram；
Fig. 4 is that another TIP based on WEB interaction provided in an embodiment of the present invention shows contents processing flow diagram；
Fig. 5 is that the TIP provided in an embodiment of the present invention based on WEB interaction shows content processing apparatus structural schematic diagram；
Fig. 6 is electronic equipment schematic diagram provided in an embodiment of the present invention.
Specific embodiment
The embodiment of the present invention is described in detail with reference to the accompanying drawing.
Illustrate embodiment of the present disclosure below by way of specific specific example, those skilled in the art can be by this specification
Disclosed content understands other advantages and effect of the disclosure easily.Obviously, described embodiment is only the disclosure
A part of the embodiment, instead of all the embodiments.The disclosure can also be subject to reality by way of a different and different embodiment
It applies or applies, the various details in this specification can also be based on different viewpoints and application, in the spirit without departing from the disclosure
Lower carry out various modifications or alterations.It should be noted that in the absence of conflict, the feature in following embodiment and embodiment can
To be combined with each other.Based on the embodiment in the disclosure, those of ordinary skill in the art are without creative efforts
Every other embodiment obtained belongs to the range of disclosure protection.
It should be noted that the various aspects of embodiment within the scope of the appended claims are described below.Ying Xian
And be clear to, aspect described herein can be embodied in extensive diversified forms, and any specific structure described herein
And/or function is only illustrative.Based on the disclosure, it will be understood by one of ordinary skill in the art that one described herein
Aspect can be independently implemented with any other aspect, and can combine the two or both in these aspects or more in various ways.
For example, carry out facilities and equipments in terms of any number set forth herein can be used and/or practice method.In addition, can make
With other than one or more of aspect set forth herein other structures and/or it is functional implement this equipment and/or
Practice the method.
It should also be noted that, diagram provided in following embodiment only illustrates the basic structure of the disclosure in a schematic way
Think, component count, shape and the size when only display is with component related in the disclosure rather than according to actual implementation in schema are drawn
System, when actual implementation kenel, quantity and the ratio of each component can arbitrarily change for one kind, and its assembly layout kenel can also
It can be increasingly complex.
In addition, in the following description, specific details are provided for a thorough understanding of the examples.However, fields
The skilled person will understand that the aspect can be practiced without these specific details.
The embodiment of the present disclosure provides a kind of TIP display content processing method based on WEB interaction.Base provided in this embodiment
It can be executed by a computing device in the TIP display content processing method of WEB interaction, which can be implemented as soft
Part, or it is embodied as the combination of software and hardware, which, which can integrate, is arranged in server, terminal device etc..
Referring to Fig. 1, a kind of TIP display content processing method based on WEB interaction provided in an embodiment of the present invention, including such as
Lower step:
S101 obtains overall width W, first edge width W11, second edge width W12 and the prompting frame of TIP prompting frame
In display content.
The specific size setting of TIP prompting frame is generally from the setting at WEB interactive server end, the WEB of client
Interaction end (for example, browser) can to server end send inquiry request, server end be based on the inquiry request, issue with
The relevant interior perhaps information of TIP prompting frame.
Display content in TIP prompting frame is issued and is shown according to certain strategy, in order to be shown in display content
Before showing, so that it may which the content timely adjusted in TIP display box can shift to an earlier date to server end as an implementation
Request of data is sent, the display time that the TIP shows content is obtained.It, can be described aobvious after obtaining the display time
Before showing content, the CSS code that the TIP shows content is obtained in advance.
In order to guarantee to show that the style of content is consistent, the format of display content, including prompting frame can be defined in CSS code
Width information including attribute be also defined in CSS code.So, institute can be read in CSS code
The Margin attribute for stating display content, overall width W, the first side of the TIP prompting frame are determined based on the Margin attribute
Edge width W11 and second edge width W12.It is defined specifically, first edge width W11 can be Margin in TIP prompting frame
Left side blank space, second edge width W12 can be the right side blank distance that Margin in TIP prompting frame is defined.
Other than Margin will affect the arrangement of display content, the padding layers of layout for also influencing whether to show content,
It needs to judge thus to show in the corresponding CSS code of content with the presence or absence of padding layers, and if it exists, described in then further reading
Padding layers of attribute setting, and based on padding layers of attribute setting and the Margin attribute, determine the first side
Edge width W11 and second edge width W12.Specifically, left side blank space defined in Margin can be added padding
Defined in left side the sum of blank space be used as first edge width W11, right side blank distance defined in Margin is added
Right side blank sum of the distance defined in padding is as second edge width W12.
S102, based on aobvious in the overall width W, first edge width W11, second edge width W12 and prompting frame
Show that content determines the character of the every row distribution of the TIP prompting frame.
Obtain display content in overall width W, first edge width W11, second edge width W12 and prompting frame it
Afterwards, the character of every row distribution in TIP prompting frame can be determined based on above content.
Specifically, can be using W-W11-W12 as the display width of display content.In order to calculate energy in this display width
How many character are put into, the width (for example, 12px) of each character in the display content can be obtained from CSS code.Except this
Except, it is also necessary to the alignment thereof of display content is obtained from the Margin attribute of the display content, and from different alignment sides
It searches whether to need to carry out first trip retraction in formula, first trip is retracted if it exists, then needs further to obtain the indent of first trip retraction.
After through the above steps, W-W11-W12 can be calculated according to the width of the alignment thereof and each character
The character number that should be distributed of width range.Once it is determined that the character number of every row based on calculating, it can be according to elder generation
Every row of the sequence in TIP prompting frame fills different characters afterwards.
S103 judges the whole story character in every line character with the presence or absence of not full occupy-place character.
It is limited by the lesser limitation of prompting frame area, the character number that every row is shown in prompting frame is usually less, works as prompt
After occurring relatively narrow character in the starting of frame or end, it will usually the display content of prompting frame be caused to seem that typesetting is not whole
Together.For example, symbol to the left in Chinese character ",；]".,！) " to the left during showing that content is rendered, there is most of blank
Region, if these symbols is caused to appear in end, so that the visual white space of current line increases, and by calculating, each word
Symbol can save at least 1/2 control.Similarly symbol to the right in Chinese character " [" (", which then belongs to left side, has 1/2 control remaining
Symbol, so left side has more remaining spaces when these symbols appear in left side beginning.
In order to overcome above-mentioned deficiency, the character and the display content that the every row of the TIP prompting frame is distributed can be first obtained
Margin attribute, pass through different Margin attributes, it can be determined that every line character is left-justify or Right Aligns, thus into one
Step judges that the last character of every row is in Left or right.
In actual application, not full occupy-place character is usually half occupy-place character, i.e. character actually only needs half
The width of normal character, but actually occupy the width of a complete character.If not full character bit is in the whole story of every row
Position, it is likely that will affect the beauty of whole display content.In this regard, in the case where the Margin attribute left-justify, into
One step judges to whether there is half occupy-place character in the last character of every row in the display content, and if it exists, then assert the line character
In last character be not full occupy-place character.In the case where the Margin attribute Right Aligns, the display is further judged
It whether there is half occupy-place character in content in the beginning character of every row；If it exists, then assert that the beginning character in the line character is insatiable hunger
Full occupy-place character.
S104, and if it exists, then calculate space width W2 caused by the not full placeholder, and use Canvas tool weight
The TIP prompting frame is drawn, shows that the display content again in the width range of W-W11-W12-W2.
When display content is according to preset CSS layout pattern, will form the whole story not full placeholder when, just need to count at this time
Space width W2 caused by the not full placeholder is calculated, can obtain CSS code first is the not full placeholder distribution
Display width, next judge that the ratio of the display width and the display width of full placeholder of the not full placeholder is
It is no to be less than preset threshold (for example, 50%), if ratio is less than preset threshold, it is less to illustrate that not full placeholder can occupy
Width, at this time can be using the difference of the display width of full placeholder and the display width of not full placeholder as W2.
In order to quickly draw the display content in TIP prompting frame adjusted, can using Canvas tool come
It carries out drawing display content.During drafting, first choice is by obtaining the ID of the display content as the acquisition of Canvas element
DOM object draws the context of the display content based on the DOM object again later.In addition to this, it is also necessary to be based on institute
The Margin attribute in CSS code is stated, determines the borderline properties (for example, width is 1px) of the display area.Complete above-mentioned standard
After standby, can judge whether the display content of TIP display box is in Loading opportunity, if display content be in Loading opportunity and
Display content has loaded completion, then in the width range of W-W11-W12-W2, using drafting function in the borderline properties
Within draw the display content.
Various ways can be taken to obtain the parameter of TIP prompting frame, referring to fig. 2, one kind according to an embodiment of the present invention
Specific implementation, step S101 obtain overall width W, first edge width W11, the second edge width W12 of TIP prompting frame
And the display content in prompting frame, may include:
S201 obtains the display time that the TIP shows content.
Display content in TIP prompting frame is issued and is shown according to certain strategy, in order to be shown in display content
Before showing, so that it may timely adjust the content in TIP display box, can shift to an earlier date to server end and send request of data, in turn
Obtain the display time of the display content.
S202 obtains the CSS code that the TIP shows content before the display content in advance.
After obtaining the display time, it can obtain in advance the TIP before the display content and show content
CSS code.
S203 reads the Margin attribute of the display content in CSS code, determines institute based on the Margin attribute
State overall width W, the first edge width W11 and second edge width W12 of TIP prompting frame.
In order to guarantee to show that the style of content is consistent, the format of display content, including prompting frame can be defined in CSS code
Width information including attribute be also defined in CSS code.So, institute can be read in CSS code
The Margin attribute for stating display content, overall width W, the first side of the TIP prompting frame are determined based on the Margin attribute
Edge width W11 and second edge width W12.It is defined specifically, first edge width W11 can be Margin in TIP prompting frame
Left side blank space, second edge width W12 can be the right side blank distance that Margin in TIP prompting frame is defined.
Wherein, a kind of specific implementation according to an embodiment of the present invention, it is true that step S203 is based on the Margin attribute
Overall width W, the first edge width W11 and second edge width W12 of the fixed TIP prompting frame can also include following step
It is rapid:
S2031 judges the CSS code with the presence or absence of padding layers；
S2032, and if it exists, then further read padding layers of the attribute setting；
S2033 determines first edge width W11 based on padding layers of attribute setting and the Margin attribute
And second edge width W12.
Other than Margin will affect the arrangement of display content, the padding layers of layout for also influencing whether to show content,
It needs to judge thus to show in the corresponding CSS code of content with the presence or absence of padding layers, and if it exists, described in then further reading
Padding layers of attribute setting, and based on padding layers of attribute setting and the Margin attribute, determine the first side
Edge width W11 and second edge width W12.Specifically, left side blank space defined in Margin can be added padding
Defined in left side the sum of blank space be used as first edge width W11, right side blank distance defined in Margin is added
Right side blank sum of the distance defined in padding is as second edge width W12.
Referring to Fig. 3, a kind of specific implementation according to an embodiment of the present invention, step S102 be based on the overall width W,
Display content in first edge width W11, second edge width W12 and prompting frame determines the every row distribution of the TIP prompting frame
Character, may include:
S301, from the width for obtaining each character in the display content in CSS code.
Obtain display content in overall width W, first edge width W11, second edge width W12 and prompting frame it
Afterwards, the character of every row distribution in TIP prompting frame can be determined based on above content.It can be using W-W11-W12 as display
The display width of content.It can be put into how many character in this display width in order to calculate, can be obtained from CSS code described aobvious
Show the width (for example, 12px) of each character in content.
S302 obtains the alignment thereof of display content from the Margin attribute of the display content.
The alignment thereof of display content is obtained from the Margin attribute of the display content, and from different alignment thereofs
It searches whether to need to carry out first trip retraction, first trip is retracted if it exists, then needs further to obtain the indent of first trip retraction.
S303 should be distributed according to the width range that the width of the alignment thereof and each character calculates W-W11-W12
Character number.
The width model of W-W11-W12 can be calculated according to the width of the alignment thereof and each character that determine in step S302
Enclose the character number that should be distributed.For example, first trip retraction is 12px, the width of each character is 12px, W 180px, W11 and
W12 is 12px, then the number of characters of every row distribution is (180-12-12-12)/15=12.
S304, the character number of every row based on calculating sequentially determine the character of the every row distribution of the TIP prompting frame.
Once it is determined that the character number of every row based on calculating, it can according to sequencing in TIP prompting frame
Every row fills different characters.
Referring to fig. 4, a kind of specific implementation according to an embodiment of the present invention, the use Canvas tool redraw described
TIP prompting frame may include:
S401 obtains the display width that CSS code is the not full placeholder distribution.
S402 judges whether the ratio of the display width and the display width of full placeholder of the not full placeholder is small
In preset threshold.
When display content is according to preset CSS layout pattern, will form the whole story not full placeholder when, just need to count at this time
Space width W2 caused by the not full placeholder is calculated, can obtain CSS code first is the not full placeholder distribution
Display width, next judge that the ratio of the display width and the display width of full placeholder of the not full placeholder is
It is no to be less than preset threshold (for example, 50%).
S403, if so, using the difference of the display width of full placeholder and the display width of not full placeholder as
W2。
If ratio is less than preset threshold, illustrates that not full placeholder can occupy less width, can will satisfy at this time
The difference of the display width of the display width and not full placeholder of full placeholder is as W2.
Optionally, step S403 redraws the TIP prompting frame using Canvas tool, may include:
S4031, the ID by obtaining the display content are that Canvas element obtains DOM object；
S4032 draws the context of the display content based on the DOM object；
S4033 determines the borderline properties of the display area based on the Margin attribute in the CSS code；
S4034, judges whether the display content loads completion,
S4035, if so, in the width range of W-W11-W12-W2, using drafting function the borderline properties it
It is interior to draw the display content.
Corresponding with above method embodiment, referring to Fig. 5, the embodiment of the invention also provides one kind based on WEB interaction
TIP show content processing apparatus 50, comprising:
Module 501 is obtained, for obtaining overall width W, the first edge width W11, second edge width of TIP prompting frame
Display content in W12 and prompting frame.
Determining module 502, for being based on the overall width W, first edge width W11, second edge width W12 and mentioning
Show that the display content in frame determines the character of the every row distribution of the TIP prompting frame.
Judgment module 503, for judging the whole story character in every line character with the presence or absence of not full occupy-place character.
Drafting module 504 calculates institute when for the whole story character in every line character with the presence or absence of not full occupy-place character
Space width W2 caused by not full placeholder is stated, and redraws the TIP prompting frame using Canvas tool, is made in the display
Appearance is shown again in the width range of W-W11-W12-W2.
Fig. 5 shown device can it is corresponding execute above method embodiment in content, what the present embodiment was not described in detail
Part, referring to the content recorded in above method embodiment, details are not described herein.
Referring to Fig. 6, the embodiment of the invention also provides a kind of electronic equipment 60, which includes:
At least one processor；And
The memory being connect at least one processor communication；Wherein,
The memory is stored with the instruction that can be executed by least one processor, and the instruction is by least one processor
It executes, so that at least one processor is able to carry out the TIP based on WEB interaction in preceding method embodiment and shows contents processing
Method.
The embodiment of the invention also provides a kind of non-transient computer readable storage medium, the non-transient computer is readable to be deposited
Storage media stores computer instruction, and the computer instruction is for executing the computer in preceding method embodiment.
The embodiment of the invention also provides a kind of computer program product, the computer program product is non-temporary including being stored in
Calculation procedure on state computer readable storage medium, the computer program include program instruction, when the program instruction is calculated
When machine executes, the computer is made to execute the TIP display content processing method based on WEB interaction in preceding method embodiment.
Below with reference to Fig. 6, it illustrates the structural schematic diagrams for the electronic equipment 60 for being suitable for being used to realize the embodiment of the present disclosure.
Electronic equipment in the embodiment of the present disclosure can include but is not limited to such as mobile phone, laptop, Digital Broadcasting Receiver
Device, PDA (personal digital assistant), PAD (tablet computer), PMP (portable media player), car-mounted terminal are (such as vehicle-mounted
Navigation terminal) etc. mobile terminal and such as number TV, desktop computer etc. fixed terminal.Electronics shown in Fig. 6
Equipment is only an example, should not function to the embodiment of the present disclosure and use scope bring any restrictions.
As shown in fig. 6, electronic equipment 60 may include processing unit (such as central processing unit, graphics processor etc.) 601,
It can be loaded into random access storage according to the program being stored in read-only memory (ROM) 602 or from storage device 608
Program in device (RAM) 603 and execute various movements appropriate and processing.In RAM 603, it is also stored with the behaviour of electronic equipment 60
Various programs and data needed for making.Processing unit 601, ROM 602 and RAM 603 are connected with each other by bus 604.It is defeated
Enter/export (I/O) interface 605 and is also connected to bus 604.
In general, following device can connect to I/O interface 605: including such as touch screen, touch tablet, keyboard, mouse, figure
As the input unit 606 of sensor, microphone, accelerometer, gyroscope etc.；Including such as liquid crystal display (LCD), loudspeaking
The output device 607 of device, vibrator etc.；Storage device 608 including such as tape, hard disk etc.；And communication device 609.It is logical
T unit 609 can permit electronic equipment 60 and wirelessly or non-wirelessly be communicated with other equipment to exchange data.Although showing in figure
The electronic equipment 60 with various devices is gone out, it should be understood that being not required for implementing or having all devices shown.
It can alternatively implement or have more or fewer devices.
Particularly, in accordance with an embodiment of the present disclosure, it may be implemented as computer above with reference to the process of flow chart description
Software program.For example, embodiment of the disclosure includes a kind of computer program product comprising be carried on computer-readable medium
On computer program, which includes the program code for method shown in execution flow chart.In such reality
It applies in example, which can be downloaded and installed from network by communication device 609, or from storage device 608
It is mounted, or is mounted from ROM 602.When the computer program is executed by processing unit 601, the embodiment of the present disclosure is executed
Method in the above-mentioned function that limits.
It should be noted that the above-mentioned computer-readable medium of the disclosure can be computer-readable signal media or meter
Calculation machine readable storage medium storing program for executing either the two any combination.Computer readable storage medium for example can be --- but not
Be limited to --- electricity, magnetic, optical, electromagnetic, infrared ray or semiconductor system, device or device, or any above combination.Meter
The more specific example of calculation machine readable storage medium storing program for executing can include but is not limited to: have the electrical connection, just of one or more conducting wires
Taking formula computer disk, hard disk, random access storage device (RAM), read-only memory (ROM), erasable type may be programmed read-only storage
Device (EPROM or flash memory), optical fiber, portable compact disc read-only memory (CD-ROM), light storage device, magnetic memory device,
Or above-mentioned any appropriate combination.In the disclosure, computer readable storage medium can be it is any include or storage journey
The tangible medium of sequence, the program can be commanded execution system, device or device use or in connection.And at this
In open, computer-readable signal media may include in a base band or as the data-signal that carrier wave a part is propagated,
In carry computer-readable program code.The data-signal of this propagation can take various forms, including but not limited to
Electromagnetic signal, optical signal or above-mentioned any appropriate combination.Computer-readable signal media can also be computer-readable and deposit
Any computer-readable medium other than storage media, the computer-readable signal media can send, propagate or transmit and be used for
By the use of instruction execution system, device or device or program in connection.Include on computer-readable medium
Program code can transmit with any suitable medium, including but not limited to: electric wire, optical cable, RF (radio frequency) etc. are above-mentioned
Any appropriate combination.
Above-mentioned computer-readable medium can be included in above-mentioned electronic equipment；It is also possible to individualism, and not
It is fitted into the electronic equipment.
Above-mentioned computer-readable medium carries one or more program, when said one or multiple programs are by the electricity
When sub- equipment executes, so that the electronic equipment: obtaining at least two internet protocol addresses；Send to Node evaluation equipment includes institute
State the Node evaluation request of at least two internet protocol addresses, wherein the Node evaluation equipment is internet from described at least two
In protocol address, chooses internet protocol address and return；Receive the internet protocol address that the Node evaluation equipment returns；Its
In, the fringe node in acquired internet protocol address instruction content distributing network.
Alternatively, above-mentioned computer-readable medium carries one or more program, when said one or multiple programs
When being executed by the electronic equipment, so that the electronic equipment: receiving the Node evaluation including at least two internet protocol addresses and request；
From at least two internet protocol address, internet protocol address is chosen；Return to the internet protocol address selected；Wherein,
The fringe node in internet protocol address instruction content distributing network received.
The calculating of the operation for executing the disclosure can be write with one or more programming languages or combinations thereof
Machine program code, above procedure design language include object oriented program language-such as Java, Smalltalk, C+
+, it further include conventional procedural programming language-such as " C " language or similar programming language.Program code can
Fully to execute, partly execute on the user computer on the user computer, be executed as an independent software package,
Part executes on the remote computer or executes on a remote computer or server completely on the user computer for part.
In situations involving remote computers, remote computer can pass through the network of any kind --- including local area network (LAN)
Or wide area network (WAN)-is connected to subscriber computer, or, it may be connected to outer computer (such as utilize Internet service
Provider is connected by internet).
Flow chart and block diagram in attached drawing are illustrated according to the system of the various embodiments of the disclosure, method and computer journey
The architecture, function and operation in the cards of sequence product.In this regard, each box in flowchart or block diagram can generation
A part of one module, program segment or code of table, a part of the module, program segment or code include one or more use
The executable instruction of the logic function as defined in realizing.It should also be noted that in some implementations as replacements, being marked in box
The function of note can also occur in a different order than that indicated in the drawings.For example, two boxes succeedingly indicated are actually
It can be basically executed in parallel, they can also be executed in the opposite order sometimes, and this depends on the function involved.Also it to infuse
Meaning, the combination of each box in block diagram and or flow chart and the box in block diagram and or flow chart can be with holding
The dedicated hardware based system of functions or operations as defined in row is realized, or can use specialized hardware and computer instruction
Combination realize.
Being described in unit involved in the embodiment of the present disclosure can be realized by way of software, can also be by hard
The mode of part is realized.Wherein, the title of unit does not constitute the restriction to the unit itself under certain conditions, for example, the
One acquiring unit is also described as " obtaining the unit of at least two internet protocol addresses ".
It should be appreciated that each section of the invention can be realized with hardware, software, firmware or their combination.
The above description is merely a specific embodiment, but scope of protection of the present invention is not limited thereto, any
In the technical scope disclosed by the present invention, any changes or substitutions that can be easily thought of by those familiar with the art, all answers
It is included within the scope of the present invention.Therefore, protection scope of the present invention should be subject to the protection scope in claims.
Claims (11)
1. a kind of TIP display content processing method based on WEB interaction characterized by comprising
Obtain the display in overall width W, first edge width W11, second edge width W12 and the prompting frame of TIP prompting frame
Content；
It is determined based on the display content in the overall width W, first edge width W11, second edge width W12 and prompting frame
The character of the every row distribution of TIP prompting frame；
Judge the whole story character in every line character with the presence or absence of not full occupy-place character；
If it exists, then space width W2 caused by the not full placeholder is calculated, and redraws the TIP using Canvas tool
Prompting frame shows that the display content again in the width range of W-W11-W12-W2.
2. the method according to claim 1, wherein the overall width W for obtaining TIP prompting frame, the first side
Display content in edge width W11, second edge width W12 and prompting frame, comprising:
Obtain the display time that the TIP shows content；
Before the display content, the CSS code that the TIP shows content is obtained in advance；
The Margin attribute that the display content is read in CSS code determines that the TIP is prompted based on the Margin attribute
Overall width W, the first edge width W11 and second edge width W12 of frame.
3. according to the method described in claim 2, it is characterized in that, described determine that the TIP is mentioned based on the Margin attribute
Show overall width W, the first edge width W11 and second edge width W12 of frame, comprising:
Judge the CSS code with the presence or absence of padding layers；
If it exists, then padding layers of the attribute setting is further read；
Based on padding layers of attribute setting and the Margin attribute, first edge width W11 and second edge are determined
Width W12.
4. the method according to claim 1, wherein described be based on the overall width W, first edge width
Display content in W11, second edge width W12 and prompting frame determines the character of the every row distribution of the TIP prompting frame, comprising:
From the width for obtaining each character in the display content in CSS code；
The alignment thereof of display content is obtained from the Margin attribute of the display content；
The character that should be distributed according to the width range that the width of the alignment thereof and each character calculates W-W11-W12
Number；
The character number of every row based on calculating sequentially determines the character of the every row distribution of the TIP prompting frame.
5. the method according to claim 1, wherein whether whole story character of the judgement in every line character is deposited
In not full occupy-place character, comprising:
Obtain the character of the every row distribution of the TIP prompting frame and the Margin attribute of the display content；
In the case where the Margin attribute left-justify, further judge it is described display content in every row last character in whether
There are half occupy-place characters；
If it exists, then assert that the last character in the line character is not full occupy-place character.
6. according to the method described in claim 5, it is characterized in that, whether whole story character of the judgement in every line character is deposited
In not full occupy-place character, further includes:
In the case where the Margin attribute Right Aligns, further judge it is described display content in every row beginning character in whether
There are half occupy-place characters；
If it exists, then assert that the beginning character in the line character is not full occupy-place character.
7. the method according to claim 1, wherein described redraw the TIP prompting frame using Canvas tool,
Include:
Obtain the display width that CSS code is the not full placeholder distribution；
Judge whether the display width of the not full placeholder and the ratio of the display width of saturation placeholder are less than default threshold
Value；
If so, using the difference of the display width of the display width and not full placeholder that are saturated placeholder as W2, and be based on
W2 redraws the TIP prompting frame.
8. the method according to the description of claim 7 is characterized in that described redraw the TIP prompting frame based on W2, comprising:
ID by obtaining the display content is that Canvas element obtains DOM object；
The context of the display content is drawn based on the DOM object；
Based on the Margin attribute in the CSS code, the borderline properties of the display area are determined；
Judge whether the display content loads completion, if so, using drafting letter in the width range of W-W11-W12-W2
Number draws the display content within the borderline properties.
9. a kind of TIP based on WEB interaction shows content processing apparatus characterized by comprising
Module is obtained, for obtaining the overall width W of TIP prompting frame, first edge width W11, second edge width W12 and mentioning
Show the display content in frame；
Determining module, for based in the overall width W, first edge width W11, second edge width W12 and prompting frame
Display content determine the character of the TIP prompting frame every row distribution；
Judgment module, for judging the whole story character in every line character with the presence or absence of not full occupy-place character；
Drafting module calculates the insatiable hunger when for the whole story character in every line character with the presence or absence of not full occupy-place character
Space width W2 caused by full placeholder, and the TIP prompting frame is redrawn using Canvas tool, make the display content in W-
It is shown again in the width range of W11-W12-W2.
10. a kind of electronic equipment, which is characterized in that the electronic equipment includes:
At least one processor；And
The memory being connect at least one described processor communication；Wherein,
The memory is stored with the instruction that can be executed by least one described processor, and described instruction is by described at least one
It manages device to execute, so that at least one described processor is able to carry out described in aforementioned any claim 1-8 based on WEB interaction
TIP display content processing method.
11. a kind of non-transient computer readable storage medium, which stores computer instruction,
The computer instruction be used for make the computer execute described in aforementioned any claim 1-8 based on WEB interaction TIP show in
Content processing method.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811550058.8A CN109710355B (en) | 2018-12-18 | 2018-12-18 | WEB interaction-based TIP display content processing method and device and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811550058.8A CN109710355B (en) | 2018-12-18 | 2018-12-18 | WEB interaction-based TIP display content processing method and device and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109710355A true CN109710355A (en) | 2019-05-03 |
| CN109710355B CN109710355B (en) | 2020-01-10 |
Family
ID=66256740
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811550058.8A Active CN109710355B (en) | 2018-12-18 | 2018-12-18 | WEB interaction-based TIP display content processing method and device and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109710355B (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120167074A1 (en) * | 2010-12-24 | 2012-06-28 | Microsoft Corporation | On-demand or incremental remote data copy |
| CN104808941A (en) * | 2015-03-30 | 2015-07-29 | 魏新成 | Method and system for displaying and inputting first-spelling predication sentence by one-time skip |
| CN105723358A (en) * | 2013-09-12 | 2016-06-29 | 维克斯网有限公司 | System and method for automated conversion of interactive sites and applications to support mobile and other display environments |
| CN105893005A (en) * | 2015-01-26 | 2016-08-24 | 惠州市德赛西威汽车电子股份有限公司 | Method for realizing button prompt box in display screen |
| CN107133204A (en) * | 2017-04-19 | 2017-09-05 | 福建江夏学院 | A kind of terminal shortcut input method |
| US9805511B2 (en) * | 2015-10-21 | 2017-10-31 | International Business Machines Corporation | Interacting with data fields on a page using augmented reality |
| CN107885715A (en) * | 2017-11-23 | 2018-04-06 | 掌阅科技股份有限公司 | Composition method, electronic equipment and the computer-readable storage medium of code information |
-
2018
- 2018-12-18 CN CN201811550058.8A patent/CN109710355B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120167074A1 (en) * | 2010-12-24 | 2012-06-28 | Microsoft Corporation | On-demand or incremental remote data copy |
| CN105723358A (en) * | 2013-09-12 | 2016-06-29 | 维克斯网有限公司 | System and method for automated conversion of interactive sites and applications to support mobile and other display environments |
| CN105893005A (en) * | 2015-01-26 | 2016-08-24 | 惠州市德赛西威汽车电子股份有限公司 | Method for realizing button prompt box in display screen |
| CN104808941A (en) * | 2015-03-30 | 2015-07-29 | 魏新成 | Method and system for displaying and inputting first-spelling predication sentence by one-time skip |
| US9805511B2 (en) * | 2015-10-21 | 2017-10-31 | International Business Machines Corporation | Interacting with data fields on a page using augmented reality |
| CN107133204A (en) * | 2017-04-19 | 2017-09-05 | 福建江夏学院 | A kind of terminal shortcut input method |
| CN107885715A (en) * | 2017-11-23 | 2018-04-06 | 掌阅科技股份有限公司 | Composition method, electronic equipment and the computer-readable storage medium of code information |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109710355B (en) | 2020-01-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10878175B2 (en) | Portlet display on portable computing devices | |
| CA2922060C (en) | Swipe toolbar to switch tabs | |
| CN110109670B (en) | Method and device for processing view list data, electronic equipment and storage medium | |
| CN102200880B (en) | graph display apparatus and graph display method | |
| CN109542578A (en) | A kind of display methods of list interface, device, equipment and storage medium | |
| CN109543162A (en) | More diagrammatic representation method, apparatus, computer equipment and the storage medium of data | |
| US9323436B2 (en) | Utilizing drawing guides in determining the display of smart guides in a drawing program | |
| CN109460233A (en) | Primary interface display update method, device, terminal device and the medium of the page | |
| CN109491742A (en) | Page tabular rendering method and device | |
| CN109710865A (en) | Open autoplacement method, device, electronic equipment and storage medium | |
| CN109783101A (en) | The page layout method and device of browser automatic adaptation | |
| CN110188299A (en) | Response type page processing method, device and electronic equipment | |
| CN109684565A (en) | The generation of Webpage correlation video and methods of exhibiting, device, system and electronic equipment | |
| CN108255900A (en) | Recommend news rendering method, equipment, browser and electronic equipment | |
| CN108089858B (en) | Method and device for creating visual interface | |
| CN109446503A (en) | Document content deriving method and device | |
| CN104020934A (en) | Paging control implementation method and device | |
| CN109389365A (en) | Processing method, device and the electronic equipment of multiple person cooperational formula document | |
| CN109684570A (en) | Web information processing method and device | |
| CN109492163A (en) | A kind of recording method, device, terminal device and storage medium that list is shown | |
| CN109710355A (en) | TIP display content processing method, device and electronic equipment based on WEB interaction | |
| CN109460543A (en) | A kind of input method of logical expression, device, electronic equipment and readable medium | |
| CN109739595A (en) | TIP display content processing method, device and electronic equipment based on WEB interaction | |
| CN113010582A (en) | Data processing method and device, computer readable medium and electronic equipment | |
| CN109669589A (en) | Document edit method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder |