網(wǎng)頁設(shè)計(jì)，使用拖拽的方式生成網(wǎng)頁！JavaScript庫-VvvebJs

紹

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

Github地址

https://github.com/givanz/VvvebJs

使用方式

如下代碼：

<!-- 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等組件組成，該對(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)行簡(jiǎ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è)值得嘗試的工具！

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個(gè) HTML 標(biāo)簽（組件），通過這些標(biāo)簽避免你在項(xiàng)目中集成復(fù)雜第三方組件，比如日歷組件、顏色選擇、進(jìn)度條等...，簡(jiǎn)單的標(biāo)簽就能很方便的調(diào)用系統(tǒng)組件。

一、顏色選擇組件（Color Picker）

在項(xiàng)目中，你可能希望通過調(diào)色板組件動(dòng)態(tài)調(diào)整顏色，這時(shí)你可以使用 <input type="color"> 就可以輕松調(diào)用一個(gè)調(diào)色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標(biāo)簽（Blockquote）

在文章排版時(shí)，有時(shí)候我們需要引用一些信息，這時(shí)我們需要用特殊的樣式進(jìn)行強(qiáng)調(diào)，這時(shí)你可以使用<blockquote> 標(biāo)簽來強(qiáng)調(diào)你用的內(nèi)容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個(gè)音頻播放器是一個(gè)費(fèi)時(shí)費(fèi)力又有挑戰(zhàn)性的工作，但是你現(xiàn)在可以使用<audio>標(biāo)簽就能很輕松的調(diào)用。系統(tǒng)的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調(diào)用系統(tǒng)的音頻組件，我們還可以使用<video> 標(biāo)簽調(diào)用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點(diǎn)擊標(biāo)題展開對(duì)應(yīng)的信息內(nèi)容，這時(shí) <details> 標(biāo)簽就派上用場(chǎng)了，示例效果如下所示：

gif

項(xiàng)目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項(xiàng)目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復(fù)雜的樣式和交互需求，使用<input type="date"> 這個(gè)標(biāo)簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個(gè)比較常見的組件，主要應(yīng)用在數(shù)值范圍的篩選上，方便用戶進(jìn)行選擇，這時(shí)我們可以使用 <input type="range"> ，我們可以設(shè)置最小值、最大值以及當(dāng)前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內(nèi)容編輯（Content Editor）

為了讓內(nèi)容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標(biāo)簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當(dāng)前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標(biāo)簽（Picture Tag）

有時(shí)候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標(biāo)簽的話，你需要做的工作就會(huì)許多，但是使用<picture> 標(biāo)簽就能很輕松的完成在不同分辨率下顯示不同圖片的設(shè)置，調(diào)整瀏覽器的大小，就會(huì)根據(jù)窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進(jìn)度條（Progress Bar）

進(jìn)度條組件也是個(gè)很常見的組件，你可以使用<progress> 標(biāo)簽就能輕松完成相關(guān)外觀的設(shè)置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項(xiàng)比較多，用戶選擇就會(huì)比較困難，用戶可能希望結(jié)合輸入，能很方便的定位到下拉組件的內(nèi)容，這時(shí)候你可以使用 <datalist> 標(biāo)簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對(duì)頁面某部分進(jìn)行詳細(xì)介紹時(shí)，你可能需要鼠標(biāo)經(jīng)過此區(qū)域顯示詳細(xì)的提示框效果，這時(shí)我們可以使用 title 屬性就能輕松實(shí)現(xiàn)，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結(jié)束語

今天的文章就分享到這里，希望在日后的項(xiàng)目中你能想起今天分享的這12個(gè)標(biāo)簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

ue+.NetCore前后端分離，支持對(duì)前端、后臺(tái)基礎(chǔ)業(yè)務(wù)代碼擴(kuò)展的快速發(fā)開框架

框架可直上手開發(fā)這些功能

Vol.WebApi類庫可獨(dú)立用于restful api服務(wù)單獨(dú)部署,用于其他系統(tǒng)單獨(dú)提供接口,直接上手編寫業(yè)務(wù)代碼即可。
Vue+Vol.WebApi 可用于現(xiàn)有框架前后端分離進(jìn)行開發(fā)
Vol.Web類庫可用于傳統(tǒng)MVC+Razor方式進(jìn)行項(xiàng)目開發(fā)
Vol.Builder類庫可作為一個(gè)獨(dú)立的代碼生成器,可生成cshtml頁面、Vue頁面、Model文件、Service與Repository.cs業(yè)務(wù)處理代碼類
可作為一個(gè)獨(dú)立站點(diǎn)來發(fā)布Editor編輯器生成的靜態(tài)html網(wǎng)頁.

框架特點(diǎn)

支持前端、后臺(tái)基礎(chǔ)業(yè)務(wù)代碼動(dòng)態(tài)擴(kuò)展，可在現(xiàn)有框架增、刪、改、查、導(dǎo)入、導(dǎo)出、審核基礎(chǔ)業(yè)務(wù)上擴(kuò)展復(fù)雜的業(yè)務(wù)代碼
基本業(yè)務(wù)全部由框架完成，上手即可對(duì)基礎(chǔ)業(yè)務(wù)以外的代碼進(jìn)行擴(kuò)展
上手簡(jiǎn)單，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可選) 及以上版本的開發(fā)環(huán)境
學(xué)習(xí)成本低，封裝了常用可擴(kuò)展組件及Demo(前端基于Iview/Element-UI組件進(jìn)行了二次封裝、后臺(tái)提供了大量的擴(kuò)展方法)
開發(fā)效率高,內(nèi)定制開發(fā)的代碼生成器,生成前端(Vue、后臺(tái)代碼),代碼生成器已完成90%以上的重復(fù)工作，只需要在提供的擴(kuò)展類型中實(shí)現(xiàn)其他業(yè)務(wù)
前端vue頁面表單下拉/多選框完成自動(dòng)綁定數(shù)據(jù)源，不需要寫任何代碼,并支持?jǐn)U展自定開發(fā)綁定。
后臺(tái)已完成權(quán)限、菜單、JWT等內(nèi)部功能

如果你沒有做過webpack+vue工程化開發(fā)項(xiàng)目，可能會(huì)剛開始相當(dāng)不適應(yīng)，或者安裝環(huán)境總是出問題，但只要你熟悉開發(fā)流程后，你會(huì)發(fā)現(xiàn)采用Vue開發(fā)比Jquery爽太多了。上手項(xiàng)目需重點(diǎn)了解基礎(chǔ)Vue語法，特別是了解組件、路由及import的使用

開發(fā)及依賴環(huán)境

VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可選，沒有redis的在appsetting.json中不用配置，默認(rèn)使用內(nèi)置IMemory)、

VsCode、Vue2.0（webpack、node.js,如果沒有此環(huán)境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui

項(xiàng)目地址：https://github.com/cq-panda/Vue.NetCore

在線咨詢

上一篇：如何編寫HTML提交按鈕代碼？
下一篇：CSS各種邊框背景大全

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商