這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)VvvebJs怎么簡單拖拽即生成網(wǎng)頁 ,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
站在用戶的角度思考問題,與客戶深入溝通,找到永康網(wǎng)站設(shè)計與永康網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都網(wǎng)站設(shè)計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋永康地區(qū)。
VvvebJs是一個開源的網(wǎng)頁拖拽自動生成的JavaScript庫,你可以以簡單拖拽的方式生成自己需要的網(wǎng)頁樣式,內(nèi)置jquery和Bootstrap,你可以拖拽相關(guān)的組件進(jìn)行網(wǎng)頁的構(gòu)建,非常的方便,而且可以實時修改代碼,功能豐富,使用簡單,界面友好,特別適合一些專注于展示的網(wǎng)頁設(shè)計,需要的朋友不可錯過! |
相關(guān)特性
1、組件和塊/片段拖放;
2、撤銷/重做操作;
3、一個或兩個面板界面;
4、文件管理器和組件層次結(jié)構(gòu)導(dǎo)航添加新頁面;
5、實時代碼編輯器;
6、包含示例php 腳本的圖像上傳;
7、頁面下載或?qū)С鰄tml或保存頁面在服務(wù)器上包含示例PHP 腳本;
8、組件/塊列表搜索;
9、Bootstrap 4組件等組件。
默認(rèn)情況下,編輯器附帶Bootstrap 4和Widgets組件,可以使用任何類型的組件和輸入進(jìn)行擴展。
使用方式
要初始化編輯器,調(diào)用Vvveb.Builder.init。第一個參數(shù)是要加載以進(jìn)行編輯的URL,它必須位于相同的子域中才能進(jìn)行編輯。第二個參數(shù)是頁面加載完成時調(diào)用的函數(shù),默認(rèn)情況下調(diào)用編輯器Gui.init();
結(jié)構(gòu)
Component Group是一個組件集合,例如Bootstrap 4組由Button和Grid等組件組成,該對象僅用于在編輯器左側(cè)面板中對組件進(jìn)行分組。例如,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對象來編輯屬性,例如文本輸入,選擇,顏色,網(wǎng)格行等。例如,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中)定義為 以上是借助瀏覽器翻譯工具,對官網(wǎng)的文檔進(jìn)行簡單的翻譯,可能會有些不夠準(zhǔn)確的地方,感興趣的小伙伴可以直接查看相關(guān)文檔!
設(shè)計界面預(yù)覽
總結(jié)
VvvebJs是一個非常強大的網(wǎng)頁可視化生成構(gòu)建工具,讓不懂網(wǎng)頁設(shè)計的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來,讓設(shè)計網(wǎng)頁就像設(shè)計圖片一樣,VvvebJs特別適合展示型網(wǎng)頁,甚至可以不需要代碼就能完成一項復(fù)雜的網(wǎng)頁設(shè)計,總體來說,VvvebJs是一個值得嘗試的工具!
上述就是小編為大家分享的VvvebJs怎么簡單拖拽即生成網(wǎng)頁 了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享名稱:VvvebJs怎么簡單拖拽即生成網(wǎng)頁
轉(zhuǎn)載來源:http://muchs.cn/article26/ghsccg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、App設(shè)計、Google、網(wǎng)站排名、服務(wù)器托管、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)