详细介绍

vvebJs是一个根据拖拽网页页面自动生成的开源系统JavaScript库。您能够经过简易的拖拽来转化成需要的网页页面款式。内嵌jquery和Bootstrap,能够拖拽有关部件来搭建网页页面。十分便捷,能够即时改动编码。功能丰富,方便使用,页面友善。尤其合适一些重视展现的网页制作,必须的小伙伴不能错过了!

js网页设计源码-javascript网页代码大全-第1张图片GitHub详细地址

https://github.com/givanz/VvvebJs

有关特点

1.部件和块/精彩片段拖拽。2.撤消/改版实际操作。3.一个或2个控制面板页面。4.文件浏览器和部件结构分析导航栏加上html页面。5.即时文本编辑器。6.包括实例php脚本制作的图象提交。7.网页页面免费下载或导出来html或储存网页页面在网络服务器上包括实例PHP脚本制作。8.部件/块目录检索。9.Bootstrap 4部件等部件

默认设置状况下,在线编辑器附加Bootstrap 4和Widgets部件,这种部件可以用一切种类的部件和键入开展拓展。

应用方法

下列编码:

$(document).ready(function() {Vvveb.Builder.init('demo/index.html', function() {//load code after page is loaded hereVvveb.Gui.init();});});

要复位在线编辑器,请启用vveb。Builder.init第一个主要参数是要载入开展修改的URL,它务必在要编写的同一个子域中。第二个主要参数是载入网页页面时获取的涵数。默认设置状况下,启用在线编辑器Gui.init()。

构造js网页设计源码-javascript网页代码大全-第2张图片部件组是部件的结合。比如,Bootstrap 4组由按键和网格图等部件构成。此目标仅用以对在线编辑器左边控制面板中的部件开展排序。比如,Widgets部件组仅有2个部件,视頻中地图,界定如下所示。

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

部件是一个目标,它给予可置放在画板上的html和挑选部件(如视頻部件)时可编写的特性。具备Url和总体目标特性的html连接部件界定如下所示:

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

应用部件特性结合中的键入目标来编写特性,如文字键入.挑选.色调.分隔线等。比如,文字键入拓展了键入目标,界定为:

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中)中界定为标识的模版,其id为vvveeb-input-inputname,比如,针对文字键入,vvveeb-input-textinput,界定为:

之上是依靠浏览器翻译专用工具对官方网站文本文档的简单翻译,但很有可能有一些不确切的地区。有兴趣的小伙伴能够立即查询有关文本文档!

设计方案页面浏览。

js网页设计源码-javascript网页代码大全-第3张图片js网页设计源码-javascript网页代码大全-第4张图片js网页设计源码-javascript网页代码大全-第5张图片js网页设计源码-javascript网页代码大全-第6张图片

汇总引言

vvbjs是一个十分庞大的网页页面数据可视化转化成和搭建专用工具,让不明白网页制作的小伙伴能够实现拖动的方法转化成精致的网页页面,让设计网页如同设计图一样。vvbjs尤其合适表明网页页面,乃至还可以无需编码就能进行繁杂的网页制作。总体来说,vvbjs是一个非常值得试着的专用工具!

评论(0条)

刀客源码 游客评论