VvvebJs

使用拖拽的方式生成网页
授权协议 Apache
开发语言 JavaScript
所属分类 开发工具、 界面原型设计工具
软件类型 开源软件
地区 不详
投 递 者 柯永福
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

在线演示:http://www.vvveb.com/vvvebjs/editor.html

网页设计,使用拖拽的方式生成网页!JavaScript库——VvvebJs

相关特性

  • 组件和块/片段拖放。
  • 撤消/重做操作。
  • 一两个面板界面。
  • 文件管理器和组件层次结构导航。
  • 添加新页面。
  • 实时代码编辑器。
  • 包含示例php脚本的图像上传。
  • 页面下载或导出html或将页面保存在服务器上,并附带示例php脚本。
  • 组件/块列表搜索。
  • 引导4个组件。
  • Youtube,Google Maps,Charts.js等小部件。

默认情况下,编辑器附带Bootstrap 4和Widgets组件,可以使用任何类型的组件和输入进行扩展。

用法

<!- 
jquery- > < 脚本 src =“ js / jquery.min.js ” > </ 脚本> 
< 脚本 src =“ js / jquery.hotkeys.js ” > </ 脚本>

<!-bootstrap-> 
< 脚本 src =“ js / popper.min.js ” > </ 脚本> 
< 脚本 src =“ js / bootstrap.min.js ” > </ 脚本>

<!-构建器代码-> 
< 脚本 src =“ libs / builder / builder.js ” > </ 脚本> 	
<!-撤消管理器-> 
< 脚本 src =“ libs / builder / undo.js ” > </ 脚本> 	
<!-输入-> 
< 脚本 src =“ libs / builder / inputs.js ” > </ 脚本> 	
<!-组件-> 
< 脚本 src =“ libs / builder / components-bootstrap4 .js “ > </ 脚本> 	
<脚本 src =“ libs / builder / components-widgets.js ” > </ 脚本>	


< 脚本> 
$ 文档)。准备函数() 
{ 
	Vvveb 生成器INIT '演示/ index.html中' 函数() { 
		//加载代码页后在这里加载
		Vvveb INIT (); 
	} ); 
} ); 
</ 脚本>

对于编辑器html和 components/input javascript模板,请检查editor.html

对于CSS更改,请编辑 scss/editor.scss 和 scss/_builder.scss

  • https://www.oschina.net/p/vvvebjs?utm_source=wechat&utm_medium=zaobao VvvebJs —— 使用拖拽的方式生成网页 https://dwz.cn/xA4KhNJC VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关

 相关资料
  • 在GUI里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从Firefox上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了QLineEd

  • 在 GUI 里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从 Firefox 上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了 QL

  • 本文向大家介绍Vue.Draggable拖拽功能的配置使用方法,包括了Vue.Draggable拖拽功能的配置使用方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable 在组件中需要使用的引入 注册组件 vue的template代码如 以上就是本文的全部

  • 本文向大家介绍vue拖拽组件使用方法详解,包括了vue拖拽组件使用方法详解的使用技巧和注意事项,需要的朋友参考一下 前言 pc端开发需要拖拽组件完成列表的顺序交换,一般移动端的UI组件会包含,但是我在用的iview并没有此功能的组件,于是手写一个,实现起来很简单。效果图如下: 可以拖拽完成新排序,点击某一项可以触发相关事件. 关于拖拽 drag & drop 拖放(Drag 和 drop)是 HT

  • 拖放(DnD)是强大的用户界面概念,可以通过鼠标点击轻松复制,重新排序和删除项目。 这允许用户在元素上单击并按住鼠标按钮,将其拖动到另一个位置,然后释放鼠标按钮以将元素放在那里。 要使用传统的HTML4实现拖放功能,开发人员要么必须使用复杂的JavaScript编程,要么使用其他JavaScript框架,如jQuery等。 现在,HTML 5提出了一个拖放(DnD)API,它为浏览器提供了本机Dn

  • 本文向大家介绍原生JS实现拖拽效果,包括了原生JS实现拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html JS CSS部分 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多