使用方法

1. 下載 dynamic-form-fields JavaScript 檔案
2. 在網頁中引用 dynamic-form-fields.js 檔案
3. 定義表單動態新增欄位的區域ID

 

詳細介紹

• 引用 jQuery + jQUery UI + jQuery UI Style
  
  <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>

  1 2 3

  <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.js
  
  <script type="text/javascript" src="dynamic-form-fields.js"></script>

  1	<script type="text/javascript" src="dynamic-form-fields.js"></script>

• 自訂多國語系(放置引用dynamic-form-fields之前)
  
  <script type="text/javascript"> var dyfI18nLangCustom = { label: { option: '選項' } }; </script>

  1 2 3 4 5 6 7

  <script type="text/javascript"> var dyfI18nLangCustom = { label: { option: '選項' } }; </script>

• 自訂Widget Dialog設定(放置引用dynamic-form-fields之前，請參考jQuery UI Dialog API Documentation)
  
  <script type="text/javascript"> var dyfJqueryUiDialogOptionCustom= { autoOpen: true }; </script>

  1 2 3 4 5

  <script type="text/javascript"> var dyfJqueryUiDialogOptionCustom= { autoOpen: true }; </script>

• 自訂表單動態新增欄位的區域(放置引用dynamic-form-fields之前，要將新增的欄位都加入到指定的id屬性內)
  
  <script type="text/javascript"> var dyfMoveFieldArea = 'add_column'; </script>

  1 2 3

  <script type="text/javascript"> var dyfMoveFieldArea = 'add_column'; </script>

使用範例

展示畫面