WO2018032813A1

WO2018032813A1 - Pull-down menu display method, apparatus, assembly, application, storage medium and device

Info

Publication number: WO2018032813A1
Application number: PCT/CN2017/083837
Authority: WO
Inventors: 杨鑫; 王利红
Original assignee: 中兴通讯股份有限公司
Priority date: 2016-08-15
Filing date: 2017-05-10
Publication date: 2018-02-22
Also published as: CN107765955A

Abstract

An assembly-based pull-down menu display method, an apparatus, an assembly and an application, relating to the field of computer technology. The method comprises: according to a user operation, displaying an entire item box corresponding to a text input box (S11); and when the length of displayed contents in the item box is greater than the width of the item box, dividing the displayed contents into multiple lines for displaying in the item box (S12).

Description

Drop-down menu showing methods, devices, components, applications, storage media, and devices

The present application is filed on the basis of the Chinese Patent Application Serial No. No. No. No. No. No. No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No No

Technical field

The present invention relates to the field of computer technologies, and in particular, to a component-based pull-down menu display method, apparatus, component, application, storage medium, and device.

Background technique

In the application, the drop-down menu list can be implemented by means of component design. For example, a combo box (COMBOX) component can be realized by using technical means such as HTML, VC, C#, and the like. The styles that are presented when using COMBOX to implement a drop-down menu list are roughly divided into two categories. First, COMBOX's alternate list (ie item) and text box (text) have the same width; second, the width of the COMBOX item is independent of the width of the text box, but can be adaptive according to the length of the content displayed in the item, that is, the content The longest item option determines the overall width of the item drop-down box.

When the width of the item of the COMBOX is not related to the width of the text box, in some cases, part of the item content is hidden, so that the user cannot directly see the complete item; thus, the display effect is poor and the user experience is poor.

Summary of the invention

The present invention is directed to a component-based pull-down menu display method, apparatus, component, and application for solving the problem that the content of the drop-down menu is incomplete and the user experience is poor in the prior art.

In one aspect, the present invention provides a component-based pull-down menu display method, including: displaying an entire candidate box corresponding to a text input box according to a user operation; displaying content in the candidate box When the length is greater than the width of the candidate frame, the display content is split into multiple lines and displayed in the candidate frame.

In another aspect, the present invention further provides a component-based pull-down menu display device, comprising: a display unit configured to display an entire candidate frame corresponding to a text input box according to a user operation; a split unit, when the candidate frame When the length of the displayed content is greater than the width of the candidate frame, the display content is split into multiple lines and displayed in the candidate box.

In another aspect, embodiments of the present invention also provide an assembly comprising any of the component-based pull-down menu display devices provided by the present invention.

In another aspect, embodiments of the present invention also provide an application, including any of the components provided by the present invention.

The embodiment of the invention provides a computer storage medium, wherein the computer storage medium stores computer executable instructions, and the computer executable instructions are used to execute the component-based pull-down menu display method.

A display device provided by an embodiment of the present invention includes:

a memory configured to store a computer program;

Display, configured to display;

And a processor, coupled to the memory and the display, respectively, for executing a component-based pull-down menu display method by executing the computer program.

The component-based pull-down menu display method, device, component, application, storage medium and device provided by the embodiment of the present invention can display the entire candidate box corresponding to the text input box according to the user operation; when the candidate box displays the content When the length is greater than the width of the candidate frame, the display content is split into multiple lines and displayed in the candidate frame. In this way, regardless of the width of the text input box and regardless of the length of the displayed content, each item in the candidate box can be completely displayed, ensuring that the user does not misunderstand, thereby greatly improving the user experience.

DRAWINGS

1 is a schematic diagram showing the content display of a pull-down candidate box in the prior art;

2 is a flowchart of a component-based pull-down menu display method according to an embodiment of the present invention;

FIG. 3 is an effect of displaying a component-based pull-down menu display method provided by an embodiment of the present invention; FIG.

FIG. 4 is a schematic structural diagram of a component-based pull-down menu display apparatus according to an embodiment of the present invention.

detailed description

The invention will be described in detail below with reference to the accompanying drawings. It is understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

