form_builder.jsp 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  4. <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
  5. <%
  6. String path = request.getContextPath();
  7. String basePath = request.getScheme() + "://"
  8. + request.getServerName() + ":" + request.getServerPort()
  9. + path + "/";
  10. %>
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14. <base href="<%=basePath%>">
  15. <!-- 下拉框 -->
  16. <link rel="stylesheet" href="static/ace/css/chosen.css" />
  17. <!-- jsp文件头和头部 -->
  18. <%@ include file="../index/top.jsp"%>
  19. <!-- 表单构建组建 -->
  20. <link rel="shortcut icon" href="favicon.ico"> <link href="plugins/fhform/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
  21. <link href="plugins/fhform/css/animate.min.css" rel="stylesheet">
  22. <link href="plugins/fhform/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
  23. <!-- 日期框 -->
  24. <link rel="stylesheet" href="static/ace/css/datepicker.css" />
  25. <style>
  26. .droppable-active{background-color:#ffe!important}.tools a{cursor:pointer;font-size:80%}.form-body .col-md-6,.form-body .col-md-12{min-height:400px}.draggable{cursor:move}
  27. </style>
  28. </head>
  29. <body class="gray-bg">
  30. <!-- /section:basics/navbar.layout -->
  31. <div class="main-container" id="main-container">
  32. <!-- /section:basics/sidebar -->
  33. <div class="main-content">
  34. <div class="main-content-inner">
  35. <div class="page-content">
  36. <div class="row">
  37. <div class="col-xs-12">
  38. <div class="wrapper wrapper-content">
  39. <div class="row">
  40. <div class="col-sm-6">
  41. <div class="widget-box">
  42. <div class="widget-header widget-header-flat">
  43. <h4 class="widget-title">元素</h4>
  44. </div>
  45. <div class="widget-body">
  46. <div class="widget-main">
  47. <div class="row">
  48. <div class="col-sm-5" style="width:100%;">
  49. <div class="ibox float-e-margins">
  50. <div class="ibox-content">
  51. <div class="alert alert-info">
  52. 拖拽左侧的表单元素到右侧区域,即可生成相应的HTML代码
  53. </div>
  54. <form class="form-horizontal m-t">
  55. <div class="form-group draggable">
  56. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">纯文本:</label>
  57. <div class="col-sm-9">
  58. <p class="form-control-static">这里是纯文字信息</p>
  59. </div>
  60. </div>
  61. <div class="form-group draggable">
  62. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">输入框:</label>
  63. <div class="col-sm-9">
  64. <input type="text" id="form-field-1" placeholder="提示文字" class="col-xs-10 col-sm-5" />
  65. </div>
  66. </div>
  67. <div class="form-group draggable">
  68. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">密码框:</label>
  69. <div class="col-sm-9">
  70. <input type="password" id="form-field-1" placeholder="请输入密码" class="col-xs-10 col-sm-5" />
  71. </div>
  72. </div>
  73. <div class="form-group draggable">
  74. <label class="col-sm-3 control-label no-padding-right">有图标:</label>
  75. <div class="col-sm-9">
  76. <!-- #section:elements.form.input-icon -->
  77. <span class="input-icon">
  78. <input type="text" id="form-field-icon-1" />
  79. <i class="ace-icon fa fa-leaf blue"></i>
  80. </span>
  81. <span class="input-icon input-icon-right">
  82. <input type="text" id="form-field-icon-2" />
  83. <i class="ace-icon fa fa-leaf green"></i>
  84. </span>
  85. <!-- /section:elements.form.input-icon -->
  86. </div>
  87. </div>
  88. <div class="form-group draggable">
  89. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">下拉框:</label>
  90. <div class="col-sm-9" style="width:66%;" >
  91. <div class="selQ313596790Qsel"></div>
  92. <select class="chosen-select form-control" name="name" id="id" data-placeholder="请选择">
  93. <option value=""></option>
  94. <option value="">选项一</option>
  95. <option value="">选项二</option>
  96. <option value="">选项三</option>
  97. </select>
  98. <div class="selQ313596790Qsel"></div>
  99. </div>
  100. </div>
  101. <div class="form-group draggable">
  102. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">日期框:</label>
  103. <div class="col-sm-9">
  104. <input class="span10 date-picker" name="name" id="id" value="" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width:150px;" placeholder="日期" title="日期"/>
  105. </div>
  106. </div>
  107. <div class="form-group draggable">
  108. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">文件域:</label>
  109. <div class="col-sm-9">
  110. <div class="fileQ313596790Qfile"></div>
  111. <input type="file" id="tp" name="tp" />
  112. <div class="fileQ313596790Qfile"></div>
  113. </div>
  114. </div>
  115. <div class="form-group draggable">
  116. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">单选框:</label>
  117. <div class="col-sm-9">
  118. <label style="float:left;padding-left: 8px;padding-top:7px;">
  119. <input name="form-field" type="radio" class="ace" id="form-field-radio1" />
  120. <span class="lbl">单选1</span>
  121. </label>
  122. <label style="float:left;padding-left: 5px;padding-top:7px;">
  123. <input name="form-field" type="radio" class="ace" id="form-field-radio2" />
  124. <span class="lbl">单选2</span>
  125. </label>
  126. </div>
  127. </div>
  128. <div class="form-group draggable">
  129. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">复选框:</label>
  130. <div class="col-sm-9">
  131. <label style="float:left;padding-left: 8px;padding-top:7px;">
  132. <input name="checkbox1" type="checkbox" class="ace" id="checkbox1" />
  133. <span class="lbl">选项1</span>
  134. </label>
  135. <label style="float:left;padding-left: 5px;padding-top:7px;">
  136. <input name="checkbox2" type="checkbox" class="ace ace-checkbox-2" id="checkbox2" />
  137. <span class="lbl">选项2</span>
  138. </label>
  139. </div>
  140. </div>
  141. <div class="form-group draggable">
  142. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">开关:</label>
  143. <div class="col-sm-9">
  144. <label>
  145. <input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" />
  146. <span class="lbl"></span>
  147. </label>
  148. <label>
  149. <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox" checked="checked"/>
  150. <span class="lbl"></span>
  151. </label>
  152. <label>
  153. <input name="switch-field-1" class="ace ace-switch" type="checkbox" />
  154. <span class="lbl" data-lbl="CUS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOM"></span>
  155. </label>
  156. <label>
  157. <input name="switch-field-1" class="ace ace-switch ace-switch-5" type="checkbox" checked="checked" />
  158. <span class="lbl"></span>
  159. </label>
  160. <label>
  161. <input name="switch-field-1" class="ace ace-switch" type="checkbox" />
  162. <span class="lbl" data-lbl="CUS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TOM"></span>
  163. </label>
  164. <label>
  165. <input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-flat" type="checkbox" checked="checked"/>
  166. <span class="lbl"></span>
  167. </label>
  168. <label>
  169. <input name="switch-field-1" class="ace ace-switch ace-switch-7" type="checkbox" />
  170. <span class="lbl"></span>
  171. </label>
  172. </div>
  173. </div>
  174. <div class="form-group draggable">
  175. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">富文本:</label>
  176. <div class="col-sm-9">
  177. <div class="ueQ313596790Que"></div>
  178. <script id="editor" type="text/plain" style="width:96%;height:50px;"></script>
  179. <div class="ueQ313596790Que"></div>
  180. </div>
  181. </div>
  182. <div class="form-group draggable">
  183. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">按钮:</label>
  184. <div class="col-sm-9">
  185. <a class="btn btn-mini btn-primary" onclick="">保存</a>
  186. <a class="btn btn-mini btn-danger" onclick="">取消</a>
  187. </div>
  188. </div>
  189. </form>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. </div><!-- /.col -->
  198. <div class="col-sm-6">
  199. <div class="widget-box">
  200. <div class="widget-header widget-header-flat">
  201. <h4 class="widget-title">拖拽左侧表单元素到此区域</h4>
  202. </div>
  203. <div class="widget-body">
  204. <div class="widget-main">
  205. <div class="row">
  206. <div class="col-sm-7" style="width:100%;">
  207. <div class="ibox float-e-margins">
  208. <div>
  209. <div class="ibox-tools">
  210. 请选择显示的列数:
  211. <select id="n-columns">
  212. <option value="1">显示1列</option>
  213. <option value="2">显示2列</option>
  214. </select>
  215. </div>
  216. </div>
  217. <div class="ibox-content">
  218. <div class="row form-body form-horizontal m-t">
  219. <div class="col-md-12 droppable sortable">
  220. </div>
  221. <div class="col-md-6 droppable sortable" style="display: none;">
  222. </div>
  223. <div class="col-md-6 droppable sortable" style="display: none;">
  224. </div>
  225. </div>
  226. <button type="submit" class="btn btn-warning" data-clipboard-text="testing" id="copy-to-clipboard">查看代码</button>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. </div><!-- /.col -->
  235. </div><!-- row -->
  236. </div>
  237. </div>
  238. <!-- /.col -->
  239. </div>
  240. <!-- /.row -->
  241. </div>
  242. <!-- /.page-content -->
  243. </div>
  244. </div>
  245. <!-- /.main-content -->
  246. <form action="<%=basePath%>/tool/downloadFormCode.do" name="Form" id="Form" method="post">
  247. <textarea name="htmlCode" id="htmlCode"style="display: none;"></textarea>
  248. </form>
  249. <!-- 返回顶部 -->
  250. <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
  251. <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
  252. </a>
  253. </div>
  254. <!-- /.main-container -->
  255. <%@ include file="../index/foot.jsp"%>
  256. <!-- 表单构建组建 -->
  257. <script src="plugins/fhform/js/bootstrap.min.js?v=3.3.5"></script>
  258. <script src="plugins/fhform/js/content.min.js?v=1.0.0"></script>
  259. <script src="plugins/fhform/js/jquery-ui-1.10.4.min.js"></script>
  260. <script src="plugins/fhform/js/beautifyhtml/beautifyhtml.js"></script>
  261. <!-- 百度富文本编辑框-->
  262. <script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "<%=path%>/plugins/ueditor/";</script>
  263. <script type="text/javascript" charset="utf-8" src="plugins/ueditor/ueditor.config.js"></script>
  264. <script type="text/javascript" charset="utf-8" src="plugins/ueditor/ueditor.all.js"></script>
  265. <!-- 百度富文本编辑框-->
  266. <!-- ace scripts -->
  267. <script src="static/ace/js/ace/ace.js"></script>
  268. <!-- 下拉框 -->
  269. <script src="static/ace/js/chosen.jquery.js"></script>
  270. <!-- 日期框 -->
  271. <script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
  272. <!-- 上传控件 -->
  273. <script src="static/ace/js/ace/elements.fileinput.js"></script>
  274. <script type="text/javascript">
  275. $(top.hangge());
  276. $(function() {
  277. //日期框
  278. $('.date-picker').datepicker({autoclose: true,todayHighlight: true});
  279. //下拉框
  280. if(!ace.vars['touch']) {
  281. $('.chosen-select').chosen({allow_single_deselect:true});
  282. $(window)
  283. .off('resize.chosen')
  284. .on('resize.chosen', function() {
  285. $('.chosen-select').each(function() {
  286. var $this = $(this);
  287. $this.next().css({'width': $this.parent().width()});
  288. });
  289. }).trigger('resize.chosen');
  290. $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
  291. if(event_name != 'sidebar_collapsed') return;
  292. $('.chosen-select').each(function() {
  293. var $this = $(this);
  294. $this.next().css({'width': $this.parent().width()});
  295. });
  296. });
  297. $('#chosen-multiple-style .btn').on('click', function(e){
  298. var target = $(this).find('input[type=radio]');
  299. var which = parseInt(target.val());
  300. if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
  301. else $('#form-field-select-4').removeClass('tag-input-style');
  302. });
  303. }
  304. //上传
  305. $('#tp').ace_file_input({
  306. no_file:'请选择文件 ...',
  307. btn_choose:'选择',
  308. btn_change:'更改',
  309. droppable:false,
  310. onchange:null,
  311. thumbnail:false, //| true | large
  312. whitelist:'*',
  313. //whitelist:'gif|png|jpg|jpeg',
  314. //blacklist:'gif|png|jpg|jpeg'
  315. //onchange:''
  316. //
  317. });
  318. });
  319. //百度富文本
  320. setTimeout("ueditor()",500);
  321. function ueditor(){
  322. UE.getEditor('editor');
  323. }
  324. </script>
  325. <script>
  326. //下载代码
  327. function downloadCode(code){
  328. $("#htmlCode").val(code);
  329. $("#Form").submit();
  330. }
  331. //过滤ueditor
  332. var ueditorHtml = "";
  333. function getUeditorFormHtml(html,msg,isgx){
  334. var arryUe = html.split('<div class="ueQ313596790Que"></div>');
  335. if(arryUe.length == 3){
  336. var uejscode = "<script id=\"editor\" type=\"text/plain\" style=\"width:96%;height:200px;\"><\/script>";
  337. if(msg == '1'){
  338. if(isgx == '2'){
  339. ueditorHtml = arryUe[1];
  340. return arryUe[0] + '<div class="ueQ313596790Que"></div>' + uejscode + '<div class="ueQ313596790Que"></div>' + arryUe[2];
  341. }else{
  342. return arryUe[0] + '<div class="ueQ313596790Que"></div>' + ueditorHtml + '<div class="ueQ313596790Que"></div>' + arryUe[2];
  343. }
  344. }else{
  345. return arryUe[0] + uejscode + arryUe[2];
  346. }
  347. }else{
  348. return html;
  349. }
  350. }
  351. //过滤下拉框
  352. var selectHtml = "";
  353. function getSelectFormHtml(html,msg,isgx){
  354. var arrySe = html.split('<div class="selQ313596790Qsel"></div>');
  355. if(arrySe.length == 3){
  356. var selectcode ='<select class="chosen-select form-control" name="name" id="id" data-placeholder="请选择">'+
  357. '<option value=""></option>'+
  358. '<option value="">选项一</option>'+
  359. '<option value="">选项二</option>'+
  360. '<option value="">选项三</option>'+
  361. '</select>';
  362. selectcode = selectHtml == ''?selectcode:selectHtml;
  363. if(msg == '1'){
  364. if(isgx == '2'){
  365. return arrySe[0] + '<div class="selQ313596790Qsel"></div>' + selectcode + '<div class="selQ313596790Qsel"></div>' + arrySe[2];
  366. }else{
  367. selectHtml = arrySe[1];
  368. return html;
  369. }
  370. }else{
  371. return arrySe[0] + selectcode + arrySe[2];
  372. }
  373. }else{
  374. return html;
  375. }
  376. }
  377. //过滤file上传控件
  378. var fileHtml = "";
  379. function getFileFormHtml(html,msg,isgx){
  380. var arryFile = html.split('<div class="fileQ313596790Qfile"></div>');
  381. if(arryFile.length == 3){
  382. var filecode = "<input type=\"file\" id=\"tp\" name=\"tp\" />";
  383. if(msg == '1'){
  384. if(isgx == '2'){
  385. fileHtml = arryFile[1];
  386. return arryFile[0] + '<div class="fileQ313596790Qfile"></div>' + filecode + '<div class="fileQ313596790Qfile"></div>' + arryFile[2];
  387. }else{
  388. return arryFile[0] + '<div class="fileQ313596790Qfile"></div>' + fileHtml + '<div class="fileQ313596790Qfile"></div>' + arryFile[2];
  389. };
  390. }else{
  391. return arryFile[0] + filecode + arryFile[2];
  392. }
  393. }else{
  394. return html;
  395. };
  396. }
  397. $(document).ready(function() {
  398. setup_draggable();
  399. $("#n-columns").on("change",
  400. function() {
  401. var v = $(this).val();
  402. if (v === "1") {
  403. var $col = $(".form-body .col-md-12").toggle(true);
  404. $(".form-body .col-md-6 .draggable").each(function(i, el) {
  405. $(this).remove().appendTo($col);
  406. });
  407. $(".form-body .col-md-6").toggle(false);
  408. } else {
  409. var $col = $(".form-body .col-md-6").toggle(true);
  410. $(".form-body .col-md-12 .draggable").each(function(i, el) {
  411. $(this).remove().appendTo(i % 2 ? $col[1] : $col[0]);
  412. });
  413. $(".form-body .col-md-12").toggle(false);
  414. };
  415. });
  416. $("#copy-to-clipboard").on("click",
  417. function() {
  418. var $copy = $(".form-body").clone().appendTo(document.body);
  419. $copy.find(".tools, :hidden").remove();
  420. $.each(["draggable", "droppable", "sortable", "dropped", "ui-sortable", "ui-draggable", "ui-droppable", "form-body"],
  421. function(i, c) {
  422. $copy.find("." + c).removeClass(c).removeAttr("style");
  423. });
  424. var html = html_beautify($copy.html());
  425. html = getUeditorFormHtml(html,'2','2');
  426. html = getSelectFormHtml(html,'2','2');
  427. html = getFileFormHtml(html,'2','2');
  428. $copy.remove();
  429. $modal = get_modal(html).modal("show");
  430. $modal.find(".btn").remove();
  431. $('#myHtml').val(html);
  432. $modal.find("#myBtn").html("<button type=\"submit\" class=\"btn btn-primary\" data-clipboard-text=\"testing\" onclick=\"downloadCode($('#myHtml').val())\">下载代码</button>");
  433. $modal.find(".modal-title").html("生成的HTML代码");
  434. $modal.find(":input:first").select().focus();
  435. return false;
  436. });
  437. });
  438. var setup_draggable = function() {
  439. $(".draggable").draggable({
  440. appendTo: "body",
  441. helper: "clone"
  442. });
  443. $(".droppable").droppable({
  444. accept: ".draggable",
  445. helper: "clone",
  446. hoverClass: "droppable-active",
  447. drop: function(event, ui) {
  448. $(".empty-form").remove();
  449. var $orig = $(ui.draggable);
  450. if (!$(ui.draggable).hasClass("dropped")) {
  451. var $el = $orig.clone().addClass("dropped").css({
  452. "position": "static",
  453. "left": null,
  454. "right": null
  455. }).appendTo(this);
  456. var id = $orig.find(":input").attr("id");
  457. if (id) {
  458. id = id.split("-").slice(0, -1).join("-") + "-" + (parseInt(id.split("-").slice( - 1)[0]) + 1);
  459. $orig.find(":input").attr("id", id);
  460. $orig.find("label").attr("for", id);
  461. }
  462. $('<p class="tools col-sm-12 col-sm-offset-3"> <a class="edit-link">编辑HTML<a> | <a class="remove-link">移除</a></p>').appendTo($el);
  463. } else {
  464. if ($(this)[0] != $orig.parent()[0]) {
  465. var $el = $orig.clone().css({
  466. "position": "static",
  467. "left": null,
  468. "right": null
  469. }).appendTo(this);
  470. $orig.remove();
  471. }
  472. }
  473. }
  474. }).sortable();
  475. };
  476. var get_modal = function(content) {
  477. var modal = $('<div class="modal" style="overflow: auto;" tabindex="-1"> <div class="modal-dialog"><div class="modal-content"><div class="modal-header"><a type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h4 class="modal-title">编辑HTML</h4></div><div class="modal-body ui-front"> <textarea id="myHtml" class="form-control" style="min-height: 200px; margin-bottom: 10px;font-family: Monaco, Fixed">' + content + '</textarea><div id="myBtn"><button class="btn btn-success">更新HTML</button></div></div> </div></div></div>').appendTo(document.body);
  478. return modal;
  479. };
  480. $(document).on("click", ".edit-link",
  481. function(ev) {
  482. var $el = $(this).parent().parent();
  483. var $el_copy = $el.clone();
  484. var $edit_btn = $el_copy.find(".edit-link").parent().remove();
  485. var memberHtml = html_beautify($el_copy.html());
  486. var editHtml = getUeditorFormHtml(memberHtml,'1','2');
  487. editHtml = getSelectFormHtml(editHtml,'1','2');
  488. editHtml = getFileFormHtml(editHtml,'1','2');
  489. var $modal = get_modal(editHtml).modal("show");
  490. $modal.find(":input:first").focus();
  491. $modal.find(".btn-success").click(function(ev2) {
  492. var html = $modal.find("textarea").val();
  493. html = getUeditorFormHtml(html,'1','1');
  494. getSelectFormHtml(html,'1','1');
  495. html = getFileFormHtml(html,'1','1');
  496. if (!html) {
  497. $el.remove();
  498. } else {
  499. $el.html(html);
  500. $edit_btn.appendTo($el);
  501. }
  502. $modal.modal("hide");
  503. return false;
  504. });
  505. });
  506. $(document).on("click", ".remove-link",
  507. function(ev) {
  508. $(this).parent().parent().remove();
  509. });
  510. </script>
  511. </body>
  512. </html>