您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery |

jQuery实现可视化拖拽表单特效

51自学网 2022-05-05 14:29:06
  javascript

jQuery可视化拖拽表单是一个基于jQuery和bootstrap的可视化拖拽表单(自定义表单)效果的特效,可实现导入、导出、预览、提取内容、属性等功能,简单实用,欢迎下载!

新增

所有控件定义在数组中,自由增减,属性和样式均定义为方法,自由改变

单选框,多选框,下拉框等增加默认选中

属性窗口增加主动关闭

所有元素增加控件ID,并展示在设计窗口

增加清空所有元素

增加导出JSON格式数据

增加导入JSON格式数据

实现表单预览,以json格式渲染表单的方式

获取表单数据

表单属性可以设置标签对齐方式(居左,居右,局上),标签宽度

修复

拖动元素后,如果未正确拖动到设计区域,隐藏提示线 删除控件后属性框不会消失

不可以鼠标拖动选择输入的内容和标签文字

优化

所有元素设定不同自定义图标,更加美观直观

设计界面增加提示线,方便看到元素占用

美化操作按钮样式,功能不变,占用空间更小,方便扩展

调整部分文本提示

校验错误默认隐藏不占据空间,有错误时展示,无错误时隐藏

调整为左中右固定布局,两侧250px,中间拉满 拖动新元素或删除旧元素时隐藏属性窗口

完善校验规则判断,无校验要求的视为校验通过

移除弹窗js,改用bootstrap自带的模态框 优化校验规则,校验通过返回表单数据 radio类型的属性如果数量大于2则每行只展示一个


下载地址:[ 下载地址1 ]
原生js实现拖拽div布局特效
ajax实现的动态查询下拉提示特效源码
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1