绍

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组件，可以使用任何类型的组件和输入进行扩展。

使用方式

如下代码：

<!-- 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中）定义为<script>标签的模板，其id为vvveb-input-inputname，例如对于文本输入为vvveb-input-textinput，定义：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！

设计界面预览

总结

VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！

过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容

• prepend() - 在被选元素的开头插入内容

• after() - 在被选元素之后插入内容

• before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

实例

functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 标签创建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

实例

$("img").after("在后面添加文本"); $("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例

functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 创建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素vartxt3=document.createElement("big"); // 使用 DOM 创建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本}

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！