Introduction
VvvebJs is an open source webpage drag and drop automatically generated JavaScript library, you can generate the webpage style you need in a simple drag and drop way, built-in jquery and Bootstrap, you can drag and drop related components It is very convenient to construct web pages, and the code can be modified in real time. It has rich functions, easy to use, and friendly interface. It is especially suitable for web design that focuses on display. Friends who need it should not miss it!
Github address
https://github.com/givanz/VvvebJs
Related Features#cd2935#38e# 1. Drag and drop components and blocks/fragments.
By default, the editor comes with Bootstrap 4 and Widgets components, which can be extended with any type of components and input.
How to use
The following code:
To initialize the editor, call Vvveb.Builder.init. The first parameter is the URL to be loaded for editing. It must be in the same subdomain to be edited. The second parameter is the function to be called when the page is loaded. By default, the editor Gui.init() is called;
- structure
Component Group is a collection of components. For example, Bootstrap 4 group is composed of Button and Grid components. This object is only used 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[&x27;Widgets&x27;] = ["widgets/googlemaps", "widgets/video"];
Component is an object that provides html that can be placed on the canvas and attributes that can be edited when the component is selected. For example, Video Component, 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 attribute collection to Edit properties, such as text input, selection, color, grid lines, etc. For example, TextInput extends the Input object and is defined as:
var TextInput = $.extend({}, Input, {
events: {
"keyup": [&x27;onChange&x27;, &x27;input&x27;],
},
setValue: function(value) {
$(&x27;input&x27;, this.element).val(value);
},
init: function(data) {
return this.render("textinput", data);
},
}
);
The input also needs to be defined as
The above is a simple translation of the official website documents with the help of the browser translation tool. There may be some inaccurate places. Interested friends can directly view the relevant documents!
Design Interface Preview
11d1a#
Summary
VvvebJs is a very powerful web visualization generation and construction tool, so that friends who do not understand web design can also generate beautiful and generous web pages by dragging and droppingCome, let designing webpages be like designing pictures. VvvebJs is especially suitable for display webpages, and even a complex webpage design can be completed without code. Generally speaking, VvvebJs is a tool worth trying!
