介紹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地址
相關(guān)特性
默認(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();
 Component Group是一個(gè)組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對(duì)象僅用于在編輯器左側(cè)面板中對(duì)組件進(jìn)行分組。例如，Widgets組件組只有兩個(gè)組件視頻和地圖，并被定義為如下 Vvveb.ComponentsGroup['Widgets'] = ['widgets/googlemaps', 'widgets/video']; Component是一個(gè)對(duì)象，它提供可以在畫布上放置的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對(duì)象來編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴(kuò)展Input對(duì)象并定義為： 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，例如對(duì)于文本輸入為vvveb-input-textinput，定義： <script id='vvveb-input-textinput' type='text/html'> <div> <input name='{%=key%}' type='text' class='form-control'/> </div> </script> 以上是借助瀏覽器翻譯工具，對(duì)官網(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è)值得嘗試的工具！ |
|
|
