CN107765955A - Drop-down menu display methods, device, component and application based on component - Google Patents

Drop-down menu display methods, device, component and application based on component Download PDF

Info

Publication number
CN107765955A
CN107765955A CN201610676550.4A CN201610676550A CN107765955A CN 107765955 A CN107765955 A CN 107765955A CN 201610676550 A CN201610676550 A CN 201610676550A CN 107765955 A CN107765955 A CN 107765955A
Authority
CN
China
Prior art keywords
width
alternative frame
text entry
alternate item
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.)
Withdrawn
Application number
CN201610676550.4A
Other languages
Chinese (zh)
Inventor
杨鑫
王利红
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
ZTE Corp
Original Assignee
Nanjing ZTE New Software Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Nanjing ZTE New Software Co Ltd filed Critical Nanjing ZTE New Software Co Ltd
Priority to CN201610676550.4A priority Critical patent/CN107765955A/en
Priority to PCT/CN2017/083837 priority patent/WO2018032813A1/en
Publication of CN107765955A publication Critical patent/CN107765955A/en
Withdrawn legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus

Abstract

The present invention discloses a kind of drop-down menu display methods, device, component and application based on component, is related to field of computer technology, to solve drop-down menu content in the prior art show it is imperfect, the problem of poor user experience.Methods described includes:Operated according to user, alternative frame corresponding to display Text Entry, the width of the alternative frame is consistent with the width of the Text Entry;When the length of display content in the alternative frame is more than the width of the alternative frame, the display content is split into multirow is included in the alternative frame.

Description

