A label display method, apparatus, and computing device

Abstract

The application discloses a label display method and device and a computing device, relates to the technical field of webpage generation, and aims to solve the problems of poor visual effect and poor webpage performance of the existing browser page label display method. The method comprises the following steps: in response to a change in a browser window, obtaining original label data of the browser; calculating the width of a parent container of the label; calculating the number of labels that can be accommodated by the parent container according to the original label data and the width of the parent container; and rendering and displaying the labels that can be accommodated by the parent container according to the number of labels that can be accommodated by the parent container. The application can neither limit the amount of label description content nor avoid unnecessary label traversal and rendering, and can also satisfy the display of a proper number of labels according to different screen sizes, so that the display effect and the webpage performance are optimized.

Description

Technical Field

[0001] This invention relates to the field of web page generation technology, and in particular to a tag display method, apparatus, and computing device. Background Technology

[0002] Web pages are the basic elements of a website, serving as a platform for various website applications. Simply put, a website is made up of web pages, so the browsing experience is extremely important; it's the face of a website, the first impression it gives to visitors. Therefore, web page development should proceed from specific details to the overall picture, ensuring a good visual and operational experience. In today's information age, with various communication devices and browsers, web page code design faces a significant challenge. Web designers not only need to consider browser compatibility with hardware devices but also how well the display adapts to different browsers. For example, a typical article webpage might have multiple corresponding article tags that need to be displayed on a single line, with any extra tags not shown. Because there are numerous browsers with varying screen sizes, and the number of characters in a tag is not fixed, we cannot know in advance how many tags different browsers can accommodate. Currently, there are two common solutions for this situation.

[0003] One approach is to fix the number of displayable tags based on a generally adaptable number of tags. For example, the maximum character count for each tag can be manually agreed upon, and the number of tags that can be displayed across different screen ranges can be handled using CSS (Cascading Style Sheets) media queries. Tags that cannot be displayed are hidden. Alternatively, the screen width can be pre-determined using JavaScript (a lightweight, interpreted or just-in-time programming language) during data traversal, and the number of displayable tags can be set. This number is then used as the upper limit for tag traversal during rendering. This method limits tag descriptions, and the predefined screen ranges cannot guarantee complete coverage of the actual screen width, resulting in poor display quality.

[0004] Another approach is to calculate the width of each tag using JavaScript after the tags have been rendered, and then sum the widths of all tags. When the total width exceeds the width of the tag's parent container, the tags after the exceeding index are hidden. This method involves performing the calculation after rendering, adding unnecessary rendering; hiding tags after calculation adds JavaScript operations; and the method of showing and then hiding tags results in poor display quality. Therefore, it is not a good solution from either a visual or performance optimization perspective.

[0005] In summary, the existing browser page tab display methods described above suffer from poor visual effects and poor performance. Summary of the Invention

[0006] Therefore, the present invention provides a label display method and apparatus, an optical disc burning method and apparatus, and a computing device, in an attempt to solve or at least alleviate at least one of the problems mentioned above.

[0007] According to one aspect of the present invention, a label display method is provided, comprising the steps of: obtaining original label data of the browser in response to a change in the browser window; calculating the width of the parent container of the labels; calculating the number of labels that the parent container can hold based on the original label data and the width of the parent container; and rendering and displaying the labels that the parent container can hold based on the number of labels that the parent container can hold.

[0008] Optionally, in the label display method according to the present invention, when the number of labels contained in the original label data is 1, 1 is taken as the number of labels that the parent container can hold.

[0009] Optionally, in the label display method according to the present invention, the method further includes the step of: determining the state of the browser window based on the width of the parent container of the label, the state including the page being opened for the first time, the window being enlarged, or the window being shrunk.

[0010] Optionally, in the label display method according to the present invention, when the browser window is in the state of the page being opened for the first time, the step of calculating the number of labels that the parent container can accommodate based on the original label data and the width of the parent container includes: traversing the original label data, obtaining the width of each traversed label, and accumulating the widths of each label; stopping the traversal when the accumulated result is equal to the width of the parent container, and taking the number of labels whose widths have been accumulated as the number of labels that the parent container can accommodate; stopping the traversal when the accumulated result exceeds the width of the parent container, and taking the number of labels whose widths have been accumulated minus 1 as the number of labels that the parent container can accommodate; and taking the number of labels whose widths have been accumulated in the original label data as the number of labels that the parent container can accommodate when the accumulated result of the widths of all labels in the original label data does not exceed the width of the parent container.