It is found that the display effect is often as shown in Fig. 1(a): when the width of the item needs to be consistent with the width of the text, the length of the item displayed by the item needs to be smaller than the item width. Otherwise, if the item content length ratio is If the item width is long, part of the content will be occluded when the interface is displayed, and the content of the item cannot be completely displayed to the user, resulting in loss of display content. As shown in Figure 1(b), when the item width is determined by the longest option of the item content, although the slightly longer content can be displayed completely, the width of the item adaptive stretching is limited, when the item content is too long. Some content cannot be displayed, and an ellipsis appears at the end of the content. In view of this, an embodiment of the present invention provides a component-based pull-down menu display method, including:

Display the entire candidate box corresponding to the text input box according to the user operation;

When the length of the displayed content in the candidate box is greater than the width of the candidate frame, the display content is split into multiple lines and displayed in the candidate box.

In this embodiment, the first display interface will display the entire complete candidate box, that is, the candidate frame itself will not be occluded.

Secondly, when the displayed length is greater than the length of the candidate box, the display content is split into multiple lines. The split display will be displayed in multiple lines of the alternate box, thus achieving a complete display of the display content.

In some embodiments, in order to facilitate the selection of the content of the candidate box, the method is completely displayed in the text input box. In the embodiment, the method further includes:

Having the width of the candidate frame coincide with the width of the text input box, and at the same time maintaining multi-line display when the display content is moved to the text input box, thereby ensuring display in the text input box The display content will also be displayed completely for the convenience of the user.

In order to maintain the multi-line display of the display content, when the height of the text input box is insufficient, the method may include:

Adjusting a line spacing, a font height, and the like of the display content according to a height of the text input box, and finally, by adjusting display parameters of the display content, ensuring that the text input box completely displays a display selected by the user from the candidate frame. content.

The following is a detailed description of the embodiments of the present invention in conjunction with the specific embodiments. As shown in FIG. 2, the embodiment of the present invention provides a component-based pull-down menu display method, including:

S11, according to a user operation, displaying an alternative frame corresponding to the text input box, the width of the candidate frame being consistent with the width of the text input box;

S12. When the length of the displayed content in the candidate box is greater than the width of the candidate box, splitting the display content into multiple lines is displayed in the candidate box.

The component-based pull-down menu display method according to the embodiment of the present invention can display an alternative frame corresponding to the text input box according to a user operation, and the width of the candidate frame is consistent with the width of the text input box; When the length of the displayed content in the box is greater than the width of the candidate box, the display content is split into multiple lines and displayed in the candidate box. In this way, regardless of the width of the text input box and regardless of the length of the displayed content, each item in the candidate box can be completely displayed, ensuring that the user does not misunderstand, thereby greatly improving the user experience.

The alternative box in this embodiment is a selection box displaying alternative options; the alternative option To display the display content in the alternate box. In this embodiment, the display content in the candidate box is split into multiple lines, and the length of each line after the split display is not greater than the length of the candidate box, and is usually maintained with the candidate box. width.

Specifically, in a browser or various clients, a text input box for text input by a user often lists selectable items, and when the user clicks the text input box or clicks the arrow next to the text input box, An optional box pops up.

Optionally, in step S11, the display text input box corresponds to an alternative frame, and the width of the candidate frame is consistent with the width of the text input box, and may include:

Detecting a width of the text input box and a width of each candidate in the candidate box;

If the width of the alternative is greater than the width of the text input box, the width of the alternative is adjusted to coincide with the width of the text input box.

For example, the absolute width of the current text input box can be detected by javascript, and the width of all the options in the current candidate box can be detected. For example, the absolute width of the current text input box is detected to be 200 pixels, and the current candidate box is detected. There are two alternatives with an absolute width of 220 pixels and 300 pixels, respectively, and both options are adjusted to a width of 200 pixels.

Optionally, displaying an alternate frame corresponding to the text input box, the width of the candidate frame being consistent with the width of the text input box may further include: detecting a width of the text input box and the candidate frame respectively After the width of each of the alternatives, an option having a width greater than the width of the text input box is identified; based on this, if the width of the alternative is greater than the width of the text input box, the width of the alternative is adjusted Consistent with the width of the text input box may include adjusting a width of the alternated item to be consistent with a width of the text input box.

Once the width of the candidate box is determined, the display content can be completely displayed in a new line. Optionally, in step S12, when the length of the displayed content in the candidate box is greater than the width of the candidate box, splitting the display content into multiple lines may be specifically displayed in the candidate box. The method includes: traversing display content of each alternative in the candidate box, when the length of the display content is greater than the When the width of the candidate box is displayed, the display content is displayed to the edge of the candidate frame and the line feed continues to be displayed.