Drop-down menu display methods, device, component and application based on component
Technical field
The present invention relates to field of computer technology, more particularly to a kind of drop-down menu display methods based on component, dress Put, component and application.
Background technology
Drop down menu list can be realized by way of component design in the application, such as pass through the skills such as HTML, VC, C# Art means can realize COMBOX components.The pattern showed when realizing drop down menu list using COMBOX is roughly divided into two Class.First, COMBOX alternate list (i.e. item) is consistent with text box (text) width;Second, COMBOX item width Degree is unrelated with the width of text box, but can be adaptive according to the length of display content in item, i.e., most long with content Item options determine the overall width of item comboboxs.
But when showing drop-down list option, usually there is problems with:As shown in Fig. 1 (a), when item width needs When being consistent with text width, the length of the content shown by item need it is smaller than item width, otherwise, if item Content-length is longer than item width, then partial content will be blocked when carrying out interface display, can not be complete by this item content It is whole to be shown to user, so as to cause the Loss of display content.As shown in Fig. 1 (b), when item width is most long with item contents Option to determine when, although slightly long content can completely be shown, the width of the adaptive strain stretch of item be it is limited, When item contents are long, partial content can not be shown, also be occurred at content end with ellipsis.
The content of the invention
The technical problem to be solved in the present invention is to provide a kind of drop-down menu display methods based on component, device, component And application, to solve drop-down menu content in the prior art show it is imperfect, the problem of poor user experience.
On the one hand, the present invention provides a kind of drop-down menu display methods based on component, including:Operated, shown according to user Show alternative frame corresponding to Text Entry, the width of the alternative frame is consistent with the width of the Text Entry;When described standby When selecting the length of display content in frame to be more than the width of the alternative frame, the display content is split into multirow is included described In alternative frame.
Optionally, alternative frame corresponding to the display Text Entry, the width of the alternative frame and the text input The width of frame unanimously includes:The width of the Text Entry and the width of each alternate item in the alternative frame are detected respectively; If the width of the alternate item be more than the Text Entry width, by the width adjustment of the alternate item to the text The width of this input frame is consistent.
Optionally, alternative frame corresponding to the display Text Entry, the width of the alternative frame and the text input The width of frame unanimously also includes:The width of each alternate item in the width of the Text Entry and the alternative frame is detected respectively After degree, the alternate item that width is more than to the text input width of frame is identified;If the width of the alternate item More than the width of the Text Entry, the width adjustment of the alternate item is wrapped to consistent with the width of the Text Entry Include:By the width adjustment of the identified alternate item to consistent with the width of the Text Entry.
Optionally, it is described when the length of display content in the alternative frame is more than the alternatively width of frame, by described in Display content, which splits into multirow and is shown in the alternative frame, to be included:The display content of each alternate item in the alternative frame is traveled through, When the length of the display content is more than the width of the alternative frame, the display content is shown to the side of the alternative frame Line feed continues to show after edge.
Further, methods described also includes:When the change width of the Text Entry, accordingly adjust described alternative The width of frame.
On the other hand, the present invention also provides a kind of drop-down menu display device based on component, including:Display unit, use Operated according to user, show alternative frame corresponding to Text Entry, the width and the Text Entry of the alternative frame Width is consistent;Split cells, will be described aobvious when the length of display content in the alternative frame is more than the width of the alternative frame Show that content splits into multirow and is shown in the alternative frame.
Optionally, the display unit includes:Detection module, for detect respectively the Text Entry width and The width of each alternate item in the alternative frame;Adjusting module, if detecting the width of the alternate item for the detection module Degree is more than the width of the Text Entry, by the width adjustment of the alternate item to the width one with the Text Entry Cause.
Optionally, the display unit also includes mark module, for detecting the width of the Text Entry respectively And in the alternative frame after the width of each alternate item, the alternate item that width is more than to the text input width of frame enters rower Know;The adjusting module, specifically for the alternate item that will be identified width adjustment to the width with the Text Entry Degree is consistent.
On the other hand, embodiments of the invention also provide a kind of component, including provided by the invention any are based on component Drop-down menu display device.
On the other hand, embodiments of the invention also provide a kind of application, including any component provided by the invention.
Drop-down menu display methods, device, component and application provided in an embodiment of the present invention based on component, being capable of basis User, which operates, shows alternative frame corresponding to Text Entry, the width one of the width and the Text Entry of the alternative frame Cause;When the length of display content in the alternative frame is more than the width of the alternative frame, the display content is split into more Row is shown in the alternative frame.So, regardless of the width of Text Entry, regardless of the length of display content therein Short, each single item display content in alternative frame can completely be shown, it is ensured that user will not misread, so as to greatly improve Consumer's Experience.
Brief description of the drawings
Fig. 1 is the content display schematic diagram for pulling down alternative frame in the prior art;
Fig. 2 is a kind of flow chart of the drop-down menu display methods provided in an embodiment of the present invention based on component;
Fig. 3 is a kind of effect shown using the drop-down menu display methods provided in an embodiment of the present invention based on component Fruit;
Fig. 4 is a kind of structural representation of the drop-down menu display device provided in an embodiment of the present invention based on component.
Embodiment
Below in conjunction with accompanying drawing, the present invention is described in detail.It should be appreciated that specific embodiment described herein is only To explain the present invention, the present invention is not limited.
As shown in Fig. 2 the embodiment of the present invention provides a kind of drop-down menu display methods based on component, including:
S11, operated according to user, show alternative frame corresponding to Text Entry, the width and the text of the alternative frame The width of this input frame is consistent;
S12, when the length of display content in the alternative frame is more than the width of the alternative frame, by the display content Multirow is split into be shown in the alternative frame.
Drop-down menu display methods provided in an embodiment of the present invention based on component, it can be operated according to user and show text Alternative frame corresponding to input frame, the width of the alternative frame are consistent with the width of the Text Entry;When in the alternative frame When the length of display content is more than the width of the alternative frame, the display content is split into multirow is included in the alternative frame In.So, regardless of the width of Text Entry, regardless of the length of display content therein, each single item in alternative frame Display content can completely be shown, it is ensured that user will not misread, so as to greatly improve Consumer's Experience.
Specifically, in browser or various clients, user usually listed in the Text Entry of text input Selectable project, when user clicks on text input frame or clicks on the arrow beside text input frame, can it eject The alternative frame of drop-down.
Optionally, in step s 11, alternative frame corresponding to the display Text Entry, the width of the alternative frame with The width of the Text Entry unanimously may include:
The width of the Text Entry and the width of each alternate item in the alternative frame are detected respectively;
If the width of the alternate item is more than the width of the Text Entry, the width adjustment of the alternate item is arrived It is consistent with the width of the Text Entry.
For example, the absolute width of current text input frame can be detected by javascript, can also detect current The width of all alternate items in alternative frame, such as detect that the absolute width of current text input frame is 200 pixels, and it is current The absolute width for having two alternate items in alternative frame is respectively 220 each pixels and 300 pixels, then all adjusts the two alternate items Into the width of 200 pixels.
Further, alternative frame corresponding to Text Entry, the width and the Text Entry of the alternative frame are shown Width unanimously may also include:The width of each alternate item in the width of the Text Entry and the alternative frame is detected respectively After degree, the alternate item that width is more than to the text input width of frame is identified;Based on this, if the width of the alternate item Degree more than the Text Entry width, by the width adjustment of the alternate item to consistent with the width of the Text Entry It may include:By the width adjustment of the identified alternate item to consistent with the width of the Text Entry.
After the width that alternative frame is determined, you can so that display content therein is carried out into the complete display that enters a new line.Optionally, exist In step S12, when the length of display content in the alternative frame is more than the width of the alternative frame, the display content is torn open It is divided into multirow and is shown in the alternative frame and may particularly include:The display content of each alternate item in the alternative frame is traveled through, works as institute When stating the length of display content more than the alternatively width of frame, after the display content to be shown to the edge of the alternative frame Line feed continues to show.
Optionally, display content can be a string of characters, entry, network address etc., and display content can both be shown to standby The edge of frame and then automatic line feed display are selected, can also be identified according to special format, if for example, the head and the tail of display content Both ends are by spcial character " DIY ", it is determined that the display content needs the line feed when reaching alternative frame edge to continue to show.
After relative position relation of the display content with showing the alternative frame of container is determined, you can held according to component and list The back gauge attribute of device back, and various outer back gauges between list and application and inset spacing unified calculation get current group The coordinate of part, finally show drop-down options all in the alternative frame for entirely needing to eject.
In order to further improve display effect, in one embodiment of the invention, the drop-down menu based on component is shown Method may also include:When the change width of the Text Entry, the width of the alternative frame is accordingly adjusted.So, not In the case of application together, operating system or different resolution, drop-down menu item can completely be shown, it is ensured that user Will not error understanding.When the size of current text input frame changes, the size of alternative frame also can be accordingly adjusted, display Content can also pick up suitable position line feed display, it is ensured that all display contents normally can completely be shown.
By the drop-down menu display methods provided in an embodiment of the present invention based on component, display content is aobvious in alternative frame Show that effect can be as shown in Figure 3.
Accordingly, as shown in figure 4, embodiments of the invention also provide a kind of drop-down menu display device based on component, Including:
Display unit 41, for being operated according to user, show alternative frame corresponding to Text Entry, the width of the alternative frame Degree is consistent with the width of the Text Entry;
Split cells 42, when the length of display content in the alternative frame is more than the width of the alternative frame, by described in Display content splits into multirow and is shown in the alternative frame.
Drop-down menu display device provided in an embodiment of the present invention based on component, display unit 41 can be grasped according to user Make alternative frame corresponding to display Text Entry, make the width of the alternative frame consistent with the width of the Text Entry;When When the length of display content is more than the width of the alternative frame in the alternative frame, split cells 42 can be by the display content Multirow is split into be shown in the alternative frame.So, regardless of the width of Text Entry, regardless of in display therein The length of appearance, each single item display content in alternative frame can completely be shown, it is ensured that user will not misread, so as to significantly Improve Consumer's Experience.
Optionally, display unit 41 may include:
Detection module, for detecting the width of the Text Entry and the width of each alternate item in the alternative frame respectively Degree;
Adjusting module, if the width for detecting the alternate item for detection module is more than the width of the Text Entry Degree, by the width adjustment of the alternate item to consistent with the width of the Text Entry.
Further, display unit also includes mark module, for the width for detecting the Text Entry respectively with And in the alternative frame after the width of each alternate item, the alternate item that width is more than to the text input width of frame enters rower Know;Accordingly, adjusting module, can be specifically used for will be identified the alternate item width adjustment to the Text Entry Width it is consistent.
Accordingly, embodiments of the invention also provide a kind of component, including any of previous embodiment offer is based on group The drop-down menu display device of part, therefore corresponding technique effect can be also realized, have been carried out being described in detail above, herein Repeat no more.
Accordingly, embodiments of the invention also provide a kind of application, including any component that previous embodiment provides, because This can also realize corresponding technique effect, have been carried out being described in detail above, here is omitted.
It should be noted that herein, term " comprising ", "comprising" or its any other variant are intended to non-row His property includes, so that process, method, article or device including a series of elements not only include those key elements, and And also include the other element being not expressly set out, or also include for this process, method, article or device institute inherently Key element.In the absence of more restrictions, the key element limited by sentence "including a ...", it is not excluded that including this Other identical element also be present in the process of key element, method, article or device.
Through the above description of the embodiments, those skilled in the art can be understood that above-described embodiment side Method can add the mode of required general hardware platform to realize by software, naturally it is also possible to by hardware, but in many cases The former is more preferably embodiment.Based on such understanding, technical scheme is substantially done to prior art in other words Going out the part of contribution can be embodied in the form of software product, and the computer software product is stored in a storage medium In (such as ROM/RAM, magnetic disc, CD), including some instructions to cause a station terminal equipment (can be mobile phone, computer, clothes Be engaged in device, air conditioner, or network equipment etc.) perform method described in each embodiment of the present invention.
The preferred embodiments of the present invention are these are only, are not intended to limit the scope of the invention, it is every to utilize this hair The equivalent structure or equivalent flow conversion that bright specification and accompanying drawing content are made, or directly or indirectly it is used in other related skills Art field, is included within the scope of the present invention.

