紹

VvvebJs是一個(gè)開源的網(wǎng)頁拖拽自動(dòng)生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網(wǎng)頁樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁的構(gòu)建，非常的方便，而且可以實(shí)時(shí)修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網(wǎng)頁設(shè)計(jì)，需要的朋友不可錯(cuò)過！

Github地址

https://github.com/givanz/VvvebJs

相關(guān)特性

• 1、組件和塊/片段拖放。
• 2、撤銷/重做操作。
• 3、一個(gè)或兩個(gè)面板界面。
• 4、文件管理器和組件層次結(jié)構(gòu)導(dǎo)航添加新頁面。
• 5、實(shí)時(shí)代碼編輯器。
• 6、包含示例php腳本的圖像上傳。
• 7、頁面下載或?qū)С鰄tml或保存頁面在服務(wù)器上包含示例PHP腳本。
• 8、組件/塊列表搜索。
• 9、Bootstrap 4組件等組件

默認(rèn)情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進(jìn)行擴(kuò)展。

使用方式

如下代碼：

<!-- 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>

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個(gè)參數(shù)是要加載以進(jìn)行編輯的URL，它必須位于相同的子域中才能進(jìn)行編輯。第二個(gè)參數(shù)是頁面加載完成時(shí)調(diào)用的函數(shù)，默認(rèn)情況下調(diào)用編輯器Gui.init();

• 結(jié)構(gòu)

Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側(cè)面板中對組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下

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

Component是一個(gè)對象，它提供可以在畫布上放置的html以及在選擇組件時(shí)可以編輯的屬性，例如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對象來編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展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);
	},
 }
);

輸入還需要一個(gè)在編輯器html（在editor.html中）定義為<script>標(biāo)簽的模板，其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>

以上是借助瀏覽器翻譯工具，對官網(wǎng)的文檔進(jìn)行簡單的翻譯，可能會(huì)有些不夠準(zhǔn)確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計(jì)界面預(yù)覽

總結(jié)

VvvebJs是一個(gè)非常強(qiáng)大的網(wǎng)頁可視化生成構(gòu)建工具，讓不懂網(wǎng)頁設(shè)計(jì)的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來，讓設(shè)計(jì)網(wǎng)頁就像設(shè)計(jì)圖片一樣，VvvebJs特別適合展示型網(wǎng)頁，甚至可以不需要代碼就能完成一項(xiàng)復(fù)雜的網(wǎng)頁設(shè)計(jì)，總體來說，VvvebJs是一個(gè)值得嘗試的工具！

過 jQuery，可以很容易地添加新元素/內(nèi)容。

添加新的 HTML 內(nèi)容

我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法：

• append() - 在被選元素的結(jié)尾插入內(nèi)容

• prepend() - 在被選元素的開頭插入內(nèi)容

• after() - 在被選元素之后插入內(nèi)容

• before() - 在被選元素之前插入內(nèi)容

jQuery append() 方法

jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。

實(shí)例

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

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。

實(shí)例

$("p").prepend("在開頭追加文本");

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

在上面的例子中，我們只在被選元素的開頭/結(jié)尾插入文本/HTML。

不過，append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們創(chuàng)建若干個(gè)新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

實(shí)例

functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內(nèi)容。

jQuery before() 方法在被選元素之前插入內(nèi)容。

實(shí)例

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

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

after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。

在下面的例子中，我們創(chuàng)建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

實(shí)例

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

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！