CN106201488A - A kind of reusable step window implementation method - Google Patents
A kind of reusable step window implementation method Download PDFInfo
- Publication number
- CN106201488A CN106201488A CN201610508647.4A CN201610508647A CN106201488A CN 106201488 A CN106201488 A CN 106201488A CN 201610508647 A CN201610508647 A CN 201610508647A CN 106201488 A CN106201488 A CN 106201488A
- Authority
- CN
- China
- Prior art keywords
- window
- page
- implementation method
- reusable
- definition
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The present invention relates to webpage front-end technical field, a kind of reusable step window implementation method.The present invention is: first one popupWindow class of encapsulation, it is provided that a basic pop-out；In popupWindow, define window style cls, the pattern of window is encapsulated；Then one popupWindow object of instantiation, self-defined window style cls is stepwindow, the definition width of window object and title, the event that definition triggers when clicking on different button in callback call back function.The present invention solves when page parameter is more, parameter item all concentrates on a page, both the problem that inconvenient parameter verification page presentation is the most attractive in appearance, reusable step window is used to realize the page that input parameter is more, optimize the displaying of the page, improve the efficiency of written in code, enhance the reusability of page assembly.
Description
Technical field
The present invention relates to webpage front-end technical field, a kind of reusable step window implementation method.
Background technology
Developer, during writing front end page, is frequently encountered the exploitation relating to the more page of parameter, typically
The mode taked is that all parameters all write on the same page, and when submitting request to, all parameters pass ginseng together to interface.This
Mode not only underaction is convenient, and can bring problems with:
One is page presentation poor effect.Page parameter is more, causes the page tediously long, and page interactivity is the most friendly, bullet
The displaying of exit window the most unsightly, affects the direct feel of user operation and the interactivity of product.
Two when being to write the page, various due to page parameter, causes the plenty of time to expend in the amendment of style sheet,
Also bring along bulk redundancy and the not easy care of code.
Summary of the invention
This solves the technical problem that bright being provides a kind of reusable step window implementation method, solves and work as the page
When parameter is more, parameter item all concentrates on a page, the problem that both inconvenient parameter verification page presentation is the most attractive in appearance.
The present invention solves the technical scheme of above-mentioned technical problem:
Described comprises the steps:
Step 1: encapsulate a popupWindow class, it is provided that a basic pop-out；
Window style cls, the pattern of package window is defined in step 2:popupWindow；
Step 3: one popupWindow object of instantiation；
Step 4: definition cls is stepwindow；
Step 5: the width of definition window object and title；
Step 6: the acquisition mode of definition window object content of text；
Step 7: the event that definition triggers when clicking on different button in callback call back function；
Step 8: definition listeners audiomonitor；
Step 9: terminate.
Described step window is the one of paging exit window, this kind of pop-out by the classifying content of required displaying to many
On the individual step page, switched over by one or more label buttons.
PopupWindow class provides a basic pop-out, and the inside encapsulates pattern and the feature of basis pop-out, can
By one popupWindow object of instantiation, then add the feature configuration that object is privately owned, realize the pop-out of other classifications
Mouthful；
At popupWindow apoplexy due to endogenous wind, the pattern of window is encapsulated, by this configuration item of window style cls making by oneself
The window style of justice loads.
Definition cls is stepwindow, represents that current window is step window, by definition cls attribute is
Stepwindow distinguishes with other kinds of window type.
The acquisition of content of text can be in conjunction with various ways, and one is by url load linked to window object, another kind of
It is to obtain the content of the page by the id of page object and load content in window object.
Some is performed specific after needs are returned to operating result after the page submits request to or click on button trigger event
The situation of operation, the operation that can perform in the write expectation of callback function, after submitting to including click, the page returns and please hope for success
Merit or ask unsuccessfully.
When can add the verification of the input parameter of current page in trigger event and click on, current page other
The display of button and hiding situation, can also add to trigger when current page clicks on next step simultaneously in event and submit request to
Operation.
Some comboboxs, the event handling of radio box defined in listeners audiomonitor, according to the parameter of user's input
The change of value, shows the change that links accordingly.
The present invention is by introducing the implementation method of a kind of reusable step window, by only for some reusable frameworks of the page
Vertical out, the pattern of multi-step window solve parameter more time list window page show the most laxative problem, meanwhile,
Reusable step window also meets the needs of different exploitation scene, improves the work efficiency of developer, enhances page
The reusability of face assembly.
Accompanying drawing explanation
The present invention is further described below in conjunction with the accompanying drawings:
Fig. 1 is the inventive method flow chart.
Detailed description of the invention
As it is shown in figure 1, first arrange the Style Attributes of window page, it is ensured that the bandwagon effect of the page
Implementing of step pop-up window, including window type, the setting of window size, button, event, call back function
Definition and process
<script type=" text/javascript ">
function testO(){
Pop-out is defined as step pop-out
Var win=new PopupWindow (
Cls: ' stepwindow ',
Pop-up width and title are set
Width:600,
Title: " creating virtual machine ",
Pop-up content is set, directly obtains the content of ex_createvm_box
Content:(' #ex_createvm_box ') .contents (),
AutoShow:true,
The button of definition pop-up
Buttons:[
{ " name ": " cancel ", " text ": " cancellation " },
{ " name ": " prev ", " text ": " previous step " },
{ " name ": " next ", " text ": " next step " },
{ " name ": " ok ", " text ": " determination " }
],
In call back function, the operation performed is expected in definition after clicking on button trigger event, and after submitting to such as click, the page returns
Ask successfully or ask unsuccessfully
Definition audiomonitor, with the addition of event handling in audiomonitor, according to the change of the parameter value of user's input, link
Change
The DISPLAY ORDER of definition step window page
The respective handling of definition step
Claims (9)
1. a reusable step window implementation method, it is characterised in that: described comprises the steps:
Step 1: encapsulate a popupWindow class, it is provided that a basic pop-out；
Window style cls, the pattern of package window is defined in step 2:popupWindow；
Step 3: one popupWindow object of instantiation；
Step 4: definition cls is stepwindow；
Step 5: the width of definition window object and title；
Step 6: the acquisition mode of definition window object content of text；
Step 7: the event that definition triggers when clicking on different button in callback call back function；
Step 8: definition listeners audiomonitor；
Step 9: terminate.
Reusable step window implementation method the most according to claim 1, it is characterised in that described step window is
The one of paging exit window, this kind of pop-out by the classifying content of required displaying to multiple step pages, by one or
Multiple label buttons switch over.
Reusable step window implementation method the most according to claim 1, it is characterised in that: popupWindow class carries
For a basic pop-out, the inside encapsulates pattern and the feature of basis pop-out, can pass through instantiation one
PopupWindow object, then add the feature configuration that object is privately owned, realize the pop-up window of other classifications；
At popupWindow apoplexy due to endogenous wind, the pattern of window is encapsulated, by this configuration item of window style cls self-defining
Window style loads.
Reusable step window implementation method the most according to claim 1, it is characterised in that: definition cls is
Stepwindow, represents that current window is step window, is that stepwindow comes and other kinds of window by definition cls attribute
Mouth class area is separately.
Reusable step window implementation method the most according to claim 1, it is characterised in that: the acquisition of content of text can
To combine various ways, one is by url load linked to window object, and another kind is to obtain page by the id of page object
The content in face also loads content in window object.
Reusable step window implementation method the most according to claim 1, it is characterised in that: needs are carried at the page
The situation of some specific operation is performed after returning operating result after handing over request or clicking on button trigger event, can be at callback
The operation that function write expectation performs, returns including the page after clicking on submission and asks successfully or ask unsuccessfully.
Reusable step window implementation method the most according to claim 1, it is characterised in that: can add in trigger event
When adding the verification of the input parameter of current page and click on, the display of other buttons of current page and hiding situation, with
Time can also add in event and when current page clicks on next step, trigger the operation submitting request to.
Reusable step window implementation method the most according to claim 1, it is characterised in that: listeners audiomonitor
Defined in some comboboxs, the event handling of radio box, according to the change of the parameter value of user's input, show corresponding connection
Dynamic change.
9. according to the reusable step window implementation method described in any one of claim 1 to 8, it is characterised in that:
Some comboboxs, the event handling of radio box defined in listeners audiomonitor, according to the change of the parameter value of user's input
Change, show the change that links accordingly.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610508647.4A CN106201488B (en) | 2016-06-30 | 2016-06-30 | A kind of reusable step window implementation method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610508647.4A CN106201488B (en) | 2016-06-30 | 2016-06-30 | A kind of reusable step window implementation method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106201488A true CN106201488A (en) | 2016-12-07 |
| CN106201488B CN106201488B (en) | 2019-08-30 |
Family
ID=57462676
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610508647.4A Active CN106201488B (en) | 2016-06-30 | 2016-06-30 | A kind of reusable step window implementation method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106201488B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107479884A (en) * | 2017-08-08 | 2017-12-15 | 福建中金在线信息科技有限公司 | The generation method and generating means of pop-up box |
| CN107506124A (en) * | 2017-08-29 | 2017-12-22 | 武汉斗鱼网络科技有限公司 | Video making friends method and system |
| WO2019024522A1 (en) * | 2017-07-31 | 2019-02-07 | 武汉斗鱼网络科技有限公司 | Method, device and system for synchronous communication between title bar and pop-up bar, and storage medium |
| CN112256377A (en) * | 2020-10-26 | 2021-01-22 | 北京达佳互联信息技术有限公司 | Popup window data processing method and device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105335164A (en) * | 2015-12-01 | 2016-02-17 | 深圳市云舒网络技术有限公司 | Window drawing method and device based on windows |
| CN105653121A (en) * | 2015-12-22 | 2016-06-08 | 山东大学 | Method for realizing Undo/Redo in text edition on the basis of android system |
-
2016
- 2016-06-30 CN CN201610508647.4A patent/CN106201488B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105335164A (en) * | 2015-12-01 | 2016-02-17 | 深圳市云舒网络技术有限公司 | Window drawing method and device based on windows |
| CN105653121A (en) * | 2015-12-22 | 2016-06-08 | 山东大学 | Method for realizing Undo/Redo in text edition on the basis of android system |
Non-Patent Citations (1)
| Title |
|---|
| 凉亭下: "《CSDN博客》", 17 March 2016 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2019024522A1 (en) * | 2017-07-31 | 2019-02-07 | 武汉斗鱼网络科技有限公司 | Method, device and system for synchronous communication between title bar and pop-up bar, and storage medium |
| CN107479884A (en) * | 2017-08-08 | 2017-12-15 | 福建中金在线信息科技有限公司 | The generation method and generating means of pop-up box |
| CN107506124A (en) * | 2017-08-29 | 2017-12-22 | 武汉斗鱼网络科技有限公司 | Video making friends method and system |
| CN107506124B (en) * | 2017-08-29 | 2019-09-10 | 武汉斗鱼网络科技有限公司 | Video making friends method and system |
| CN112256377A (en) * | 2020-10-26 | 2021-01-22 | 北京达佳互联信息技术有限公司 | Popup window data processing method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106201488B (en) | 2019-08-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106201488A (en) | A kind of reusable step window implementation method | |
| US20200372559A1 (en) | Commodity customization method, apparatus, device and storage medium | |
| US7673251B1 (en) | Panel presentation | |
| CA2798979C (en) | Method of rendering a user interface | |
| CN104050568A (en) | Method and system for commodity picture displaying | |
| WO2000063817A2 (en) | Method and apparatus for supporting multiple alternative graphical user interfaces in computer-moderated electronic commerce | |
| CN105426204A (en) | Web high-speed loading rendering method based on domestic CPU, operating system and browser | |
| CN112561640A (en) | Commodity page template generation method and device, computer equipment and storage medium | |
| TW201017568A (en) | User interface for internet advertisement | |
| CN105635464A (en) | Message processing method and apparatus | |
| CN108052548A (en) | Method, system and the terminal device that a kind of webpage creates | |
| CN111324390A (en) | Device and method for realizing APP content configuration and real-time update | |
| CN113282424B (en) | Information reference method and device and electronic equipment | |
| CN106776800B (en) | Page generation method, device and system for AngularJS framework | |
| CN110096275A (en) | A kind of page processing method and device | |
| CN108932413A (en) | A kind of digital signature generation method, device and storage medium | |
| CN109040767A (en) | A kind of direct broadcasting room loading method, system, server and storage medium | |
| CN104156421B (en) | The page shows method, apparatus and system | |
| CN103198113B (en) | A kind of processing method and processing device to webpage | |
| Dai et al. | An interactive web system for integrated three-dimensional customization | |
| CN102902533A (en) | Frame revealing system and method of generating diagram by combining Java and HTML5 (Hypertxt Markup Language) | |
| CN106294392A (en) | A kind of Webpage display process and device | |
| WO2023045412A1 (en) | Page creation method, apparatus and system, computer device and storage medium | |
| CN104407853A (en) | Method for realizing TABLE multi-line simultaneous edition | |
| CN110232173A (en) | List configuration method and its system based on configurableization list engine |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 523808 19th Floor, Cloud Computing Center, Chinese Academy of Sciences, No. 1 Kehui Road, Songshan Lake Hi-tech Industrial Development Zone, Dongguan City, Guangdong Province Applicant after: G-Cloud Technology Co., Ltd. Address before: 523808 Guangdong province Dongguan City Songshan Lake Science and Technology Industrial Park Building No. 14 Keyuan pine Applicant before: G-Cloud Technology Co., Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |