json2formDemo.htm 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <html>
  2. <head>
  3. <title>Json2form Demo</title>
  4. <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
  5. <script src="json2form.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. jQuery(document).ready(function(){
  8. var objdata ={
  9. txt:'文字输入',
  10. pwd:'密码输入',
  11. hd:'隐藏',
  12. are:'多行文字json2form',
  13. btn:'按钮',
  14. rt:'重置按钮',
  15. sb:'提交按钮',
  16. rad:'男',
  17. chk:'chk1',
  18. chk:['美国','中国'],
  19. sl:['法国','日本'],
  20. label:{
  21. txt:'自定义文本框标签',
  22. sl :'自定义下拉列表标签'
  23. },
  24. init:{
  25. chk444:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}],
  26. chk555:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}],
  27. slinit:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}]
  28. }
  29. };
  30. $("#json2form").json2form({data:objdata});
  31. $("#json2form").json2form({data:objdata});
  32. });
  33. </script>
  34. <style type="text/css">
  35. table, td {
  36. border:1px solid #cccccc;
  37. border-collapse:collapse;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div align="center">
  43. <form id="json2form" name="json2form">
  44. <table>
  45. <tr>
  46. <td colspan="2" bgcolor="#FFFFFF"><div align="center"><strong>Aduby json2formDemo</strong></div></td>
  47. </tr>
  48. <tr>
  49. <td>1. text(文本框)</td>
  50. <td>
  51. <label for="txt">1 text(文本框)</label>
  52. <input type="text" id="txt" name="txt" value="输入内容" />
  53. </td>
  54. </tr>
  55. <tr>
  56. <td>2. password(密码框)</td>
  57. <td>
  58. <input type="password" id="pwd" name="pwd" value="值" />
  59. </td>
  60. </tr>
  61. <tr>
  62. <td>3. hidden(隐藏域)</td>
  63. <td>
  64. <input type="hidden" id="hd" name="hd" value="值"/>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td>4. checkbox(复选框)</td>
  69. <td>
  70. <input type="checkbox" id="chk1" name="chk" value="中国" checked="checked" />中国<label for="chk1"></label>
  71. <input type="checkbox" id="chk2" name="chk" value="美国" />美国<label for="chk2"></label>
  72. </td>
  73. </tr>
  74. <tr>
  75. <td>5. checkbox(动态复选框)</td>
  76. <td>
  77. <input type="checkbox" id="chk444" name="chk444" value="动态复选框" />
  78. </td>
  79. </tr>
  80. <tr>
  81. <td>6. radion(单选按钮)</td>
  82. <td>
  83. <input type="radio" id="rd1" name="rad" value="男" checked="checked" />男
  84. <input type="radio" id="rd2" name="rad" value="女" />女
  85. </td>
  86. </tr>
  87. <tr>
  88. <td>7. radion(动态单选按钮)</td>
  89. <td>
  90. <input type="radio" id="chk555" name="chk555" value="动态单选按钮" />
  91. </td>
  92. </tr>
  93. <tr>
  94. <td>8. file(文件)</td>
  95. <td>
  96. <input type="file" id="fl" name="file" value="呵呵" size="20" />
  97. </td>
  98. </tr>
  99. <tr>
  100. <td>9. textare(文本域)</td>
  101. <td>
  102. 多行文本输入框。<br>
  103. <textarea id="are" name="are" cols="10" rows="10" ></textarea>
  104. </td>
  105. </tr>
  106. <tr>
  107. <td>10. select(下拉列表框)</td>
  108. <td>
  109. 用户选择的下拉列表。<br>
  110. <label for="sl">下拉列表</label><br>
  111. <select id="sl" name="sl" multiple="multiple" >
  112. <option id="op1" value="美国" selected="selected">美国</option>
  113. <option id="op2" value="中国">中国</option>
  114. <option id="op3" value="日本">日本</option>
  115. <option id="op4" value="法国">法国</option>
  116. </select>
  117. </td>
  118. </tr>
  119. <tr>
  120. <td>11. select(动态下拉列表框)</td>
  121. <td>
  122. <select id="slinit" name="slinit" ><option value="null">动态下拉列表框</option> </select>
  123. </td>
  124. </tr>
  125. <tr>
  126. <td>12. button(普通按钮)</td>
  127. <td>
  128. <input type="button" id="btn" name="btn" value="普通按钮">
  129. </td>
  130. </tr>
  131. <tr>
  132. <td>13. reset(重置按钮)</td>
  133. <td>
  134. <input type="reset" id="rt" name="rt" value="重置按钮" />
  135. </td>
  136. </tr>
  137. <tr>
  138. <td>14. submit(提交按钮)</td>
  139. <td>
  140. <input type="submit" id="sb" name="sb" value="提交按钮" />
  141. </td>
  142. </tr>
  143. </table>
  144. </form>
  145. </div>
  146. </body>
  147. </html>