[0011] Optionally, in the label display method according to the present invention, when the browser window is in a state of window enlargement, the step of calculating the number of labels that the parent container can accommodate based on the original label data and the width of the parent container includes: determining whether the number of currently displayed labels is equal to the number of labels in the original label data that have completed width accumulation; if equal, traversing the original label data, obtaining the width of each traversed label, and accumulating the width of each label; stopping the traversal when the accumulation result is equal to the width of the parent container, and using the number of labels that have completed width accumulation as the number of labels that the parent container can accommodate; stopping the traversal when the accumulation result exceeds the width of the parent container, and using the number of labels that have completed width accumulation minus 1 as the number of labels that the parent container can accommodate. The process involves several steps: If the sum of the widths of all tags in the original tag data does not exceed the width of the parent container, the total number of tags in the original tag data is taken as the number of tags the parent container can hold; if it is not equal, the sum is compared with the width of the parent container; if the sum is greater than the width of the parent container, the number of tags whose width has been summed is reduced by 1 and taken as the number of tags the parent container can hold; if the sum is equal to the width of the parent container, the number of tags whose width has been summed is taken as the number of tags the parent container can hold; and if the sum is less than the width of the parent container, the process proceeds to iterating through the original tag data, obtaining the width of each tag encountered, and summing the widths of each tag.

[0012] Optionally, in the label display method according to the present invention, when the browser window is in a state of window shrinking, the step of rendering and displaying the labels that the parent container can hold according to the number of labels that the parent container can hold includes: determining the labels that cannot be displayed after the window shrinks based on the number of labels that the parent container can hold and the currently displayed labels; and deleting the labels that cannot be displayed after the window shrinks in the window.

[0013] Optionally, in the label display method according to the present invention, when the state is that the page is opened for the first time, the method further includes the step of: creating an empty document object model and setting the state of the document object model to hidden.

[0014] According to another aspect of the present invention, a label display device is also provided, comprising: a data acquisition unit, adapted to acquire original label data of a browser in response to a change in a browser window; a first calculation unit, adapted to calculate the width of a parent container of the labels; a second calculation unit, adapted to calculate the number of labels that the parent container can accommodate based on the original label data and the width of the parent container; and a rendering unit, adapted to render and display the labels that the parent container can accommodate based on the number of labels that the parent container can accommodate.

[0015] According to another aspect of the present invention, a computing device is also provided, comprising: at least one processor and a memory storing program instructions; when the program instructions are read and executed by the processor, the computing device performs the label display method as described above.

[0016] According to another aspect of the present invention, a readable storage medium storing program instructions is also provided, which, when read and executed by a computing device, causes the computing device to perform the label display method described above.

[0017] The label display method of this invention can first set an empty document object model label for preprocessing and calculating the label width, and set a unique ID; the size of the label text, font selection, and inner and outer margins will affect the label width, so a method needs to be provided to obtain the label width based on these set styles (if the application scope is small, the corresponding style can also be set directly for the empty document object model label); obtain the number of labels that can be displayed based on the width of the label's parent, and perform page rendering; listen for changes in the browser window and adjust the number of displayed labels accordingly.

[0018] The label display method, apparatus, and computing device according to the present invention can achieve at least one of the following beneficial effects:

[0019] By pre-calculating the width required for each tag, and thus determining the number of tags that the current parent container can display, this approach allows for both unlimited tag descriptions and avoidance of unnecessary tag traversal and rendering. It also ensures that an appropriate number of tags are displayed based on different screen sizes, achieving a dual optimization of display quality and page performance while meeting tag display requirements. Displaying a variable number of elements in a single line is common in page layouts, and this invention's solution is universally applicable to tag display regardless of browser window changes. Attached Figure Description

[0020] To achieve the foregoing and related objectives, certain illustrative aspects are described herein in conjunction with the following description and accompanying drawings. These aspects indicate various ways in which the principles disclosed herein may be practiced, and all aspects and their equivalents are intended to fall within the scope of the claimed subject matter. The foregoing and other objectives, features, and advantages of this disclosure will become more apparent from the following detailed description, taken in conjunction with the accompanying drawings. Throughout this disclosure, the same reference numerals generally refer to the same parts or elements.

[0021] Figure 1 A schematic diagram of a computing device 100 according to an embodiment of the present invention is shown;

[0022] Figure 2 A flowchart of a label display method 200 according to an embodiment of the present invention is shown;

[0023] Figure 3 A flowchart of step S230 according to an embodiment of the present invention is shown;

[0024] Figure 4 A flowchart of a method 400 for determining the number of tags that a parent container can hold is shown according to an embodiment of the present invention;

[0025] Figure 5 A schematic diagram of the structure of a label display device 500 according to an embodiment of the present invention is shown. Detailed Implementation

[0026] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0027] Improving the webpage experience involves optimizing webpage performance. A webpage is rendered at least once during its creation, and there are also re-rendering processes during user access. Re-rendering involves unavoidably regenerating the layout and redrawing (i.e., reflow and repaint), which are very resource-intensive and are the root cause of poor webpage performance.

[0028] To address the issues of poor visual effects and performance in existing browser page tag display methods, this invention provides a tag display method that eliminates the need to limit the number of tags and renders only after determining the number of tags that can be displayed, thereby optimizing the display effect and saving computing resources.

[0029] Figure 1A schematic diagram of a computing device 100 according to an embodiment of the present invention is shown. It should be noted that... Figure 1 The computing device 100 shown is merely an example. In practice, the computing device used to implement the label display method of the present invention can be any type of device, and its hardware configuration can be similar to... Figure 1 The computing device 100 shown is the same as, and can also be the same as, the computing device 100 shown. Figure 1 The computing device 100 shown is different. In practice, the computing device used to implement the label display method of the present invention can... Figure 1 The hardware components of the computing device 100 shown may be added or removed. This invention does not limit the specific hardware configuration of the computing device.