Optionally, the display content may be a string of characters, a term, a network address, etc., and the display content may be displayed to the edge of the candidate frame and then automatically wrapped for display, or may be identified according to a special format, for example, if the content is displayed at the beginning and the end The special characters "DIY" at both ends determine that the display content needs to be changed to continue to display when the edge of the candidate frame is reached.

After determining the relative positional relationship between the display content and the display container candidate box, the calculation can be obtained according to the margin attribute of the last edge of the component and the form container, and various margins and padding between the form and the application. The coordinates of the current component ultimately render all the drop-down options in the alternate box that needs to be popped up.

In order to further improve the display effect, in one embodiment of the present invention, the component-based pull-down menu display method may further include: adjusting a width of the candidate frame correspondingly when a width of the text input box is changed. In this way, in different applications, operating systems or different resolutions, the drop-down menu items can be completely displayed, ensuring that users do not misunderstand. When the size of the current text input box changes, the size of the candidate box will be adjusted accordingly, and the display content will also find the appropriate position for the newline display to ensure that all the displayed content can be displayed completely and completely.

According to the component-based pull-down menu display method provided by the embodiment of the present invention, the display effect of the displayed content in the candidate frame may be as shown in FIG. 3 .

Correspondingly, as shown in FIG. 4, an embodiment of the present invention further provides a component-based pull-down menu display device, including:

The display unit 41 is configured to display an alternative frame corresponding to the text input box according to a user operation. In some embodiments, the length of the candidate box and the text input box may be the same or may not be the same, but the display unit 41 needs The entire display frame is completely displayed. In some embodiments, the display unit 41 may be further configured to make the width of the candidate frame and the width of the text input frame When the width of the candidate frame is consistent with the text input box and the display unit 41 completely displays the candidate frame, the entire text input box is apparently displayed.

The splitting unit 42 is configured to split the display content into multiple lines in the candidate box when the length of the displayed content in the candidate box is greater than the width of the candidate frame.

According to the component-based pull-down menu display device provided by the embodiment of the present invention, the display unit 41 can display the candidate frame corresponding to the text input box according to the user operation, so that the width of the candidate frame is consistent with the width of the text input frame; When the length of the display content in the candidate box is greater than the width of the candidate frame, the splitting unit 42 can split the display content into multiple lines to display in the candidate frame. In this way, regardless of the width of the text input box and regardless of the length of the displayed content, each item in the candidate box can be completely displayed, ensuring that the user does not misunderstand, thereby greatly improving the user experience.

Optionally, the display unit 41 can include:

a detecting module, configured to respectively detect a width of the text input box and a width of each candidate in the candidate box;

And an adjustment module configured to adjust the width of the alternative to be consistent with the width of the text input box if the detection module detects that the width of the alternative is greater than the width of the text input box.

Optionally, the display unit further includes an identifier module configured to perform an option with a width greater than a width of the text input box after detecting a width of the text input box and a width of each of the alternative boxes in the candidate frame, respectively. And correspondingly, the adjusting module is specifically configured to adjust the width of the selected candidate to be consistent with the width of the text input box.

Correspondingly, an embodiment of the present invention further provides an assembly, including any of the component-based pull-down menu display devices provided by the foregoing embodiments, and thus can achieve corresponding technical effects, which have been described in detail herein. No longer.

Correspondingly, an embodiment of the present invention further provides an application, including any of the foregoing embodiments. A component, therefore, can also achieve the corresponding technical effects, the foregoing has been described in detail, and will not be described again here.

The embodiment of the present invention discloses a computer storage medium, where the computer storage medium stores computer executable instructions, and the computer executable instructions are used to execute the component-based pull-down menu display method provided by any one of the foregoing embodiments. One or more, for example, the method as shown in FIG. 2 can be performed.

The computer storage medium provided by the embodiment of the present invention may include various storage media such as an optical disk, a mobile hard disk, a magnetic tape, a read-only storage medium, a random storage medium, a flash memory, and the like, and may be a non-transitory storage medium.

The embodiment of the invention further provides a display device, comprising:

a memory configured to store a computer program;

Display, configured to display;

And a processor coupled to the memory and the display for performing one or more of the component-based pull-down menu display methods by executing the computer program.

The memory herein may include various storage media, and may include at least non-transitory storage media that non-transitory storage of the computer program.

The display may include a liquid crystal display, an electronic ink display, or a projection display, etc., and can be used for display of various information.

The processor may include: an application processor AP (AP), a central processing unit (CPU), a digital signal processor (DSP), or a programmable gate array (FPGA, Field Programmable). Gate Array) and so on.

