CN108628924A - A method of the html5 pages are generated based on JavaScript - Google Patents
A method of the html5 pages are generated based on JavaScript Download PDFInfo
- Publication number
- CN108628924A CN108628924A CN201711235553.5A CN201711235553A CN108628924A CN 108628924 A CN108628924 A CN 108628924A CN 201711235553 A CN201711235553 A CN 201711235553A CN 108628924 A CN108628924 A CN 108628924A
- Authority
- CN
- China
- Prior art keywords
- alternative
- window
- javascript
- html5 pages
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 239000000758 substrate Substances 0.000 claims abstract description 15
- 230000002452 interceptive effect Effects 0.000 claims description 28
- 230000003993 interaction Effects 0.000 claims description 14
- 238000005516 engineering process Methods 0.000 claims description 6
- 230000006835 compression Effects 0.000 claims description 5
- 238000007906 compression Methods 0.000 claims description 5
- 230000001960 triggered effect Effects 0.000 claims description 4
- 238000005538 encapsulation Methods 0.000 claims description 3
- 230000010076 replication Effects 0.000 claims description 3
- 238000012800 visualization Methods 0.000 claims description 3
- 241000208340 Araliaceae Species 0.000 claims description 2
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 claims description 2
- 235000003140 Panax quinquefolius Nutrition 0.000 claims description 2
- 235000008434 ginseng Nutrition 0.000 claims description 2
- 238000013500 data storage Methods 0.000 claims 1
- 230000008901 benefit Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000004321 preservation Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
The present invention provides a kind of methods generating the html5 pages based on JavaScript, it is pulled including working interface structure and the page and generates two steps, when carrying out working interface structure, it selects first and builds substrate interface, configured with independently arranged the preview window and alternative templates frame in substrate interface, then configuration tool window is configured with multiple alternative tool box in tool window, and the multiple alternative tool box includes alternative picture box, alternative text box and alternative animated frame；When carrying out page dragging generation, template is selected from alternative templates frame and is shown in the preview window, it is then shown in editable frame after selected, then by from selecting picture, text and animation in alternative tool box and the template being drawn in editable frame and editor；The required html5 pages can be obtained by finally preserving publication.This method can easily and quickly make the html5 pages, and be convenient for secondary development, and user experience is good.
Description
Technical field
The present invention relates to Internet technical fields, and the html5 pages are generated based on JavaScript more particularly to a kind of
Method.
Background technology
Currently, pulling, to directly generate animation, the html5 pages, the technology of app ripe, however function realization method, opens
Send out language respectively not just as, can not secondary development, program is big and interim card, while big Internet company is also internal use, technology
Secrecy, causes that Technique Popularizing is poor, customer experience is also very poor.
Invention content
It is an object of the present invention to provide a kind of method generating the html5 pages based on JavaScript, this method
The html5 pages can be easily and quickly made, and are convenient for secondary development, user experience is good.
Particularly, the present invention provides a kind of methods generating the html5 pages based on JavaScript, including working interface
Structure and the page, which pull, generates two steps,
When carrying out working interface structure, substrate interface is selected and built first, configured with independently arranged in substrate interface
The preview window and alternative templates frame, then configuration tool window are configured with multiple alternative tool box in tool window, the multiple
Alternative tool box includes alternative picture box, alternative text box and alternative animated frame；
When carrying out page dragging generation, template is selected from alternative templates frame and is shown in the preview window, after selecting
It is then shown in editable frame, then by selecting picture, text and animation from alternative tool box and being drawn to editable
Template in frame and editor；
The required html5 pages can be obtained by finally preserving publication.
For above-mentioned technical proposal, inventor also has further Optimized Measures.
Preferably, when building substrate interface, it is also configured with UE interactive windows in substrate interface, is configured in UE interactive windows
Pattern parameter and interaction parameter are independently arranged for user for interaction parameter setting options.
Further, UE interactive windows include page editing interactive window, and alternative templates frame includes that several configurations are different
Alternative figure layer pass through page editing interactive window and carry out layer style parameter and figure layer interaction parameter and after choosing figure layer
Setting.
Further, UE interactive windows include tool editor's interactive window, selected when carrying out page dragging generation
Template on include several figure layers, selected picture, text and animation, which can drag, to be placed in a certain figure layer, and is passed through
Tool editor's interactive window carries out picture, text and the pattern parameter of animation and the setting of interaction parameter, realizes editor.
Preferably, when carrying out page dragging generation, the alternative tool box is clicked or pulled using Javacript technologies
In component, that is, picture, text or animation to editable frame in template on, and then trigger mouse event mousedown and replicate
In figure layer on component to template, the duplication that mouse event mouseup completes corresponding component is triggered when unclamping mouse button, then
After the setting for carrying out pattern parameter and interaction parameter, realize that visualization drag operation generates the html5 pages.
Further, when the template into editable frame adds animation, it is dynamic that css3 is generated using the libraries Animate.css
It draws, encapsulation js, which is realized, to be visualized, then is configured to selected animation by tool editor interactive window, then is used
Javascript binds monitored object, and the parameter value of object is rendered by browser.
Preferably, it is configured with local data base in this method, may be selected to deposit after the making of the html5 pages needed for completing
It is stored in the local data base, is used for secondary development.
Preferably, the method is based on WEB and realizes online editing, is packaged compression and is compressed using webpack, data are deposited
The server of storage is Cloud Server or own separate server.
Compared with prior art, the advantage of the invention is that：
The method for generating the html5 pages based on JavaScript described in the invention, can be by pulling in database
Picture, text or animation, and realize the editor of interface various pieces, and then the interfaces html5 are generated, the adjustability at interface is high,
And code is disclosed, secondary can be adjusted, it is convenient for the user to operate.
In addition, this method is carried out based on WEB, limited without space, whole operation process is visualized operation, finding
I.e. gained, solution will never write the puzzlement of code, be suitable for each phase user, and software architecture has server, data by oneself in user
Safety is ensured.
According to the following detailed description of specific embodiments of the present invention in conjunction with the accompanying drawings, those skilled in the art will be brighter
The above and other objects, advantages and features of the present invention.
Description of the drawings
Some specific embodiments that the invention will be described in detail by way of example and not limitation with reference to the accompanying drawings hereinafter.
Identical reference numeral denotes same or similar component or part in attached drawing.It should be appreciated by those skilled in the art that these
What attached drawing was not necessarily drawn to scale.In attached drawing：
Fig. 1 is the work flow diagram of the method according to an embodiment of the invention that the html5 pages are generated based on JavaScript.
Specific implementation mode
Present embodiment describes a kind of methods generating the html5 pages based on JavaScript, and workflow is substantially such as Fig. 1
Shown, generation method is clicked using Javacript or is pulled in the alternate data by the setting of template and alternate data
Picture, text or animation are to the substrate interface and then trigger mousedown replication components, and the html5 pages are generated after preservation.
Compression is packaged using webpack when editor completes to preserve, for code less than 100kB, code is few after compression, functional stronger.
Particularly, it is described based on JavaScript generate the html5 pages method may include working interface structure and
The page, which pulls, generates two steps,
When carrying out working interface structure, substrate interface is selected and built first, configured with independently arranged in substrate interface
The preview window and alternative templates frame, then configuration tool window are configured with multiple alternative tool box in tool window, the multiple
Alternative tool box includes alternative picture box, alternative text box and alternative animated frame；Carry out the page pull generate when, from alternative
It selects template and to be shown in the preview window in pattern plate bolster, be then shown in editable frame after selected, then by from standby
Selected picture, text and animation and the template being drawn in editable frame and editor in selection tool frame；
The required html5 pages can be obtained by finally preserving publication.
And when building substrate interface, for the ease of data interaction and editable personal settings, the substrate interface
In be also configured with UE interactive windows, pattern ginseng is independently arranged for user for configuration interactive parameter setting option in UE interactive windows
Number and interaction parameter.
Further, UE interactive windows include page editing interactive window, and alternative templates frame includes that several configurations are different
Alternative figure layer pass through page editing interactive window and carry out layer style parameter and figure layer interaction parameter and after choosing figure layer
Setting.
UE interactive windows include tool editor's interactive window, when carrying out page dragging generation, are wrapped in selected template
Several figure layers are included, selected picture, text and animation, which can drag, to be placed in a certain figure layer, and is handed over by tool editor
Mutual window carries out picture, text and the pattern parameter of animation and the setting of interaction parameter, realizes editor.
Typically, page editing interactive window and tool editor's interactive window are independently arranged, in order to
Family is operated.
When carrying out page dragging generation, the group in the alternative tool box is clicked or pulled using Javacript technologies
In template in part, that is, picture, text or animation to editable frame, and then trigger mouse event mousedown replication components extremely
In figure layer in template, mouse event mouseup is triggered when unclamping mouse button and completes the duplication of corresponding component, then carries out sample
After the setting of formula parameter and interaction parameter, realize that visualization drag operation generates the html5 pages.
Further, when the template into editable frame adds animation, it is dynamic that css3 is generated using the libraries Animate.css
It draws, encapsulation js, which is realized, to be visualized, then is configured to selected animation by tool editor interactive window, then is used
Javascript binds monitored object, the parameter value of object is rendered by browser, such as width, height, transform
Deng.
In addition, can also configure local data base in this method, may be selected to deposit after the making of the html5 pages needed for completing
It is stored in the local data base, is used for secondary development.
Preferably, the method is based on WEB and realizes online editing, is packaged compression and is compressed using webpack, data are deposited
The server of storage is Cloud Server or own separate server.
In summary, the method described in the invention for generating the html5 pages based on JavaScript, can be by dragging
Picture, text or the animation in database are dragged, and realizes the editor of interface various pieces, and then generates the interfaces html5, interface
Adjustability it is high, and code is disclosed, secondary can be adjusted, convenient for the user to operate.
In addition, this method is carried out based on WEB, limited without space, whole operation process is visualized operation, finding
I.e. gained, solution will never write the puzzlement of code, be suitable for each phase user, and software architecture has server, data by oneself in user
Safety is ensured.
So far, although those skilled in the art will appreciate that present invention has been shown and described in detail herein multiple shows
Example property embodiment still without departing from the spirit and scope of the present invention, still can according to the present disclosure directly
Determine or derive many other variations or modifications consistent with the principles of the invention.Therefore, the scope of the present invention is understood that and recognizes
It is set to and covers other all these variations or modifications.
Claims (8)
1. a kind of method generating the html5 pages based on JavaScript, which is characterized in that including working interface structure and page
Orly, which is dragged, generates two steps,
When carrying out working interface structure, substrate interface is selected and built first, configured with independently arranged in substrate interface
The preview window and alternative templates frame, then configuration tool window are configured with multiple alternative tool box in tool window, the multiple
Alternative tool box includes alternative picture box, alternative text box and alternative animated frame；
When carrying out page dragging generation, template is selected from alternative templates frame and is shown in the preview window, after selecting
It is then shown in editable frame, then by selecting picture, text and animation from alternative tool box and being drawn to editable
Template in frame and editor；
The required html5 pages can be obtained by finally preserving publication.
2. the method according to claim 1 for generating the html5 pages based on JavaScript, which is characterized in that building
It is also configured with UE interactive windows when substrate interface, in substrate interface, configuration interactive parameter setting option in UE interactive windows is used for
Pattern parameter and interaction parameter is independently arranged in user.
3. the method according to claim 2 for generating the html5 pages based on JavaScript, which is characterized in that UE is interacted
Window includes page editing interactive window, and alternative templates frame includes that several configure different alternative figure layers, and are choosing figure layer
Afterwards, the setting of layer style parameter and figure layer interaction parameter is carried out by page editing interactive window.
4. the method according to claim 3 for generating the html5 pages based on JavaScript, which is characterized in that UE is interacted
Window includes tool editor's interactive window, includes several figure layers, institute in selected template when carrying out page dragging generation
Selected picture, text and animation, which can drag, to be placed in a certain figure layer, and by tool editor's interactive window carry out picture,
Editor is realized in text and the pattern parameter of animation and the setting of interaction parameter.
5. the method according to any one of claim 1 to 4 for generating the html5 pages based on JavaScript, feature
Be, carry out the page pull generate when, click or pull component in the alternative tool box i.e. using Javacript technologies
In template in picture, text or animation to editable frame, and then mouse event mousedown replication components are triggered to template
On figure layer in, mouse event mouseup is triggered when unclamping mouse button and completes the duplication of corresponding component, then carries out pattern ginseng
After the setting of number and interaction parameter, realize that visualization drag operation generates the html5 pages.
6. the method according to claim 5 for generating the html5 pages based on JavaScript, which is characterized in that can
When template in edit box adds animation, css3 animations are generated using the libraries Animate.css, encapsulation js, which is realized, to be visualized,
Selected animation is configured by tool editor interactive window again, then monitored object is bound using javascript, by clear
Device of looking at renders the parameter value of object.
7. the method according to claim 1 for generating the html5 pages based on JavaScript, which is characterized in that this method
In be configured with local data base, complete needed for the html5 pages making after may be selected to be stored in the local data base,
For secondary development.
8. the method according to claim 1 for generating the html5 pages based on JavaScript, which is characterized in that the side
Method is based on WEB and realizes online editing, is packaged compression and is compressed using webpack, the server of data storage is cloud service
Device or own separate server.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711235553.5A CN108628924A (en) | 2017-11-30 | 2017-11-30 | A method of the html5 pages are generated based on JavaScript |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711235553.5A CN108628924A (en) | 2017-11-30 | 2017-11-30 | A method of the html5 pages are generated based on JavaScript |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108628924A true CN108628924A (en) | 2018-10-09 |
Family
ID=63705921
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711235553.5A Pending CN108628924A (en) | 2017-11-30 | 2017-11-30 | A method of the html5 pages are generated based on JavaScript |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108628924A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109375919A (en) * | 2018-11-30 | 2019-02-22 | 成都知道创宇信息技术有限公司 | A method of generating and send marketing Mail Contents page |
| CN109634603A (en) * | 2018-11-28 | 2019-04-16 | 广东智合创享营销策划有限公司 | A kind of H5 page animation method and apparatus based on Canvas painting canvas |
| CN110636382A (en) * | 2019-09-17 | 2019-12-31 | 北京达佳互联信息技术有限公司 | Method and device for adding visual object in video, electronic equipment and storage medium |
| CN113806659A (en) * | 2021-09-16 | 2021-12-17 | 大连华信计算机技术股份有限公司 | WYSIWYG portal custom site system and operation method |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080072164A1 (en) * | 2004-06-24 | 2008-03-20 | Heeseob Park | Methods and the Program-Recording Medium for Creating, Editing and Trading Home Page Components to Assemble a Home Page and a Personal Portal Site Directly in Wysiwyg on Web Browser |
| CN105159674A (en) * | 2015-08-31 | 2015-12-16 | 深圳市茁壮网络股份有限公司 | Method, device and terminal for producing image-text applications |
| CN106445520A (en) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | Method and device for making visualized themed page |
-
2017
- 2017-11-30 CN CN201711235553.5A patent/CN108628924A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080072164A1 (en) * | 2004-06-24 | 2008-03-20 | Heeseob Park | Methods and the Program-Recording Medium for Creating, Editing and Trading Home Page Components to Assemble a Home Page and a Personal Portal Site Directly in Wysiwyg on Web Browser |
| CN105159674A (en) * | 2015-08-31 | 2015-12-16 | 深圳市茁壮网络股份有限公司 | Method, device and terminal for producing image-text applications |
| CN106445520A (en) * | 2016-09-23 | 2017-02-22 | 北京赢点科技有限公司 | Method and device for making visualized themed page |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109634603A (en) * | 2018-11-28 | 2019-04-16 | 广东智合创享营销策划有限公司 | A kind of H5 page animation method and apparatus based on Canvas painting canvas |
| CN109375919A (en) * | 2018-11-30 | 2019-02-22 | 成都知道创宇信息技术有限公司 | A method of generating and send marketing Mail Contents page |
| CN110636382A (en) * | 2019-09-17 | 2019-12-31 | 北京达佳互联信息技术有限公司 | Method and device for adding visual object in video, electronic equipment and storage medium |
| CN113806659A (en) * | 2021-09-16 | 2021-12-17 | 大连华信计算机技术股份有限公司 | WYSIWYG portal custom site system and operation method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108628924A (en) | A method of the html5 pages are generated based on JavaScript | |
| CN105653644B (en) | A kind of page constructor and page building method | |
| CN108345456A (en) | Page code generation method, device, computer equipment and storage medium | |
| CN104267947B (en) | A kind of editor's method of pop-up picture and pop-up picture editor's device | |
| US8918758B2 (en) | Systems and methods for storing object and action data during media content development | |
| US9575950B2 (en) | Systems and methods for managing spreadsheet models | |
| WO2023045862A1 (en) | Application page development method and apparatus, and system, computing device and storage medium | |
| US20120136684A1 (en) | Fast, dynamic, data-driven report deployment of data mining and predictive insight into business intelligence (bi) tools | |
| EP4130978A1 (en) | System and method for streamlining user interface development | |
| CN109614601A (en) | Form processing method, device, equipment and readable medium based on web | |
| JPH08505970A (en) | International data processing system | |
| JPH08505719A (en) | Menu state system | |
| US20140325418A1 (en) | Automatically manipulating visualized data based on interactivity | |
| US20140331179A1 (en) | Automated Presentation of Visualized Data | |
| Lidal et al. | Geological storytelling: graphically exploring and communicating geological sketches | |
| CN111488102A (en) | Modular editing method, terminal, server and system for graphic animation | |
| KR101523328B1 (en) | Method of providing pose-library for three-dimensional animation character, apparatus performing the same and storage media storing the same | |
| WO2014182582A1 (en) | Transforming visualized data through visual analytics based on interactivity | |
| Dunk et al. | Selection methods for interactive creation and management of objects in 3D immersive environments | |
| CN108614657B (en) | Image synthesis method, device and equipment and image carrier thereof | |
| CN111949267B (en) | UI front end generation method and device | |
| CN110908649B (en) | Detachable and combinable chart drawing method and system | |
| CN112184861A (en) | Lyric editing and displaying method and device and storage medium | |
| Matzkin | Weak measurements of trajectories in quantum systems: classical, Bohmian and sum over paths | |
| Wakil et al. | Extracting the features of modern web applications based on web engineering methods |
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 | ||
| CB02 | Change of applicant information |
Address after: 215000 floor 6, science and Technology Plaza, Qianjin East Road, Kunshan Development Zone, Suzhou, Jiangsu Applicant after: Matrix digital technology (Suzhou) Co.,Ltd. Address before: 215000 floor 6, science and Technology Plaza, Qianjin East Road, Kunshan Development Zone, Suzhou, Jiangsu Applicant before: KUNSHAN UBUNTU INFORMATION TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20181009 |
|
| WD01 | Invention patent application deemed withdrawn after publication |