這期內容當中小編將會給大家帶來有關VvvebJs怎么簡單拖拽即生成網頁 ，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創新互聯建站擁有一支富有激情的企業網站制作團隊，在互聯網網站建設行業深耕十余年，專業且經驗豐富。十余年網站優化營銷經驗，我們已為近千家中小企業提供了網站設計、成都做網站解決方案，按需定制開發，設計滿意，售后服務無憂。所有客戶皆提供一年免費網站維護!

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

相關特性

1、組件和塊/片段拖放;

2、撤銷/重做操作;

3、一個或兩個面板界面;

4、文件管理器和組件層次結構導航添加新頁面;

5、實時代碼編輯器;

6、包含示例php 腳本的圖像上傳;

7、頁面下載或導出html或保存頁面在服務器上包含示例PHP 腳本;

8、組件/塊列表搜索;

9、Bootstrap 4組件等組件。

默認情況下，編輯器附帶Bootstrap 4和Widgets組件，可以使用任何類型的組件和輸入進行擴展。

使用方式

要初始化編輯器，調用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中）定義為 以上是借助瀏覽器翻譯工具，對官網的文檔進行簡單的翻譯，可能會有些不夠準確的地方，感興趣的小伙伴可以直接查看相關文檔！

設計界面預覽

總結

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

上述就是小編為大家分享的VvvebJs怎么簡單拖拽即生成網頁 了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創新互聯-成都網站建設公司行業資訊頻道。

分享題目：VvvebJs怎么簡單拖拽即生成網頁-創新互聯
本文鏈接：http://www.yijiale78.com/article34/djgsse.html

成都網站建設公司_創新互聯，為您提供外貿建站、企業建站、網站制作、Google、靜態網站、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