[0030] like Figure 1 As shown, in the basic configuration 102, the computing device 100 typically includes system memory 106 and one or more processors 104. Memory bus 108 can be used for communication between processor 104 and system memory 106.

[0031] Depending on the desired configuration, processor 104 can be any type of processor, including but not limited to: microprocessor (UP), microcontroller (UC), digital information processor (DSP), or any combination thereof. Processor 104 may include one or more levels of cache such as L1 cache 110 and L2 cache 112, processor core 114, and registers 116. Example processor core 114 may include an arithmetic logic unit (ALU), floating-point unit (FPU), digital signal processing core (DSP core), or any combination thereof. Example memory controller 118 may be used with processor 104, or in some implementations, memory controller 118 may be an internal part of processor 104.

[0032] Depending on the desired configuration, system memory 106 can be any type of memory, including but not limited to volatile memory (such as RAM), non-volatile memory (such as ROM, flash memory, etc.), or any combination thereof. System memory 106 may include operating system 120, one or more applications 122, and program data 124. Application 122 is actually a set of program instructions that instruct processor 104 to perform corresponding operations. In some embodiments, application 122 may be arranged to cause processor 104 to operate using program data 124 on the operating system.

[0033] The computing device 100 may also include a storage interface bus 134. The storage interface bus 134 enables communication from storage devices 132 (e.g., removable storage 136 and non-removable storage 138) to the basic configuration 102 via a bus / interface controller 130. At least a portion of the operating system 120, application 122, and program data 124 may be stored on the removable storage 136 and / or the non-removable storage 138, and loaded into system memory 106 via the storage interface bus 134 when the computing device 100 is powered on or when application 122 is to be executed, and executed by one or more processors 104.

[0034] The computing device 100 may also include an interface bus 140 that facilitates communication from various interface devices (e.g., output devices 142, peripheral interfaces 144, and communication devices 146) to the basic configuration 102 via a bus / interface controller 130. Example output devices 142 include a graphics processing unit 148 and an audio processing unit 150. They may be configured to facilitate communication with various external devices such as displays or speakers via one or more A / V ports 152. Example peripheral interfaces 144 may include a serial interface controller 154 and a parallel interface controller 156, which may be configured to facilitate communication with external devices such as input devices (e.g., keyboards, mice, pens, voice input devices, touch input devices) or other peripherals (e.g., printers, scanners, etc.) via one or more I / O ports 158. Example communication devices 146 may include a network controller 160, which may be arranged to facilitate communication with one or more other computing devices 162 via a network communication link through one or more communication ports 164.

[0035] A network communication link can be an example of a communication medium. A communication medium can typically be embodied in a modulated data signal, such as a carrier wave or other transmission mechanism, and can include any information delivery medium. A “modulated data signal” can be a signal in which one or more of its data sets, or changes thereof, can be encoded as information within the signal. As a non-limiting example, a communication medium can include wired media such as wired networks or leased lines, and various wireless media such as voice, radio frequency (RF), microwave, infrared (IR), or other wireless media. The term “computer-readable medium” as used herein can include both storage media and communication media.

[0036] In the computing device 100 according to the present invention, application 122 includes a plurality of program instructions for executing the label display method 200, which can instruct processor 104 to execute the label display method 200 of the present invention so that computing device 100 executes the label display method 200 of the present invention.

[0037] A label display method 200 according to an embodiment of the present invention includes: in response to a change in the browser window, obtaining the original label data of the browser; calculating the width of the parent container of the labels; calculating the number of labels that the parent container can hold based on the original label data and the width of the parent container; and rendering and displaying the labels that the parent container can hold based on the number of labels that the parent container can hold.

[0038] Figure 2 A flowchart of a label display method 200 according to an embodiment of the present invention is shown. Method 200 is executed in a computing device (e.g., the aforementioned computing device 100). Figure 2 As shown, method 200 begins with step S210.

[0039] In step S210, in response to a change in the browser window, the browser's original tab data is obtained.

[0040] Browser window changes can occur in various situations that affect the display of browser page tabs, such as opening a page (first time opening) or a change in the browser window size (mainly width). For computers, window size changes can be caused by the user zooming in or out of the browser window; for mobile phones, window size changes can be caused by switching between landscape and portrait modes.

[0041] Tag data refers to the text contained within a tag. The browser's raw tag data refers to the tag data of all tags that should be displayed in a single line on the current page.

[0042] Step S210 listens to the browser window, and when a change is detected in the browser window, obtains the original tag data of the current page.

[0043] Next, in step S220, the width of the parent container of the label is calculated.

[0044] The parent container of a tag refers to the parent container of the tag in the original tag data.

[0045] Next, in step S230, the number of tags that the parent container can hold is calculated based on the original tag data and the width of the parent container.

[0046] The width of the label is calculated based on the original label data, and then the number of labels that the parent container can hold is determined. In one implementation, step S230 can be achieved by... Figure 3 The process is implemented as shown. Figure 3 As shown, the process includes steps S231 to S234.

