CN112346610A - Implementation method of multi-level selectable option selection component, electronic device and storage medium - Google Patents
Implementation method of multi-level selectable option selection component, electronic device and storage medium Download PDFInfo
- Publication number
- CN112346610A CN112346610A CN202011106248.8A CN202011106248A CN112346610A CN 112346610 A CN112346610 A CN 112346610A CN 202011106248 A CN202011106248 A CN 202011106248A CN 112346610 A CN112346610 A CN 112346610A
- Authority
- CN
- China
- Prior art keywords
- selectable
- user
- level
- tag
- html
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction 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/04817—Interaction 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 using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9532—Query formulation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The application discloses a method for realizing a multi-level selectable option selection component, an electronic device and a storage medium. The method comprises the following steps: displaying the multi-level selectable items to a user in a popup mode by adopting an HTML (hypertext markup language) tag, a CSS (cascading style sheet) technology and a JavaScript technology; and when a user selects a certain selectable item, hiding or destroying the pop-up window, and displaying the value corresponding to the selected selectable item to the user. The method specifically comprises the following steps: creating a common HTML label; adopting CSS technology to adjust the style of the HTML label; adopting a JavaScript technology to perform trigger event binding on the HTML tag; and when the trigger event is triggered, popping up a multi-level selectable popup in a webpage. The method and the device can realize multi-level display, the interactive mode of the selectable items is tiled, and clear level relation display, so that the user can find the selectable items needing to be selected more conveniently.
Description
Technical Field
The present application relates to the field of information and communication technologies, and in particular, to a method for implementing a multi-level selectable option selection component, an electronic device, and a storage medium.
Background
At present, for a multi-level selectable option selection scene, the scheme given in the HTML standard is to use a piecing implementation of three tags, namely select, opt group and option. This scheme has the following 3 problems:
1. alternatives cannot be presented beyond two levels, such as: tree-branch-leaf.
2. When the number of selectable items is very large, the display form is not user-friendly, and it is very difficult for the user to find the option which the user needs to select.
3. When the user knows the option that the user wants to select, the option is difficult to be selected efficiently through the interactive mode.
Aiming at the problems that more than two levels of selectable items cannot be displayed, the display form is not friendly and the selection efficiency is low in the related technology, an effective solution is not provided at present.
Disclosure of Invention
The present application mainly aims to provide an implementation method of a multi-level selectable item selection component, an electronic device, and a storage medium, so as to solve the problems in the related art that selectable items of more than two levels cannot be displayed, the display form is not friendly, and the selection efficiency is low.
To achieve the above object, the present application provides a method for implementing a multi-level selectable option selection component, comprising the steps of:
displaying the multi-level selectable items to a user in a pop-up mode by adopting an HTML (HyperText Markup Language), a CSS (Cascading Style Sheets) technology and a JavaScript technology;
and when a user selects a certain selectable item, hiding or destroying the pop-up window, and displaying the value corresponding to the selected selectable item to the user.
The method for displaying the multi-level selectable items to the user in a popup mode by adopting the HTML tag, the CSS technology and the JavaScript technology comprises the following steps:
creating a common HTML label;
adopting CSS technology to adjust the style of the HTML label;
adopting a JavaScript technology to perform trigger event binding on the HTML tag;
and when the trigger event is triggered, popping up a multi-level selectable popup in a webpage.
And the common HTML tag adds a frame and an icon button aiming at the HTML tag.
And the common HTML tag makes corresponding style adjustment according to the requirement.
The multi-level selectable popup comprises: a search box composed of input tags and a plurality of multi-level selectable items composed of common tags.
And each hierarchical relation of the multi-level selectable item is shown in a form of a table, a mouse click event is bound to each selectable item tag, when the mouse click event is triggered, the user selects the multi-level selectable item, the multi-level selectable item popup is hidden or destroyed, and the corresponding value of the selectable item tag selected by the user is displayed in the HTML tag.
And aiming at an event that the content of the input tag binding input box of the search box is changed (exchange), after a user inputs a text in the search box, controlling the display of selectable items through a JavaScript script, comparing the corresponding value of each selectable item tag with the text input by the user in the search box, if the corresponding value of the selectable item tag contains the text input by the user in the search box, displaying the selectable item to the user, and otherwise, hiding the selectable item.
The event binding comprises the following steps: mouse click (onclick), mouse double click (ondbllick), mouse pointer move-in (onmouseenter), mouse pointer hover (onmouseove), mouse pointer move-out (onmouseleave), live focus of input box (onfocus), lost focus of input box (onblu), changed content of input box (onchange).
An electronic device comprising a memory for storing a computer program and a processor running the computer program to cause the computer device to perform an implementation method according to said multi-level selectable selection component.
A readable storage medium having stored therein computer program instructions which, when read and executed by a processor, perform a method of implementing the multi-level selectable component.
The beneficial technical effects are as follows:
through the multi-level selectable option selection component of the present application, three problems of the HTML standard scheme can be effectively solved:
1. multi-level display can be realized, and only corresponding adjustment on the style is needed.
2. The interaction mode of the horizontally spreading selectable items and the clear hierarchical relation display can enable the user to find the selectable items needing to be selected more conveniently.
3. Through the search box function, the user can efficiently search the options which the user wants to select.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this application, serve to provide a further understanding of the application and to enable other features, objects, and advantages of the application to be more apparent. The drawings and their description illustrate the embodiments of the invention and do not limit it. In the drawings:
FIG. 1 is a flow diagram of a method for implementing a multi-level selectable option selection component according to an embodiment of the present application;
FIG. 2 is a flowchart of a selectable item popup display provided in accordance with an embodiment of the present application;
FIG. 3 is a schematic diagram of an HTML tag add border and an icon button provided in accordance with an embodiment of the present application;
fig. 4 is a schematic diagram of multiple levels of options provided according to an embodiment of the present application.
Detailed Description
In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
It should be noted that the terms "first," "second," and the like in the description and claims of this application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It should be understood that the data so used may be interchanged under appropriate circumstances such that embodiments of the application described herein may be used. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
In this application, the terms "upper", "lower", "left", "right", "front", "rear", "top", "bottom", "inner", "outer", "middle", "vertical", "horizontal", "lateral", "longitudinal", and the like indicate orientations or positional relationships based on the orientations or positional relationships shown in the drawings. These terms are used primarily to better describe the present application and its embodiments, and are not used to limit the indicated devices, elements or components to a particular orientation or to be constructed and operated in a particular orientation.
Moreover, some of the above terms may be used to indicate other meanings besides the orientation or positional relationship, for example, the term "on" may also be used to indicate some kind of attachment or connection relationship in some cases. The specific meaning of these terms in this application will be understood by those of ordinary skill in the art as appropriate.
In addition, the term "plurality" shall mean two as well as more than two.
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
The application provides an implementation method of a multi-level selectable option selection component, as shown in fig. 1, comprising the following steps:
step S1: displaying the multi-level selectable items to a user in a popup mode by adopting an HTML (hypertext markup language) tag, a CSS (cascading style sheet) technology and a JavaScript technology;
step S2: and when a user selects a certain selectable item, hiding or destroying the pop-up window, and displaying the value corresponding to the selected selectable item to the user.
The displaying of the multi-level selectable items to the user in a pop-up window manner by using the HTML tag, the CSS technique, and the JavaScript script technique, as shown in fig. 2, includes:
step S11: creating a common HTML label;
step S12: adopting CSS technology to adjust the style of the HTML label;
step S13: adopting a JavaScript technology to perform trigger event binding on the HTML tag;
step S14: and when the trigger event is triggered, popping up a multi-level selectable popup in a webpage. When an event triggers, a simulated popup box pops up in the web page, which can also be implemented by creating a normal HTML tag and making corresponding style adjustments (e.g., adjusting position attribute to fixed, z-index attribute to 16777271, and positioning related attributes such as top, left, right, bottom, etc. to a visual comfort range).
The ordinary HTML tag adds a frame and an icon button to the HTML tag, as shown in fig. 3.
And the common HTML tag makes corresponding style adjustment according to the requirement.
The multi-level selectable popup comprises: a search box composed of input tags and a plurality of multi-level selectable items composed of common tags.
As shown in fig. 4, a mouse click event is bound to each selectable item tag, when the mouse click event is triggered, the user selects the selectable item tag, the multi-level selectable item popup is hidden or destroyed, and a corresponding value of the selectable item tag selected by the user is displayed in the simulated HTML native select component.
And aiming at an event that the content of the input tag binding input box of the search box is changed (exchange), after a user inputs a text in the search box, controlling the display of selectable items through a JavaScript script, comparing the corresponding value of each selectable item tag with the text input by the user in the search box, if the corresponding value of the selectable item tag contains the text input by the user in the search box, displaying the selectable item to the user, and otherwise, hiding the selectable item.
The event binding comprises the following steps: mouse click (onclick), mouse double click (ondbllick), mouse pointer move-in (onmouseenter), mouse pointer hover (onmouseove), mouse pointer move-out (onmouseleave), live focus of input box (onfocus), lost focus of input box (onblu), changed content of input box (onchange).
An electronic device comprising a memory for storing a computer program and a processor running the computer program to cause the computer device to perform an implementation method according to said multi-level selectable selection component.
A readable storage medium having stored therein computer program instructions which, when read and executed by a processor, perform a method of implementing the multi-level selectable component.
The above description is only a preferred embodiment of the present application and is not intended to limit the present application, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application.
Claims (10)
1. A method for implementing a multi-level selectable option selection component, comprising: displaying the multi-level selectable items to a user in a popup mode by adopting an HTML (hypertext markup language) tag, a CSS (cascading style sheet) technology and a JavaScript technology;
and when a user selects a certain selectable item, hiding or destroying the pop-up window, and displaying the value corresponding to the selected selectable item to the user.
2. The method of claim 1, wherein the presenting multi-level selectable items to a user in a pop-up manner using HTML tags, CSS technology, and JavaScript scripting technology comprises:
creating a common HTML label;
adopting CSS technology to adjust the style of the HTML label;
adopting a JavaScript technology to perform trigger event binding on the HTML tag;
and when the trigger event is triggered, popping up a multi-level selectable popup in a webpage.
3. The method of claim 2, wherein the generic HTML tag adds borders and icon buttons to the HTML tag.
4. The method of claim 2, wherein said generic HTML tag makes corresponding style adjustments as needed.
5. The method of claim 2, wherein the multi-level selectable popup comprises: a search box composed of input tags and a plurality of multi-level selectable items composed of common tags.
6. The method of claim 5, wherein the hierarchical relationships of the multi-level selectable items are presented in a table form, a mouse click event is bound to each selectable item tag, when the mouse click event is triggered, the user selects the multi-level selectable item, the multi-level selectable item is popped up or destroyed, and the corresponding value of the selectable item tag selected by the user is displayed in the ordinary HTML tag.
7. The method of claim 5, wherein a change event occurs in the content of the input tag binding input box of the search box, after a user enters text in the search box, the presentation of selectable items is controlled by a JavaScript script, the corresponding value of each selectable item tag is compared with the text entered by the user in the search box, if the corresponding value of a selectable item tag contains the text entered by the user in the search box, the selectable item is presented to the user, otherwise the selectable item is hidden.
8. The method of claim 2, wherein said event binding comprises: mouse click, mouse double click, mouse pointer moving in, mouse pointer floating, mouse pointer moving out, live focus of an input box, lost focus of the input box and changed content of the input box.
9. An electronic device, characterized in that the electronic device comprises a memory for storing a computer program and a processor for executing the computer program to cause a computer device to perform the method of implementing a multi-level selectable component as claimed in any one of claims 1-8.
10. A readable storage medium having stored thereon computer program instructions which, when read and executed by a processor, perform a method of implementing a multi-level selectable option selection component as claimed in any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011106248.8A CN112346610A (en) | 2020-10-15 | 2020-10-15 | Implementation method of multi-level selectable option selection component, electronic device and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011106248.8A CN112346610A (en) | 2020-10-15 | 2020-10-15 | Implementation method of multi-level selectable option selection component, electronic device and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112346610A true CN112346610A (en) | 2021-02-09 |
Family
ID=74361988
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011106248.8A Pending CN112346610A (en) | 2020-10-15 | 2020-10-15 | Implementation method of multi-level selectable option selection component, electronic device and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112346610A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113190776A (en) * | 2021-05-11 | 2021-07-30 | 上海哔哩哔哩科技有限公司 | Popup window display method and system |
| CN113900760A (en) * | 2021-10-26 | 2022-01-07 | 广州博冠信息科技有限公司 | Popup window display method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060036964A1 (en) * | 2004-08-16 | 2006-02-16 | Microsoft Corporation | User interface for displaying selectable software functionality controls that are relevant to a selected object |
| CN110020372A (en) * | 2017-12-27 | 2019-07-16 | 航天信息股份有限公司 | A kind of method and system that data are shown based on organization |
| CN111124212A (en) * | 2018-10-31 | 2020-05-08 | 北京国双科技有限公司 | Data display method and device, storage medium and processor |
| CN111639264A (en) * | 2020-06-04 | 2020-09-08 | 深圳前海微众银行股份有限公司 | Data searching method, device, equipment and computer readable storage medium |
-
2020
- 2020-10-15 CN CN202011106248.8A patent/CN112346610A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20060036964A1 (en) * | 2004-08-16 | 2006-02-16 | Microsoft Corporation | User interface for displaying selectable software functionality controls that are relevant to a selected object |
| CN110020372A (en) * | 2017-12-27 | 2019-07-16 | 航天信息股份有限公司 | A kind of method and system that data are shown based on organization |
| CN111124212A (en) * | 2018-10-31 | 2020-05-08 | 北京国双科技有限公司 | Data display method and device, storage medium and processor |
| CN111639264A (en) * | 2020-06-04 | 2020-09-08 | 深圳前海微众银行股份有限公司 | Data searching method, device, equipment and computer readable storage medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113190776A (en) * | 2021-05-11 | 2021-07-30 | 上海哔哩哔哩科技有限公司 | Popup window display method and system |
| CN113190776B (en) * | 2021-05-11 | 2022-11-01 | 上海哔哩哔哩科技有限公司 | Popup window display method and system |
| CN113900760A (en) * | 2021-10-26 | 2022-01-07 | 广州博冠信息科技有限公司 | Popup window display method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102414682B (en) | Method and apparatus for providing scraped web pages in a graphical user interface | |
| CN105373567B (en) | Page generation method and client | |
| KR101733943B1 (en) | Hierarchically-organized control galleries | |
| RU2554395C2 (en) | System and method for selecting tabs within tabbed browser | |
| US7917846B2 (en) | Web clip using anchoring | |
| US9262036B2 (en) | Website image carousel generation | |
| US10296175B2 (en) | Visual presentation of multiple internet pages | |
| US7673251B1 (en) | Panel presentation | |
| US9063757B2 (en) | Interactive application assistance, such as for web applications | |
| US10366155B2 (en) | Method and apparatus for displaying data grids | |
| US7434174B2 (en) | Method and system for zooming in and out of paginated content | |
| US20120297324A1 (en) | Navigation Control Availability | |
| US20100179949A1 (en) | Method and system for an internet browser add-on providng simultaneous multiple interactive websites on one internet browser window | |
| US10705710B2 (en) | Web page content insertion based on scroll operation | |
| CN104462490A (en) | Display method for list details | |
| CN109782977B (en) | View processing method, electronic device and storage medium | |
| CN112346610A (en) | Implementation method of multi-level selectable option selection component, electronic device and storage medium | |
| JP5727684B1 (en) | Browsing device, display control method, recording medium, and program | |
| WO2016176149A1 (en) | Rendering graphical assets natively on multiple screens of electronic devices | |
| CN115601567A (en) | Page color pickup method, device, computer equipment, storage medium and product | |
| KR100697809B1 (en) | The method making homepage with iframe and layer | |
| CN111142738A (en) | Option card type viewer system and method suitable for visual station building management | |
| WO2004006132A1 (en) | Web page graphical user interface | |
| WO2017134487A1 (en) | Method for dynamically displaying multimedia contents | |
| Doan | Practical Responsive Web Design |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210209 |