Claims (10)

  1. A kind of 1. drop-down menu display methods based on component, it is characterised in that including:
    Operated according to user, show alternative frame corresponding to Text Entry, the width and the Text Entry of the alternative frame Width it is consistent;
    When the length of display content in the alternative frame is more than the width of the alternative frame, the display content is split into more Row is shown in the alternative frame.
  2. 2. according to the method for claim 1, it is characterised in that alternative frame corresponding to the display Text Entry, it is described The width of alternative frame it is consistent with the width of the Text Entry including:
    The width of the Text Entry and the width of each alternate item in the alternative frame are detected respectively;
    If the width of the alternate item be more than the Text Entry width, by the width adjustment of the alternate item to institute The width for stating Text Entry is consistent.
  3. 3. according to the method for claim 2, it is characterised in that alternative frame corresponding to the display Text Entry, it is described The width of alternative frame is consistent with the width of the Text Entry also to be included:The width for detecting the Text Entry respectively with And in the alternative frame after the width of each alternate item, the alternate item that width is more than to the text input width of frame enters rower Know;
    If the width of the alternate item is more than the width of the Text Entry, the width adjustment of the alternate item is arrived It is consistent with the width of the Text Entry including:
    By the width adjustment of the identified alternate item to consistent with the width of the Text Entry.
  4. 4. according to the method for claim 1, it is characterised in that described when the length of display content in the alternative frame is more than During the width of the alternative frame, the display content is split into multirow includes including in the alternative frame:
    The display content of each alternate item in the alternative frame is traveled through, when the length of the display content is more than the width of the alternative frame When spending, the display content is shown to enter a new line behind the edge of the alternative frame and continues to show.
  5. 5. according to the method for claim 1, it is characterised in that also include:
    When the change width of the Text Entry, the width of the alternative frame is accordingly adjusted.
  6. A kind of 6. drop-down menu display device based on component, it is characterised in that including:
    Display unit, for being operated according to user, show alternative frame corresponding to Text Entry, the width of the alternative frame and institute The width for stating Text Entry is consistent;
    Split cells, when the length of display content in the alternative frame is more than the width of the alternative frame, by the display Appearance splits into multirow and is shown in the alternative frame.
  7. 7. device according to claim 6, it is characterised in that the display unit includes:
    Detection module, for detecting the width of the Text Entry and the width of each alternate item in the alternative frame respectively;
    Adjusting module, if the width for detecting the alternate item for the detection module is more than the width of the Text Entry Degree, by the width adjustment of the alternate item to consistent with the width of the Text Entry.
  8. 8. device according to claim 7, it is characterised in that the display unit also includes mark module, for dividing After not detecting the width of the Text Entry and the width of each alternate item in the alternative frame, width is more than the text The alternate item of this input width of frame is identified;
    The adjusting module, specifically for the alternate item that will be identified width adjustment to the width with the Text Entry Degree is consistent.
  9. 9. a kind of component, it is characterised in that show including the drop-down menu based on component any one of claim 6 to 8 Showing device.
  10. 10. one kind application, it is characterised in that including the component described in claim 9.