[0047] In step S231, the original label data is traversed, the width of each traversed label is obtained, and the widths of all labels are summed. The summation result is then evaluated. The original label data contains several labels. Traversal begins from the first label. For each label encountered, its width is calculated, and this width is summed with the widths of all previously traversed labels. The summation result has three possible outcomes:

[0048] (1) Stop traversing when the accumulated result is equal to the width of the parent container, and then proceed to step S232. In step S232, the number of tags whose widths have been accumulated is taken as the number of tags that the parent container can hold. For example, when traversing the tags, if the accumulated result of the widths of the first M tags is exactly equal to the width of the parent container, then there is no need to continue traversing, but M can be directly taken as the number of tags that the parent container can hold.

[0049] (2) Stop traversing when the accumulated result exceeds the width of the parent container, and then proceed to step S233. In step S233, the number of tags whose widths have been accumulated is reduced by 1 and used as the number of tags that the parent container can hold. For example, when traversing to the (M-1)th tag, the accumulated result of the widths of the first M-1 tags is less than the width of the parent container. Then, when traversing to the Mth tag, the accumulated result of the widths of the first M tags has exceeded the width of the parent container. So, M-1 is used as the number of tags that the parent container can hold.

[0050] (3) When the sum of the widths of all tags in the original tag data does not exceed the width of the parent container, proceed to step S234. In step S234, the number of all tags in the original tag data is taken as the number of tags that the parent container can hold. For example, if the original tag data contains N tags, when the Nth tag is traversed, the sum of the widths of the N tags is calculated to be less than the width of the parent container. Then, N is taken as the number of tags that the parent container can hold.

[0051] In one implementation, if there is only one label in the original label data, then there is no need to traverse it; 1 can be directly used as the number of labels that the parent container can hold.

[0052] Next, in step S240, the labels that the parent container can hold are rendered and displayed according to the number of labels that the parent container can hold.

[0053] After steps S210 to S230, the number of tags that the parent container can hold has been determined. In step S240, the tags that the parent container can hold can be rendered directly, and then displayed after rendering.

[0054] Method 200 can be used to display tags regardless of how the browser window changes. Method 200 does not require limiting the number of characters in each tag and only renders the tags that can be displayed. There is no situation where tags are shown and then hidden. Compared with existing tag display methods, Method 200 improves both the visual effect and performance of web pages.

[0055] In one implementation, when a user opens a page in a browser, method 200 is used to display the tags, and steps S231 to S233 are used to determine the number of tags that the parent container can hold before rendering. When the user zooms in on the browser window (i.e., zooms in on the current page window), the tags need to be re-rendered and displayed. At this time, method 400 can be used to determine the number of tags that the parent container can hold. Method 400 is an optimization of steps S231 to S233, such as... Figure 4 As shown, method 400 begins with step S410.

[0056] In step S410, it is determined whether the number of currently displayed tags is equal to the number of tags in the original tag data whose width has been accumulated. Before the window is enlarged, that is, when the page is first opened, the width accumulation calculation has been performed on some (or all) of the tags. The currently displayed tags refer to the tags displayed after the page is opened.

[0057] If the number of currently displayed tags is equal to the number of tags in the original tag data whose widths have been accumulated, then proceed to step S420. The fact that the number of currently displayed tags is equal to the number of tags in the original tag data whose widths have been accumulated means that all tags were displayed on the screen before the window was enlarged, or that the sum of the widths of the displayed tags is exactly equal to the number of tags the parent container could hold before the window was enlarged. In the latter case, there may still be some tags that have not been displayed.

[0058] If the number of currently displayed tags is not equal to the number of tags whose width has been accumulated in the original tag data, it means that there are still tags that have not been displayed. At this time, proceed to step S430.

[0059] In step S420, the original label data is traversed, and the width is accumulated. Based on the accumulation result, the number of labels that the parent container can hold is determined. In fact, the processing method of steps S231 to S233 in step S420 is the same as that in steps S231 to S233, except that the parent container in steps S231 to S233 is the parent container before the window is enlarged, while the parent container in method 400 is the parent window after the window is enlarged. It should be noted that during the width accumulation process, it is not necessary to traverse the original label data starting from the first label. Since some labels have already completed the width accumulation calculation before the window is enlarged, the traversal can continue based on these labels. For example, if M labels have already completed the width accumulation calculation before method 400 begins, then in step S420, the traversal starts from the (M+1)th label, the width of the (M+1)th label is obtained, and this width is summed with the width accumulation result of the first M labels to obtain the width accumulation result of the first M+1 labels. Next, the sum of the widths is compared with the width of the parent container. Similar to step S231, the comparison results have the above three cases (1), (2) and (3). In the above three cases, the processing is carried out in accordance with steps S232, S233 and S234 respectively, so as to determine the number of labels that the parent container can hold.

[0060] In step S430, the accumulated result is compared with the width of the parent container:

[0061] If the accumulated result is greater than the width of the parent container, proceed to step S440. In step S440, the number of tags whose width has been accumulated is reduced by 1 and used as the number of tags that the parent container can hold.

