Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how VvvebJs can simply drag and drop to generate a web page. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

VvvebJs is an open source web page drag and drop automatically generated JavaScript library, you can simply drag and drop the way to generate their own web page style, built-in jquery and Bootstrap, you can drag and drop related components for web page construction, very convenient, and can modify the code in real time, rich features, easy to use, user-friendly, especially suitable for some web design focused on display, friends in need should not be missed!

Related characteristics

1. Drag and drop components and blocks / clips

2. Undo / redo operation

3. One or two panel interfaces

4. file manager and component hierarchy navigation to add new pages

5. Real-time code editor

6. Upload images containing sample php scripts

7. Page download or export html or save page contains sample PHP script on the server

8. Component / block list search

9, Bootstrap 4 components and other components.

By default, the editor comes with Bootstrap 4 and Widgets components, which can be extended with any type of component and input.

Mode of use

To initialize the editor, call Vvveb.Builder.init. The first parameter is the URL to be loaded for editing, which must be in the same subdomain before editing. The second argument is the function that is called when the page is loaded, and the editor Gui.init () is called by default.

structure

Component Group is a collection of components, such as the Bootstrap 4 group, which consists of components such as Button and Grid, which are used only to group components in the left panel of the editor. For example, the Widgets component group has only two components, video and map, and is defined as follows

Vvveb.ComponentsGroup ['Widgets'] = ["widgets/googlemaps", "widgets/video"]

Component is an object that provides html that can be placed on the canvas and properties that can be edited when selecting components, such as Video Component. The html link Component with Url and Target attributes is defined as:

Vvveb.Components.extend ("_ base", "html/link", {nodes: ["a"], name: "Link", properties: [{name: "Url", key: "href", htmlAttr: "href", inputtype: LinkInput}, {name: "Target", key: "target", htmlAttr: "target", inputtype: TextInput}]})

Use the Input object in the Component property collection to edit properties such as text input, selection, color, grid rows, and so on. For example, TextInput extends the Input object and defines it as:

Var TextInput = $.extend ({}, Input, {events: {"keyup": ['onChange',' input'],}, setValue: function (value) {$('input', this.element) .val (value);}, init: function (data) {return this.render ("textinput", data);},},})

Input also needs to be defined in the editor html (in editor.html) as the above is a simple translation of the documents on the official website with the help of browser translation tools, there may be some inaccurate places, interested partners can view the relevant documents directly!

Preview of the design interface

Summary

VvvebJs is a very powerful web page visualization generation and construction tool, so that friends who do not understand web design can also drag and drop to generate beautiful and generous web pages, so that designing web pages is just like designing pictures. VvvebJs is especially suitable for display pages, and even can complete a complex web page design without code. Generally speaking, VvvebJs is a tool worth trying!

This is how the VvvebJs shared by the editor is simply dragged to generate a web page. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.