CN201610676550.4A 2016-08-15 2016-08-15 Drop-down menu display methods, device, component and application based on component Withdrawn CN107765955A (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201610676550.4A CN107765955A (en) 2016-08-15 2016-08-15 Drop-down menu display methods, device, component and application based on component
PCT/CN2017/083837 WO2018032813A1 (en) 2016-08-15 2017-05-10 Pull-down menu display method, apparatus, assembly, application, storage medium and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610676550.4A CN107765955A (en) 2016-08-15 2016-08-15 Drop-down menu display methods, device, component and application based on component

Publications (1)

Publication Number Publication Date
CN107765955A true CN107765955A (en) 2018-03-06

Family

ID=61196321

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610676550.4A Withdrawn CN107765955A (en) 2016-08-15 2016-08-15 Drop-down menu display methods, device, component and application based on component

Country Status (2)

Country Link
CN (1) CN107765955A (en)
WO (1) WO2018032813A1 (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108519844A (en) * 2018-04-18 2018-09-11 网易(杭州)网络有限公司 menu display method and device, storage medium, processor and terminal
CN114860123A (en) * 2022-03-29 2022-08-05 携程旅游信息技术(上海)有限公司 Display control method, system, medium and device for list in page

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114527969B (en) * 2022-01-25 2023-08-18 孚瑞肯电气(深圳)有限公司 Method for converting list cell into drop-down list form input

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102662666A (en) * 2012-03-30 2012-09-12 奇智软件(北京)有限公司 Method and device for creating interface menu
CN103135977A (en) * 2011-12-02 2013-06-05 腾讯科技(深圳)有限公司 Information-inputting method in browser and device using the same
CN103744636A (en) * 2013-12-30 2014-04-23 上海斐讯数据通信技术有限公司 Text composition method for adapting to window size
CN104090755A (en) * 2014-06-19 2014-10-08 上海斐讯数据通信技术有限公司 Vertical scrolling display method for long application names in Android Launcher interface

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1669843A1 (en) * 2004-12-13 2006-06-14 Siemens Aktiengesellschaft Setting options in drop-down menues of a graphical user interface
JP4779842B2 (en) * 2006-07-11 2011-09-28 株式会社島津製作所 Autosampler control program creation support system and creation support program
DE102009058727A1 (en) * 2009-12-17 2011-06-22 Bayerische Motoren Werke Aktiengesellschaft, 80809 Method and computer for displaying information on a display device of a vehicle
KR20110088235A (en) * 2010-01-28 2011-08-03 삼성전자주식회사 Text display method and apparatus

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103135977A (en) * 2011-12-02 2013-06-05 腾讯科技(深圳)有限公司 Information-inputting method in browser and device using the same
CN102662666A (en) * 2012-03-30 2012-09-12 奇智软件(北京)有限公司 Method and device for creating interface menu
CN103744636A (en) * 2013-12-30 2014-04-23 上海斐讯数据通信技术有限公司 Text composition method for adapting to window size
CN104090755A (en) * 2014-06-19 2014-10-08 上海斐讯数据通信技术有限公司 Vertical scrolling display method for long application names in Android Launcher interface

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
《CSDN》: "《关于extJsComboBox组件选择框太窄而选择项长度太长的问题》", 《CSDN》 *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108519844A (en) * 2018-04-18 2018-09-11 网易(杭州)网络有限公司 menu display method and device, storage medium, processor and terminal
CN108519844B (en) * 2018-04-18 2020-06-16 网易(杭州)网络有限公司 Menu display method and device, storage medium, processor and terminal
CN114860123A (en) * 2022-03-29 2022-08-05 携程旅游信息技术(上海)有限公司 Display control method, system, medium and device for list in page

Also Published As

Publication number Publication date
WO2018032813A1 (en) 2018-02-22

Similar Documents

Publication Publication Date Title
CA2777701C (en) Selective rendering of electronic messages by an electronic device
US8706169B2 (en) Interface overlay
CN103023753B (en) Method, client and the system of interaction content association output in instant messaging
CA2918840C (en) Presenting fixed format documents in reflowed format
CN107765955A (en) Drop-down menu display methods, device, component and application based on component
CN104239062A (en) Various-type label page displaying method and system based on client side
WO2009082725A3 (en) Apparatus and methods for editing content on a wireless device
US9542365B1 (en) Methods for generating e-mail message interfaces
CN103164404A (en) Search result display method and search result display device
US10222966B2 (en) Parallax discrete page scrolling
US9921719B2 (en) Touch display apparatus and wallpaper replacing method thereof
US9727535B2 (en) Authoring presentations with ink
CN104657041A (en) Mobile terminal editing input method and mobile terminal editing input system
CN104932794A (en) Mobile terminal customer service rapid replying method and system
CN108416011A (en) A kind of page processing method, device, terminal and computer readable storage medium
CN106657472A (en) handheld terminal and control method thereof
WO2015017112A1 (en) Method and system for dynamically changing a header space in a graphical user interface
CN110096322A (en) The method and device of adaptive terminal screen, storage medium, electronic device
US20130185670A1 (en) Graphical view of social content streams
CN103870121B (en) A kind of information processing method and electronic equipment
EP3100154A1 (en) Providing print view of document for editing in web-based application
CN108241612A (en) Punctuation mark treating method and apparatus
CN106878151A (en) A kind of method for transmitting information, equipment and system
US9536543B2 (en) Information processing device, storage medium, and method
CN104484140B (en) Method of printing and system

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
TA01 Transfer of patent application right

Effective date of registration: 20180503

Address after: 518057 five floor, block A, ZTE communication tower, Nanshan District science and Technology Park, Shenzhen, Guangdong.

Applicant after: ZTE Corporation

Address before: 210000 No. 68, Bauhinia Road, Ningnan street, Yuhuatai District, Nanjing, Jiangsu

Applicant before: Nanjing Zhongxing Software Co., Ltd.

TA01 Transfer of patent application right
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WW01 Invention patent application withdrawn after publication

Application publication date: 20180306

WW01 Invention patent application withdrawn after publication