[0062] If the summation result is equal to the width of the parent container, then proceed to step S450. In step S450, the number of tags whose width has been summed is taken as the number of tags that the parent container can hold.

[0063] If the accumulated result is less than the width of the parent container, proceed to step S420.

[0064] In one implementation, when the browser window is in a shrinking state, the tags that cannot be displayed after the window shrinks can be determined based on the number of tags that the parent container can hold and the currently displayed tags. Then, these tags that cannot be displayed after the window shrinks are deleted from the window. Here, the parent container refers to the parent container of the tags after the window shrinks, and the currently displayed tags refer to the tags displayed before the window shrinks.

[0065] In this implementation, the number of tags that the parent container can hold can be obtained using step S230.

[0066] For method 200, each time a label is traversed, the sum of the widths of that label and the widths of the preceding labels can be stored. In this implementation, the number of labels that the parent container can hold can be determined based on the sum of the sums, thus avoiding the process of traversing again.

[0067] If the parent container can hold M tags after the window is shrunk, and the number of tags currently displayed is N, then the tags from M+1 to N need to be hidden.

[0068] In one implementation, based on methods 200 and 400, the following process is used to display the tabs on the browser page.

[0069] Step

[001] : After each page is opened, the browser creates the necessary variables and functions for that page, specifically including:

[0070] tempObj: Variable - defaults to "null", creates a temporary empty Document Object Model (DOM) to assist in subsequent calculations;

[0071] parentObj: Variable - defaults to "null", the DOM object of the parent container;

[0072] originTagList: Variable - defaults to "[]", a list of tag arrays obtained from the interface;

[0073] originTagListLength: Variable - defaults to "0", the length of the original tag list;

[0074] tempTagList: Variable - defaults to "[]", an array of tags whose widths have been calculated. The name (nema) and width (width) of the tags whose widths have been calculated are stored in this array as objects, which can avoid repeating the calculation operation;

[0075] tempTagListLength: Variable - defaults to "0", the length of the tag array whose width has been calculated, that is, the number of tags whose width has been calculated;

[0076] tagShowNum: Variable - defaults to "0", the number of tags that the parent container can hold;

[0077] tagPadding: Variable - tentatively set to "3", the inner margin of the tag, the value of which can be adjusted according to needs;

[0078] tagMargin: Variable - tentatively set to "5", the distance between two adjacent tags, its value can be adjusted;

[0079] parentContainerWidth: Variable - defaults to "0", used to store the width of the parent element corresponding to the tag;

[0080] countWidth: Variable - defaults to "0", the total width occupied by the displayed label, which is the sum of the label width and the inner and outer margins;

[0081] createTempDom: function - creates an empty DOM element with a calculated width for the alternative tags and is currently hidden;

[0082] The `setParentContainerWidth:` function sets the width of the parent element corresponding to the tag.

[0083] The `setTagItemWidth` function gets the width of each tag.

[0084] handleCompute: Function - Iterates through originTagList and assigns values ​​to the relevant data;

[0085] The removeBeyondTag function deletes a tag if the width of the currently displayed tag is greater than the width of its parent container.

[0086] setTempCountWidth: Function - Used to calculate the width occupied by the displayable tags based on the tempTagList;

[0087] drawTagList: function - renders the tags.

[0088] Step

[002] : The system listens to the browser window. When the browser window changes, such as opening a new page, making the window bigger or smaller, the system obtains the tag data of the browser page through the interface, stores the tag data in originTagList, calculates the length of originTagList, and stores the length in originTagListLength.

[0089] Step

[003] : Determine whether originTagList contains tag data and whether the value of originTagListLength is greater than 1: If originTagListLength is less than 1, the process ends; if it is equal to 1, assign 1 to tagShowNum and then execute step

[010] ; if it is greater than 1, see step

[004] .

[0090] Step

[004] : Determine whether an empty DOM exists for calculating the width of the specified temporary processing tag based on the DOM ID. If it does not exist, call createTempDom to create it, assign an ID to the created DOM, and assign the DOM object form to tempObj. If it exists, directly assign the object form of this empty DOM to tempObj. Then call setParentContainerWidth to calculate the width of the tag's parent container.

[0091] Step

[005] : Compare the width of the parent container obtained in step

[004] with the value previously stored in the parentContainerWidth variable: If the value previously stored in the parentContainerWidth variable is 0, it means that the current page is being opened for the first time, and step

[006] is executed next; If the value previously stored in the parentContainerWidth variable is not 0, and the width of the parent container obtained in step

[004] is less than the value previously stored in the parentContainerWidth variable, it means that the browser window has become smaller, and step

[007] is executed next; If the width of the parent container obtained in step

[004] is greater than the value previously stored in the parentContainerWidth variable, it means that the browser window has become larger, and step

[008] is executed next.

[0092] Step

[006] : Call handleCompute to iterate through originTagList starting from the value of tempTagListLength, use setTagItemWidth to get the width of each iterated tag, and store the widths of the obtained tags into tempTagList in sequence. Then, perform an accumulation operation on the widths of the tags until the sum is equal to or greater than parentContainerWidth, and assign countWidth, tagShowNum and tempTagListLength to it. After obtaining tagShowNum, execute step

