jQuery可视化表单拖拽编辑实例

jQuery可视化表单拖拽编辑实例

收藏
jQuery可视化表单拖拽编辑实例
基于jQuery和bootstrap框架制作可视化表单,点击工具栏插入文本框、多行文本、框时间选择、框单选框、多选框、下拉选择框、文本下拉框表单元素,支持拖拽或删除,可编辑表单属性内容,导入或导出json数据,表单预览等功能。

使用介绍:

新增

所有控件定义在数组中,自由增减,属性和样式均定义为方法,自由改变
单选框,多选框,下拉框等增加默认选中
属性窗口增加主动关闭
所有元素增加控件ID,并展示在设计窗口
增加清空所有元素
增加导出JSON格式数据
增加导入JSON格式数据
实现表单预览,以json格式渲染表单的方式
获取表单数据
表单属性可以设置标签对齐方式(居左,居右,局上),标签宽度

修复

拖动元素后,如果未正确拖动到设计区域,隐藏提示线 删除控件后属性框不会消失
不可以鼠标拖动选择输入的内容和标签文字

优化

所有元素设定不同自定义图标,更加美观直观
设计界面增加提示线,方便看到元素占用
美化操作按钮样式,功能不变,占用空间更小,方便扩展
调整部分文本提示
校验错误默认隐藏不占据空间,有错误时展示,无错误时隐藏
调整为左中右固定布局,两侧250px,中间拉满 拖动新元素或删除旧元素时隐藏属性窗口
完善校验规则判断,无校验要求的视为校验通过
移除弹窗js,改用bootstrap自带的模态框 优化校验规则,校验通过返回表单数据 radio类型的属性如果数量大于2则每行只展示一个 属性过多滚动条显示由于白衣苍狗的jQuery拖拽表单(原创)停滞更新,在他的基础上完善迭代

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。