源码 ASP源码 PHP源码 NET源码 JSP源码 FLASH源码 其它源码

开源可视化网页拖拽设计器 VvvebJs

布局 其它源码 HTML我帮您 9天前  次浏览

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

开源可视化网页拖拽设计器 VvvebJs

相关特性

  • 1、组件和块/片段拖放。
  • 2、撤销/重做操作。
  • 3、一个或两个面板界面。
  • 4、文件管理器和组件层次结构导航添加新页面。
  • 5、实时代码编辑器。
  • 6、包含示例php脚本的图像上传。
  • 7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本。
  • 8、组件/块列表搜索。
  • 9、Bootstrap 4组件等组件

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

使用方式

如下代码:

<!-- 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();

相关链接

发表评论