[010] .

[0093] In step

[007] , you can refer to step

[006] to determine the values ​​of countWidth and tagShowNum, call removeBeyondTag to delete the tags that cannot be displayed, and assign values ​​to countWidth and tagShowNum, without needing to re-render.

[0094] Step

[008] : Determine whether the current tagShowNum and tempTagListLength are equal: if they are equal, proceed to step

[006] ; if they are not equal, proceed to step

[009] .

[0095] Step

[009] : Call setTempCountWidth to get the total width occupied by the tags whose width calculation has been completed, and determine whether the tags whose width calculation has been completed meet the display of the current parent container width based on the calculation result: if they meet the requirements, directly assign countWidth and tagShowNum, and execute step

[010] after obtaining tagShowNum; if they do not meet the requirements, execute step

[006] .

[0096] Step

[010] : Call drawTagList to render the tag, and the process ends.

[0097] The core code for implementing the above process is as follows:

[0098]

[0099]

[0100]

[0101]

[0102] In another implementation, after obtaining the original label data, the width of each label and the width of the parent container are calculated, and then the optimal number of labels to be displayed (i.e., the number of labels that the parent container can hold) is determined.

[0103] The label display method of this invention optimizes the effect of displaying multiple labels in a single line on web page design. It uses JavaScript to optimize the layout of page labels, making up for the shortcomings of needing to render labels in advance and then obtain the width for judgment and processing. It can achieve preprocessing, obtain the width in advance and cache it, eliminating the need for repeated calculation and rendering.

[0104] Embodiments of the present invention also provide a label display device 500, which is capable of performing the steps of the label display method 200 described above. Below, in conjunction with... Figure 5 The label display device 500 described above is used to describe this device.

[0105] like Figure 5 As shown, the label display device 500 includes a data acquisition unit 510, a first calculation unit 520, a second calculation unit 530, and a rendering unit 540.

[0106] The data acquisition unit 510 is adapted to acquire the browser's original tab data in response to changes in the browser window.

[0107] The first calculation unit 520 is adapted to calculate the width of the parent container of the label.

[0108] The second calculation unit 530 is adapted to calculate the number of tags that the parent container can hold based on the original tag data and the width of the parent container.

[0109] The rendering unit 540 is adapted to render and display the labels that the parent container can hold, based on the number of labels that the parent container can hold.

[0110] In one implementation, when the number of tags contained in the original tag data is 1, 1 is taken as the number of tags that the parent container can hold.

[0111] In one implementation, the device 500 further includes:

[0112] The judgment unit is adapted to determine the state of the browser window based on the width of the parent container of the tag, the state including the page being opened for the first time, the window being enlarged, or the window being shrunk.

[0113] In one implementation, when the browser window is in the state of the page being opened for the first time, the second calculation unit 530 includes:

[0114] The accumulation sub-unit is adapted to traverse the original label data, obtain the width of each traversed label, and accumulate the widths of each label.

[0115] The first tag count determination sub-unit is suitable for stopping traversal when the accumulated result is equal to the width of the parent container, and the number of tags that have completed the width accumulation is taken as the number of tags that the parent container can hold;

[0116] The second tag count determination subunit is adapted to stop traversing when the accumulated result exceeds the width of the parent container, and to subtract 1 from the number of tags whose width has been accumulated as the number of tags that the parent container can hold; and

[0117] The third tag quantity determination subunit is adapted to use the total number of tags in the original tag data as the number of tags that the parent container can hold when the sum of the widths of all tags in the original tag data does not exceed the width of the parent container.

[0118] In one implementation, when the browser window is in a state of enlargement, the second calculation unit 530 includes:

[0119] The first judgment subunit is adapted to determine whether the number of currently displayed tags is equal to the number of tags in the original tag data that have completed width accumulation;

[0120] The first accumulation subunit is adapted to traverse the original label data, obtain the width of each label traversed, and accumulate the widths of each label when the output of the first judgment subunit is equal to the original label data.

[0121] The fourth tag count determination sub-unit is adapted to stop traversing when the accumulated result is equal to the width of the parent container, and the number of tags that have completed the width accumulation is taken as the number of tags that the parent container can hold;

[0122] The fifth tag quantity determination subunit is adapted to stop traversing when the accumulated result exceeds the width of the parent container, and to use the number of tags that have completed the width accumulation minus 1 as the number of tags that the parent container can hold;

[0123] The sixth tag quantity determination subunit is adapted to take the total number of tags in the original tag data as the number of tags that the parent container can hold when the sum of the widths of all tags in the original tag data does not exceed the width of the parent container.

[0124] The first comparison subunit is adapted to compare the accumulated result with the width of the parent container when the result output by the first judgment subunit is not equal.

[0125] The seventh tag quantity determination subunit is adapted to, when the output of the first comparison subunit is that the accumulated result is greater than the width of the parent container, subtract 1 from the number of tags that have completed the width accumulation and use it as the number of tags that the parent container can hold;

