网页设计，使用拖拽的方式生成网页！JavaScript库-VvvebJs

绍

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！

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>

要初始化编辑器，调用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中）定义为<script>标签的模板，其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>

以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！

设计界面预览

总结

VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！

家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 12 个 HTML 标签（组件），通过这些标签避免你在项目中集成复杂第三方组件，比如日历组件、颜色选择、进度条等...，简单的标签就能很方便的调用系统组件。

一、颜色选择组件（Color Picker）

在项目中，你可能希望通过调色板组件动态调整颜色，这时你可以使用 <input type="color"> 就可以轻松调用一个调色板组件，省去你在找第三方组件，示例效果如下：

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

二、引用标签（Blockquote）

在文章排版时，有时候我们需要引用一些信息，这时我们需要用特殊的样式进行强调，这时你可以使用<blockquote> 标签来强调你用的内容，示例效果如下所示

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

三、音频播放器（Audio Player）

如果从头写个音频播放器是一个费时费力又有挑战性的工作，但是你现在可以使用<audio>标签就能很轻松的调用。系统的音频播放器，示例效果如下所示：

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

四、视频播放器（Video Player）

我们不仅能很方便的调用系统的音频组件，我们还可以使用<video> 标签调用视频组件，示例效果如下所示：

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

五、折叠组件（Accordion）

折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 <details> 标签就派上用场了，示例效果如下所示：

gif

项目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期选择（Date Picker）

日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用<input type="date"> 这个标签就能轻松的胜任，示例效果如下所示：

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

七、滑块组件（Slider）

滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 <input type="range"> ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：

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

八、内容编辑（Content Editor）

为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 contenteditable 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：

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

九、图片标签（Picture Tag）

有时候需要在不同的分辨率下显示不同的图片，如果你使用<img> 标签的话，你需要做的工作就会许多，但是使用<picture> 标签就能很轻松的完成在不同分辨率下显示不同图片的设置，调整浏览器的大小，就会根据窗口的大小显示不同大小的图片，示例效果如下所示：

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

十、进度条（Progress Bar）

进度条组件也是个很常见的组件，你可以使用<progress> 标签就能轻松完成相关外观的设置，示例效果如下：

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

十一、下拉组件（Dropdown）

如果下拉组件选项比较多，用户选择就会比较困难，用户可能希望结合输入，能很方便的定位到下拉组件的内容，这时候你可以使用 <datalist> 标签就能满足上述需求，示例效果如下所示：

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

十二、提示框（Tooltip）

如果你需要对页面某部分进行详细介绍时，你可能需要鼠标经过此区域显示详细的提示框效果，这时我们可以使用 title 属性就能轻松实现，示例效果如下所示：

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

结束语

今天的文章就分享到这里，希望在日后的项目中你能想起今天分享的这12个标签（组件），感谢你的阅读。

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

ue+.NetCore前后端分离，支持对前端、后台基础业务代码扩展的快速发开框架

框架可直上手开发这些功能

Vol.WebApi类库可独立用于restful api服务单独部署,用于其他系统单独提供接口,直接上手编写业务代码即可。
Vue+Vol.WebApi 可用于现有框架前后端分离进行开发
Vol.Web类库可用于传统MVC+Razor方式进行项目开发
Vol.Builder类库可作为一个独立的代码生成器,可生成cshtml页面、Vue页面、Model文件、Service与Repository.cs业务处理代码类
可作为一个独立站点来发布Editor编辑器生成的静态html网页.

框架特点

支持前端、后台基础业务代码动态扩展，可在现有框架增、删、改、查、导入、导出、审核基础业务上扩展复杂的业务代码
基本业务全部由框架完成，上手即可对基础业务以外的代码进行扩展
上手简单，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可选) 及以上版本的开发环境
学习成本低，封装了常用可扩展组件及Demo(前端基于Iview/Element-UI组件进行了二次封装、后台提供了大量的扩展方法)
开发效率高,内定制开发的代码生成器,生成前端(Vue、后台代码),代码生成器已完成90%以上的重复工作，只需要在提供的扩展类型中实现其他业务
前端vue页面表单下拉/多选框完成自动绑定数据源，不需要写任何代码,并支持扩展自定开发绑定。
后台已完成权限、菜单、JWT等内部功能

如果你没有做过webpack+vue工程化开发项目，可能会刚开始相当不适应，或者安装环境总是出问题，但只要你熟悉开发流程后，你会发现采用Vue开发比Jquery爽太多了。上手项目需重点了解基础Vue语法，特别是了解组件、路由及import的使用

开发及依赖环境

VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可选，没有redis的在appsetting.json中不用配置，默认使用内置IMemory)、

VsCode、Vue2.0（webpack、node.js,如果没有此环境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui

项目地址：https://github.com/cq-panda/Vue.NetCore

在线咨询

上一篇：如何编写HTML提交按钮代码？
下一篇：CSS各种边框背景大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商