登陆

网页规划,运用拖拽的方法生成网页!JavaScript库——VvvebJs

admin 2019-08-23 185人围观 ,发现0个评论

介绍

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组件,能够运用任何类型的组件和输入进行扩展。

运用方法

如下代码:


















要初始化修改器,调用Vvveb.Builde网页规划,运用拖拽的方法生成网页!JavaScript库——VvvebJsr.init。第一个参数是要加载以进行修改的URL,它有必要坐落相同的子域中才干进行修改。第二个参数是页面加载完结时调用的函数,默许情况下调用修改器Gui.init();


  • 结构


Component Group是一个组件调集,例如Bootstrap 4组由Button和Grid等组件组成,该目标仅用于在修改器左边面板中对组件进行分组。例如,Widgets组件组只要两个组件视频和地图,并被界说为如下

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

Com网页规划,运用拖拽的方法生成网页!JavaScript库——VvvebJsponent是一个目标,它供给能够在画布上放置的html以及在挑选组件时能够修改的特点,例如Video Component,具有Url和Target特点的html链接Compo患得患失nent界说为:


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目标来修改特点,例如文本输入,挑选,色彩,网格行等。例如,Tex网页规划,运用拖拽的方法生成网页!JavaScript库——VvvebJstInput扩展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中)界说为


以上是凭借浏览器翻译东西,对官网的文档进行简略的翻译,可能会有些不行精确的当地,感兴趣的小伙伴能够直接检查相关文档!

规划界面预览






总结

VvvebJs是一个十分强壮的网页可视化生成构建东西,让不明白网页规划的小伙伴们也能够经过拖拽来生成美观大方的网页出来,让规划网页就像规划图片相同,VvvebJs特别合适展现型网页,乃至能够不需求代码就能完结一项杂乱的网页规划,整体来说,VvvebJs是一个值得测验的东西!

请关注微信公众号
微信二维码
不容错过
Powered By Z-BlogPHP