jQuery可視化表單拖拽編輯實(shí)例

基于jQuery和bootstrap框架制作可視化表單，點(diǎn)擊工具欄插入文本框、多行文本、框時(shí)間選擇、框單選框、多選框、下拉選擇框、文本下拉框表單元素，支持拖拽或刪除，可編輯表單屬性內(nèi)容，導(dǎo)入或?qū)С鰆son數(shù)據(jù)，表單預(yù)覽等功能。

使用介紹：

新增

所有控件定義在數(shù)組中,自由增減,屬性和樣式均定義為方法,自由改變
單選框,多選框,下拉框等增加默認(rèn)選中
屬性窗口增加主動(dòng)關(guān)閉
所有元素增加控件ID,并展示在設(shè)計(jì)窗口
增加清空所有元素
增加導(dǎo)出JSON格式數(shù)據(jù)
增加導(dǎo)入JSON格式數(shù)據(jù)
實(shí)現(xiàn)表單預(yù)覽,以json格式渲染表單的方式
獲取表單數(shù)據(jù)
表單屬性可以設(shè)置標(biāo)簽對(duì)齊方式(居左,居右,局上),標(biāo)簽寬度

修復(fù)

拖動(dòng)元素后,如果未正確拖動(dòng)到設(shè)計(jì)區(qū)域,隱藏提示線刪除控件后屬性框不會(huì)消失
不可以鼠標(biāo)拖動(dòng)選擇輸入的內(nèi)容和標(biāo)簽文字

優(yōu)化

所有元素設(shè)定不同自定義圖標(biāo),更加美觀直觀
設(shè)計(jì)界面增加提示線,方便看到元素占用
美化操作按鈕樣式,功能不變,占用空間更小,方便擴(kuò)展
調(diào)整部分文本提示
校驗(yàn)錯(cuò)誤默認(rèn)隱藏不占據(jù)空間,有錯(cuò)誤時(shí)展示,無錯(cuò)誤時(shí)隱藏
調(diào)整為左中右固定布局,兩側(cè)250px,中間拉滿拖動(dòng)新元素或刪除舊元素時(shí)隱藏屬性窗口
完善校驗(yàn)規(guī)則判斷,無校驗(yàn)要求的視為校驗(yàn)通過
移除彈窗js,改用bootstrap自帶的模態(tài)框優(yōu)化校驗(yàn)規(guī)則,校驗(yàn)通過返回表單數(shù)據(jù) radio類型的屬性如果數(shù)量大于2則每行只展示一個(gè) 屬性過多滾動(dòng)條顯示由于白衣蒼狗的jQuery拖拽表單（原創(chuàng)）停滯更新,在他的基礎(chǔ)上完善迭代

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

0 5465 15