[0126] The eighth tag quantity determination subunit is adapted to, when the output of the first comparison subunit is that the accumulated result is equal to the width of the parent container, use the number of tags for which the width accumulation has been completed as the number of tags that the parent container can hold; and

[0127] The ninth tag quantity determination subunit is adapted to traverse the original tag data, obtain the width of each traversed tag, and accumulate the widths of each tag when the output of the first comparison subunit is less than the width of the parent container.

[0128] In one implementation, when the browser window is in a shrinking state, the rendering unit 540 includes:

[0129] The label deletion determination subunit is adapted to determine, based on the number of labels that the parent container can hold and the currently displayed labels, labels that cannot be displayed after the window is reduced in size; and

[0130] The delete sub-unit is adapted to delete labels that cannot be displayed when the window is shrunk.

[0131] In one implementation, when the state is that the page is opened for the first time, the device 500 further includes:

[0132] The document object model creation unit is adapted to create an empty document object model and set the state of the document object model to hidden.

[0133] The various techniques described herein can be implemented in combination with hardware or software, or a combination thereof. Thus, the methods and apparatus of the present invention, or certain aspects or portions thereof, can take the form of program code (i.e., instructions) embedded in a tangible medium, such as a removable hard disk, USB flash drive, floppy disk, CD-ROM, or any other machine-readable storage medium, wherein when the program is loaded into and executed by a machine such as a computer, the machine becomes an apparatus for practicing the present invention.

