jQuery可視化表單拖拽編輯實例

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

使用介紹：

新增

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

修復(fù)

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

優(yōu)化

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

使用聲明

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

查看演示下載資源

0 5147 15