VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进行网页的构建,非常的方便,而且可以实时修改代码,功能丰富,使用简单,界面友好,特别适合一些专注于展示的网页设计,需要的朋友不可错过!
在线演示:http://www.vvveb.com/vvvebjs/editor.html
默认情况下,编辑器附带Bootstrap 4和Widgets组件,可以使用任何类型的组件和输入进行扩展。
如下代码:
<!-- jquery--> <script src="js/jquery.min.js"></script> <script src="js/jquery.hotkeys.js"></script> <!-- bootstrap--> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- builder code--> <script src="libs/builder/builder.js"></script> <!-- undo manager--> <script src="libs/builder/undo.js"></script> <!-- inputs--> <script src="libs/builder/inputs.js"></script> <!-- components--> <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对象并定义为:
var TextInput = $.extend({}, Input, { events: { "keyup": ['onChange', 'input'], }, setValue: function(value) { $('input', this.element).val(value); }, init: function(data) { return this.render("textinput", data); }, } );
输入还需要一个在编辑器html(在editor.html中)定义为