[0134] When the program code is executed on a programmable computer, the computing device generally includes a processor, a processor-readable storage medium (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device. The memory is configured to store program code; the processor is configured to execute the label display method of the present invention according to instructions in the program code stored in the memory.

[0135] By way of example, and not limitation, readable media include readable storage media and communication media. Readable storage media stores information such as computer-readable instructions, data structures, program modules, or other data. Communication media generally embodies computer-readable instructions, data structures, program modules, or other data in the form of modulated data signals such as carrier waves or other transmission mechanisms, and includes any information delivery medium. Any combination of the above is also included within the scope of readable media.

[0136] In the specification provided herein, the algorithms and displays are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used with the examples of this invention. The required structure for constructing such systems is apparent from the above description. Furthermore, this invention is not directed to any particular programming language. It should be understood that the contents of the invention described herein can be implemented using various programming languages, and the above description of specific languages ​​is for the purpose of disclosing preferred embodiments of the invention.

[0137] Numerous specific details are set forth in the specification provided herein. However, it will be understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures, and techniques have not been shown in detail so as not to obscure the understanding of this specification.

[0138] Similarly, it should be understood that, in order to simplify this disclosure and aid in understanding one or more aspects of the invention, various features of the invention are sometimes grouped together in a single embodiment, figure, or description thereof in the above description of exemplary embodiments of the invention. However, this method of disclosure should not be construed as reflecting an intention that the claimed invention requires more features than are expressly recited in each claim. Those skilled in the art will understand that modules, units, or components of the devices in the examples disclosed herein can be arranged in the devices described in this embodiment, or alternatively, can be located in one or more devices different from the devices in this example. The modules in the foregoing examples can be combined into a single module or further divided into multiple sub-modules.

[0139] Those skilled in the art will understand that modules in the device of the embodiments can be adaptively changed and placed in one or more devices different from that embodiment. Modules, units, or components in the embodiments can be combined into a single module, unit, or component, and further, they can be divided into multiple sub-modules, sub-units, or sub-components. Except where at least some of such features and / or processes or units are mutually exclusive, any combination can be used to combine all features disclosed in this specification (including the accompanying claims, abstract, and drawings) and all processes or units of any method or device so disclosed. Unless expressly stated otherwise, each feature disclosed in this specification (including the accompanying claims, abstract, and drawings) may be replaced by an alternative feature that serves the same, equivalent, or similar purpose.

[0140] Furthermore, those skilled in the art will understand that although some embodiments described herein include certain features included in other embodiments but not others, combinations of features from different embodiments are meant to be within the scope of the invention and form different embodiments. Additionally, some of the embodiments described herein are described as methods or combinations of method elements that can be implemented by a processor of a computer system or by other means of performing the functions. Therefore, a processor having the necessary instructions for implementing the method or method elements forms means for implementing the method or method elements. Furthermore, the elements described herein in the device embodiments are examples of means for implementing the functions performed by elements for the purposes of carrying out the invention.

[0141] As used herein, unless otherwise specified, the use of ordinal numbers such as “first,” “second,” “third,” etc., to describe ordinary objects merely indicates different instances of similar objects and is not intended to imply that the objects being described must have a given order in time, space, ordering, or any other manner.

[0142] Although the invention has been described with respect to a limited number of embodiments, those skilled in the art will understand from the foregoing description that other embodiments are conceivable within the scope of the invention described herein. Furthermore, it should be noted that the language used in this specification has been chosen primarily for readability and edibility purposes, and not for the purpose of explaining or limiting the subject matter of the invention.

Claims

1. A label display method, comprising the steps of: obtaining original label data of a browser in response to a change in a browser window, the original label data being label data of all labels that should be displayed in a line in a current page of the browser, the label data being text contained in a label; calculating a width of a parent container of the label; calculating a number of labels that can be accommodated by the parent container according to the original label data and the width of the parent container; rendering and displaying labels that can be accommodated by the parent container according to the number of labels that can be accommodated by the parent container; wherein the method further comprises the steps of: judging a state of the browser window according to the width of the parent container of the label, the state including a first opening of a page, a window becoming larger, or a window becoming smaller; wherein when the state of the browser window is the first opening of the page, the step of calculating the number of labels that can be accommodated by the parent container according to the original label data and the width of the parent container comprises: traversing the original label data, obtaining a width of each label traversed, and accumulating the widths of the labels; stopping the traversal when the accumulation result is equal to the width of the parent container, and taking the number of labels for which the width accumulation is completed as the number of labels that can be accommodated by the parent container; stopping the traversal when the accumulation result exceeds the width of the parent container, and taking the number of labels for which the width accumulation is completed minus 1 as the number of labels that can be accommodated by the parent container; when the width accumulation result of all labels in the original label data does not exceed the width of the parent container, taking the number of all labels in the original label data as the number of labels that can be accommodated by the parent container; when the number of labels contained in the original label data is 1, taking 1 as the number of labels that can be accommodated by the parent container; when the state of the browser window is the window becoming larger, the step of calculating the number of labels that can be accommodated by the parent container according to the original label data and the width of the parent container comprises: judging whether the number of labels currently displayed is equal to the number of labels for which the width accumulation is completed in the original label data; if yes, traversing the original label data, obtaining a width of each label traversed, and accumulating the widths of the labels; stopping the traversal when the accumulation result is equal to the width of the parent container, and taking the number of labels for which the width accumulation is completed as the number of labels that can be accommodated by the parent container; stopping the traversal when the accumulation result exceeds the width of the parent container, and taking the number of labels for which the width accumulation is completed minus 1 as the number of labels that can be accommodated by the parent container; when the width accumulation result of all labels in the original label data does not exceed the width of the parent container, taking the number of all labels in the original label data as the number of labels that can be accommodated by the parent container; if no, comparing the accumulation result with the width of the parent container; if the accumulation result is greater than the width of the parent container, taking the number of labels for which the width accumulation is completed minus 1 as the number of labels that can be accommodated by the parent container; ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ 2. The method of claim 1, wherein, ​ 3. The method of claim 1, wherein, ​ ​ ​ ​ ​ ​ ​ ​ if the accumulation result is equal to the width of the parent container, the number of labels that have completed width accumulation is taken as the number of labels that the parent container can accommodate; if the accumulation result is less than the width of the parent container, the step of traversing the original label data, obtaining the width of each label that is traversed, and accumulating the width of each label is entered.

4. The method of claim 1, wherein, When the state of the browser window is that the window is becoming smaller, the step of rendering and displaying the labels that the parent container can accommodate according to the number of labels that the parent container can accommodate includes: determining the labels that cannot be displayed after the window becomes smaller according to the number of labels that the parent container can accommodate and the labels that are currently displayed; deleting the labels that cannot be displayed after the window becomes smaller in the window.

5. The method of claim 1, wherein, When the state is that the page is opened for the first time, the method further includes the steps of: creating an empty document object model, and setting the state of the document object model to hidden.

6. A label display device, comprising: a data obtaining unit adapted to obtain original label data of a browser in response to a change in a browser window, the original label data being label data of all labels that should be displayed in a line in a current page of the browser, the label data being text contained in a label; a first calculating unit adapted to calculate the width of a parent container of a label; a second calculating unit adapted to calculate the number of labels that a parent container can accommodate according to the original label data and the width of the parent container; a rendering unit adapted to render and display the labels that the parent container can accommodate according to the number of labels that the parent container can accommodate; a judging unit adapted to judge the state of the browser window according to the width of the parent container of a label, the state including that the page is opened for the first time, the window is becoming larger, or the window is becoming smaller; When the state of the browser window is that the page is opened for the first time, the second calculating unit includes: an accumulation subunit adapted to traverse the original label data, obtain the width of each label that is traversed, and accumulate the width of each label; a first label number determining subunit adapted to stop traversing when the accumulation result is equal to the width of the parent container, and take the number of labels that have completed width accumulation as the number of labels that the parent container can accommodate; a second label number determining subunit adapted to stop traversing when the accumulation result exceeds the width of the parent container, and take the number of labels that have completed width accumulation minus 1 as the number of labels that the parent container can accommodate; a third label number determining subunit adapted to take the number of all labels in the original label data as the number of labels that the parent container can accommodate when the accumulation result of the width of all labels in the original label data does not exceed the width of the parent container.

7. A computing device, comprising: at least one processor and a memory having stored program instructions; when the program instructions are read and executed by the processor, the computing device is caused to perform the label display method according to any one of claims 1-5.

8. A readable storage medium storing program instructions, which, when read and executed by a computing device, cause the computing device to perform the label display method of any one of claims 1-5.

Images