bsFormBuilder v1.0.4 发布了,bsFormBuilder 是一个基于 Bootstrap v4.x 表单构建工具。bsFormBuilder 最大的特点是组件和组件的属性配置自由扩展,可以导出 html 和 json。
bsFormBuilder 的特点:
- 1、基于 Bootstrap (v4.x) + JQuery,简单易用
- 2、拖动的 html 组件,支持通过 Json 自定义扩展
- 3、组件的属性面板,支持通过 Json 自定义扩展
- 4、支持导出 html 和 json,自己通过 json 来构建 UI 页面
- 5、支持导入 json 到 bsFormBuilder,进行二次编辑
- 6、丰富的 API,方便二次开发和扩展
- 7、支持 “模板” 功能,可以选择已有模板进行二次开发
- 8、内置轻量的 html 渲染引擎,速度极快,极好用~~
bsFormBuilder v1.0.4 更新内容如下:
- 新增:新增自定义栅格大小的 "灵活栅格" 组件
- 新增:辅助组件 "空DIV" 的功能,自定定义其高度
- 新增:bsFormBuilder 新增 clear 方法,并完善 "清空" 按钮
- 新增:辅助组件 "引用"
- 新增:props 属性可以选择 textarea 作为属性输入框
- 优化:复制和删除按钮的样式,使其表现的功能更加明确
- 修复:tab 容器在 value 值相等的情况下,移动 tab 顺序其内容不跟随移动的问题
- 修复:refreshDataElement 未销毁旧的 sortable 的问题
- 修复:_refreshBuilderContainer 未销毁旧的 sortable 的问题
- 修复:组件为 props 属性输入框配置的 placeholder 无法显示的问题
开始使用:
<div id="builder"></div> <script> $('#builder').bsFormBuilder({...}); </script>
在使用前,需要导入 bootstrap 和 jquery 的相关文件。
<link href="path/bootstrap.min.css" rel="stylesheet"> <link href="path/bootstrap-icons.css" rel="stylesheet"> <script src="path/jquery.min.js" /> <script src="path/bootstrap.bundle.min.js" /> <link href="path/bs-form-builder.min.css" rel="stylesheet"> <script src="path/bs-form-builder.min.all.js" />
另外,bsFormBuilder 提供了丰富的 API ,方便二次开发和扩展,详情参考:https://gitee.com/fuhai/bsFormBuilder