网页计划，使用拖拽的办法天生网页！JavaScript库——VvvebJs

先容

VvvebJs是一个开源的网页拖拽主动天生的JavaScript库，你可以以简便拖拽的办法天生本人必要的网页样式，内置jquery和Bootstrap，你可以拖拽干系的组件举行网页的构建，十分的便利，并且可以及时修正代码，功效丰厚，使用简便，界面友好，特别合适一些专注于展现的网页计划，必要的伙伴不成错过！

Github地点

https://github.com/givanz/VvvebJs

干系特性

1、组件和块/片断拖放。
2、打消/重做利用。
3、一个或两个面板界面。
4、文件办理器和组件条理布局导航添加新页面。
5、及年代码编纂器。
6、包含示例php脚本的图像上传。
7、页面下载或导出html或保存页面在办事器上包含示例PHP脚本。
8、组件/块列表搜刮。
9、Bootstrap 4组件等组件

默许情况下，编纂器附带Bootstrap 4和Widgets组件，可以使用任何典范的组件和输入举行扩展。

使用办法

如下代码：

<script src="js/jquery.min.js"></script> <script src="js/jquery.hotkeys.js"></script>  <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script>  <script src="libs/builder/builder.js"></script>  <script src="libs/builder/undo.js"></script>  <script src="libs/builder/inputs.js"></script>  <script src="libs/builder/components-bootstrap4.js"></script> <script src="libs/builder/components-widgets.js"></script> <script> $(document).ready(function() { Vvveb.Builder.init('demo/index.html', function() { //load code after page is loaded here Vvveb.Gui.init(); }); }); </script>

要初始化编纂器，调用Vvveb.Builder.init。第一个参数是要加载以举行编纂的URL，它必需位于相反的子域中才干举行编纂。第二个参数是页面加载完成时调用的函数，默许情况下调用编纂器Gui.init();

布局

Component Group是一个组件聚集，比如Bootstrap 4组由Button和Grid等组件构成，该目标仅用于在编纂器左一边板中对组件举行分组。比如，Widgets组件组仅有两个组件视频和舆图，并被界说为如下

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

Component是一个目标，它提供可以在画布上安排的html以及在选择组件时可以编纂的属性，比如Video Component，具有Url和Target属性的html链接Component界说为：

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 }] });

在Component属性聚集中使用Input目标来编纂属性，比如文本输入，选择，颜色，网格行等。比如，TextInput扩展Input目标并界说为：

输入还必要一个在编纂器html（在editor.html中）界说为<script>标签的模板，其id为vvveb-input-inputname，比如关于文本输入为vvveb-input-textinput，界说：

以上是借助欣赏器翻译东西，对官网的文档举行简便的翻译，约莫会有些不够准确的场合，感兴致的小伙伴可以直接查察干系文档！