動態新增表單欄位
使用方法
- 下載 dynamic-form-fields JavaScript 檔案
- 在網頁中引用 dynamic-form-fields.js 檔案
- 定義表單動態新增欄位的區域ID
詳細介紹
- 引用 jQuery + jQUery UI + jQuery UI Style123<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
- 引用 dynamic-form-fields.js1<script type="text/javascript" src="dynamic-form-fields.js"></script>
- 自訂多國語系(放置引用dynamic-form-fields之前)1234567<script type="text/javascript">var dyfI18nLangCustom = {label: {option: '選項'}};</script>
- 自訂Widget Dialog設定(放置引用dynamic-form-fields之前,請參考jQuery UI Dialog API Documentation)12345<script type="text/javascript">var dyfJqueryUiDialogOptionCustom= {autoOpen: true};</script>
- 自訂表單動態新增欄位的區域(放置引用dynamic-form-fields之前,要將新增的欄位都加入到指定的id屬性內)123<script type="text/javascript">var dyfMoveFieldArea = 'add_column';</script>
使用範例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>動態表單欄位</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript"> var dyfI18nLangCustom = { formTitle: "新增欄位" label: { option: "項目" } }; var dyfJqueryUiDialogOptionCustom = { width: 500 } var dyfMoveFieldArea = 'add_column'; </script> <script src="dynamic-form-fields.js"></script> <input type="button" onClick="dynamicForm.createDialog();" value="增加欄位" /> <div id="add_column"></div> |
臉書留言
一般留言