The processor is coupled to the memory and display via a bus, such as an integrated circuit (IIC) bus, and can be used to perform one or more of the component-based pull-down menu display methods provided by any of the preceding embodiments.

It is to be understood that the term "comprises", "comprising", or any other variants thereof, is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device comprising a series of elements includes those elements. It also includes other elements that are not explicitly listed, or elements that are inherent to such a process, method, article, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

Through the description of the above embodiments, those skilled in the art can clearly understand that the foregoing embodiment method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be through hardware, but in many cases, the former is better. Implementation. Based on such understanding, the technical solution of the present invention, which is essential or contributes to the prior art, may be embodied in the form of a software product stored in a storage medium (such as ROM/RAM, disk, The optical disc includes a number of instructions for causing a terminal device (which may be a cell phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the methods described in various embodiments of the present invention.

The above are only the preferred embodiments of the present invention, and are not intended to limit the scope of the present invention, and modifications made in accordance with the principles of the present invention are understood to fall within the scope of the present invention.

Industrial applicability

The technical solution provided in the embodiment of the present invention first displays the entire candidate frame, and secondly, splits the display content according to the length of the display content displayed in the candidate frame and the length of the candidate frame, and splits the display content into multiple The lines are displayed in the candidate box, thereby realizing the complete display of the display contents in the candidate frame, thereby reducing the information occlusion phenomenon, and can be easily realized in the industry by the setting of the computer program, and is convenient for industrial promotion and use.

Claims

A component-based drop-down menu display method, including:

Display the entire candidate box corresponding to the text input box according to the user operation;

When the length of the displayed content in the candidate box is greater than the width of the candidate frame, the display content is split into multiple lines and displayed in the candidate box.
The method of claim 1 wherein

The method further includes:

The width of the candidate frame is made to coincide with the width of the text input box.
The method of claim 2, wherein

The making the width of the candidate frame consistent with the width of the text input box includes:

Detecting a width of the text input box and a width of each candidate in the candidate box;

If the width of the alternative is greater than the width of the text input box, the width of the alternative is adjusted to coincide with the width of the text input box.
The method of claim 3, wherein the matching the width of the candidate frame with the width of the text input box further comprises:

After detecting the width of the text input box and the width of each of the alternative boxes in the candidate box, respectively, identifying an option having a width greater than a width of the text input box;

If the width of the alternative is greater than the width of the text input box, adjusting the width of the alternative to match the width of the text input box includes:

The width of the identified option is adjusted to coincide with the width of the text input box.
The method according to claim 1, wherein when the length of the display content in the candidate frame is greater than the width of the candidate frame, the display content is split into multiple lines displayed in the candidate The box includes:

Traversing the display content of each of the alternatives in the candidate box, when the length of the display content is greater than the width of the candidate frame, displaying the display content to the edge of the candidate frame and then wrapping the line Continued display.
The method of claim 2, further comprising:

When the width of the text input box changes, the width of the candidate frame is adjusted accordingly.
A component-based pull-down menu display device, including:

a display unit configured to display an entire candidate box corresponding to the text input box according to a user operation;

The splitting unit is configured to split the display content into multiple lines in the candidate box when the length of the displayed content in the candidate box is greater than the width of the candidate frame.
The apparatus according to claim 7, wherein

The display unit is further configured to make the width of the candidate frame coincide with the width of the text input box.
The device according to claim 8, wherein

The display unit includes:

a detecting module, configured to respectively detect a width of the text input box and a width of each candidate in the candidate box;

And an adjustment module configured to adjust the width of the alternative to be consistent with the width of the text input box if the detection module detects that the width of the alternative is greater than the width of the text input box.
The device according to claim 8, wherein the display unit further comprises:

The identifier module is configured to: after detecting the width of the text input box and the width of each of the alternative boxes in the candidate box, respectively, identifying an option having a width greater than a width of the text input box;

The adjustment module is configured to adjust a width of the identified option to be consistent with a width of the text input box.
An assembly comprising the component-based pull-down menu display device of any one of claims 7 to 9.
An application comprising the assembly of claim 11.
A computer storage medium having stored therein computer executable instructions for performing the method of any one of claims 1 to 6.
A display device comprising:

a memory configured to store a computer program;

Display, configured to display;

A processor, coupled to the memory and display, respectively, for performing the method of any one of claims 1 to 6 by executing the computer program.