VvvebJs使用拖拽的方式生成网页

联合创作 · 2023-10-02 00:02

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

浏览 42
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报