list.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
  4. <head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">
  5. <title th:text=${title}></title>
  6. <!-- 这儿引用单独的css link -->
  7. <!-- Ladda for Bootstrap 3按钮加载进度插件 -->
  8. <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
  9. <!-- bootstrap-table表单样式 -->
  10. <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
  11. <style type="text/css">
  12. /**
  13. *这里写单独的css样式
  14. */
  15. .select-list ul li {
  16. list-style-type: none;
  17. float: left;
  18. }
  19. .droppable-active {
  20. background-color: #ffe !important
  21. }
  22. .tools a {
  23. cursor: pointer;
  24. font-size: 80%
  25. }
  26. .form-body .col-md-6, .form-body .col-md-12 {
  27. min-height: 400px
  28. }
  29. .draggable {
  30. cursor: move
  31. }
  32. </style>
  33. </head>
  34. <body id="listbody">
  35. <!-- ###############################代码编写处############################### -->
  36. <!-- 右边内容 -->
  37. <div class="wrap-fluid">
  38. <div class="container-fluid paper-wrap bevel tlbr">
  39. <!-- 内容 -->
  40. <!--标题 通用-->
  41. <div th:replace="admin/common/html/title :: title(${title},${parenttitle},${isMsg},${msgHTML})">
  42. </div>
  43. <!-- 结束标题 通用-->
  44. <div class="content-wrap">
  45. <!-- 结束内容 -->
  46. <div class="row">
  47. <!-- 空白页开始-->
  48. <div class="col-sm-6">
  49. <div class="nest" id="Blank_PageClose">
  50. <div class="title-alt">
  51. <h6>拖拽区域</h6>
  52. <div class="titleClose">
  53. <a class="gone" href="#Blank_PageClose">
  54. <span class="entypo-cancel"></span>
  55. </a>
  56. </div>
  57. <div class="titleToggle">
  58. <a class="nav-toggle-alt" href="#Blank_Page_Content">
  59. <span class="entypo-up-open"></span>
  60. </a>
  61. </div>
  62. </div>
  63. <div class="body-nest" id="Blank_Page_Content">
  64. <div class="row">
  65. <!-- 左边 -->
  66. <div class="col-sm-12">
  67. <div class="widget-box">
  68. <div class="widget-body">
  69. <div class="widget-main">
  70. <div class="row">
  71. <div class="col-sm-5" style="width:100%;">
  72. <div class="ibox float-e-margins">
  73. <div class="ibox-content">
  74. <div class="alert alert-info">
  75. 拖拽左侧的表单元素到右侧区域,即可生成相应的HTML代码
  76. </div>
  77. <form class="form-horizontal m-t">
  78. <div class="form-group draggable">
  79. <label class="col-sm-3 control-label">纯文本:</label>
  80. <div class="col-sm-8">
  81. <p class="form-control-static">这里是纯文字信息</p>
  82. </div>
  83. </div>
  84. <div class="form-group draggable">
  85. <label class="col-sm-3 control-label ">输入框:</label>
  86. <div class="col-sm-8">
  87. <input placeholder="请输入" class="form-control" type="text" id="id" name="name"/>
  88. </div>
  89. </div>
  90. <div class="form-group draggable">
  91. <label class="col-sm-3 control-label ">密码框:</label>
  92. <div class="col-sm-8">
  93. <input placeholder="请输入密码" class="form-control" type="password" id="passowrd" name="passowrd"/>
  94. </div>
  95. </div>
  96. <div class="form-group draggable">
  97. <label class="col-sm-3 control-label ">下拉列表:</label>
  98. <div class="col-sm-8">
  99. <select id="select" name="select" class="form-control valid" aria-invalid="false">
  100. <option value="0" selected="selected">否</option>
  101. <option value="1">是</option>
  102. </select>
  103. </div>
  104. </div>
  105. <div class="form-group draggable">
  106. <label class="col-sm-3 control-label ">日期框:</label>
  107. <div class="col-sm-8">
  108. <div class='input-group date' id='datetimepicker3'>
  109. <input type='text' class="form-control" />
  110. <span class="input-group-addon">
  111. <span class="glyphicon glyphicon-time"></span>
  112. </span>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="form-group draggable">
  117. <label class="col-sm-3 control-label ">颜色输入框:</label>
  118. <div class="col-sm-8">
  119. <input type="text" class="form-control" value="rgb(0,194,255,0.78)" id="cp2" data-color-format="rgba">
  120. </div>
  121. </div>
  122. <div class="form-group draggable">
  123. <label class="col-sm-3 control-label ">复选框:</label>
  124. <div class="col-sm-8">
  125. <label class="checkbox">
  126. <input id="checkbox1" class="styled" type="checkbox" checked>
  127. <label for="checkbox1">Default</label>
  128. </label>
  129. <label class="checkbox checkbox-primary">
  130. <input id="checkbox2" class="styled" type="checkbox" checked>
  131. <label for="checkbox2">Primary</label>
  132. </label>
  133. <label class="checkbox checkbox-success">
  134. <input id="checkbox3" class="styled" type="checkbox" checked>
  135. <label for="checkbox3">Success</label>
  136. </label>
  137. <label class="checkbox checkbox-info">
  138. <input id="checkbox4" class="styled" type="checkbox" checked>
  139. <label for="checkbox4">Info</label>
  140. </label>
  141. <label class="checkbox checkbox-warning">
  142. <input id="checkbox5" type="checkbox" class="styled" checked>
  143. <label for="checkbox5">Warning</label>
  144. </label>
  145. <label class="checkbox checkbox-danger">
  146. <input id="checkbox6" type="checkbox" class="styled" checked>
  147. <label for="checkbox6">Check me out</label>
  148. </label>
  149. </div>
  150. </div>
  151. <div class="form-group draggable">
  152. <label class="col-sm-3 control-label ">单选框:</label>
  153. <div class="col-sm-8">
  154. <div class="radio radio-inline">
  155. <input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked="">
  156. <label for="inlineRadio1"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 单选Default </font></font></label>
  157. </div>
  158. <div class="radio radio-primary radio-inline">
  159. <input type="radio" id="inlineRadio2" value="option2" name="radioInline" checked="">
  160. <label for="inlineRadio2"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 单选primary </font></font></label>
  161. </div>
  162. <div class="radio radio-success radio-inline">
  163. <input type="radio" id="inlineRadio3" value="option3" name="radioInline" checked="">
  164. <label for="inlineRadio3"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 单选success </font></font></label>
  165. </div>
  166. <div class="radio radio-info radio-inline">
  167. <input type="radio" id="inlineRadio4" value="option4" name="radioInline" checked="">
  168. <label for="inlineRadio4"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 单选info </font></font></label>
  169. </div>
  170. <div class="radio radio-warning radio-inline">
  171. <input type="radio" id="inlineRadio5" value="option5" name="radioInline" checked="">
  172. <label for="inlineRadio5"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 单选warning </font></font></label>
  173. </div>
  174. <div class="radio radio-danger radio-inline">
  175. <input type="radio" id="inlineRadio6" value="option6" name="radioInline" checked="">
  176. <label for="inlineRadio6"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 单选danger</font></font></label>
  177. </div>
  178. </div>
  179. </div>
  180. <div class="form-group draggable">
  181. <label class="col-sm-3 control-label ">切换按钮:</label>
  182. <div class="col-sm-8">
  183. <div class="make-switch" data-on="primary" data-off="info">
  184. <input type="checkbox" >
  185. </div>
  186. <div class="make-switch" data-on="info" data-off="success">
  187. <input type="checkbox" >
  188. </div>
  189. <div class="make-switch" data-on="success" data-off="warning">
  190. <input type="checkbox" checked>
  191. </div>
  192. <div class="make-switch" data-on="warning" data-off="danger">
  193. <input type="checkbox" checked>
  194. </div>
  195. <div class="make-switch" data-on="danger" data-off="default">
  196. <input type="checkbox" checked>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="form-group draggable">
  201. <label class="col-sm-3 control-label ">文件上传:</label>
  202. <div class="col-sm-8">
  203. <input type="hidden" id="dataId" name="dataId">
  204. <div id="dropz" class="dropzone"></div>
  205. </div>
  206. </div>
  207. <div class="form-group draggable">
  208. <label class="col-sm-3 control-label ">富文本:</label>
  209. <div class="col-sm-8">
  210. <textarea class="textarea form-control" placeholder="Enter text ..." style="width: 100%; height: 300px"></textarea>
  211. </div>
  212. </div>
  213. <div class="form-group draggable">
  214. <label class="col-sm-3 control-label no-padding-right" for="form-field-1">按钮:</label>
  215. <div class="col-sm-9">
  216. <a class="btn btn-mini btn-primary" onclick="">保存</a>
  217. <a class="btn btn-mini btn-danger" onclick="">取消</a>
  218. </div>
  219. </div>
  220. </form>
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div><!-- /.col -->
  229. </div><!-- row -->
  230. </div>
  231. </div>
  232. </div>
  233. <!-- 空白页结束 -->
  234. <!-- 空白页开始-->
  235. <div class="col-sm-6">
  236. <div class="nest" id="Blank_PageClose">
  237. <div class="title-alt">
  238. <h6>生成区域</h6>
  239. <div class="titleClose">
  240. <a class="gone" href="#Blank_PageClose">
  241. <span class="entypo-cancel"></span>
  242. </a>
  243. </div>
  244. <div class="titleToggle">
  245. <a class="nav-toggle-alt" href="#Blank_Page_Content">
  246. <span class="entypo-up-open"></span>
  247. </a>
  248. </div>
  249. </div>
  250. <div class="body-nest" id="Blank_Page_Content">
  251. <div class="row">
  252. <div class="col-sm-12">
  253. <div class="widget-box">
  254. <div class="alert alert-success alert-dismissable">
  255. 拖拽左侧表单元素到此区域
  256. </div>
  257. <div class="widget-body">
  258. <div class="widget-main">
  259. <div class="row">
  260. <div class="col-sm-7" style="width:100%;">
  261. <div class="ibox float-e-margins">
  262. <div>
  263. <div class="ibox-tools text-right">
  264. 请选择显示的列数:
  265. <select id="n-columns">
  266. <option value="1">显示1列</option>
  267. <option value="2">显示2列</option>
  268. </select>
  269. </div>
  270. </div>
  271. <hr>
  272. <div class="ibox-content">
  273. <div class="row form-body form-horizontal m-t">
  274. <div class="col-md-12 droppable sortable">
  275. </div>
  276. <div class="col-md-6 droppable sortable" style="display: none;">
  277. </div>
  278. <div class="col-md-6 droppable sortable" style="display: none;">
  279. </div>
  280. </div>
  281. <button type="submit" class="btn btn-warning" data-clipboard-text="testing" id="copy-to-clipboard">查看代码</button>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. <!-- 空白页结束 -->
  295. </div>
  296. <!-- 结束内容 -->
  297. </div>
  298. </div>
  299. </div>
  300. <!-- 结束右边内容 -->
  301. <!-- ###############################代码编写处end############################### -->
  302. <!-- 右侧隐藏滑块内容 -->
  303. <div th:include="admin/common/html/rightHide :: rightHide">
  304. </div>
  305. <!-- END 右侧隐藏滑块内容-->
  306. <!-- 通用js -->
  307. <div th:include="admin/common/html/js :: onload_js">
  308. </div>
  309. <!-- bootstarp 表格 -->
  310. <script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
  311. <script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
  312. <script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>
  313. <!-- 导出 -->
  314. <script th:src="@{/static/admin/assets/js/bootstrap/extensions/export/bootstrap-table-export.js}" type="text/javascript"></script>
  315. <script th:src="@{/static/admin/assets/js/bootstrap/extensions/export/tableExport.js}" type="text/javascript"></script>
  316. <!-- 弹窗 -->
  317. <script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
  318. <!-- 遮罩层 -->
  319. <script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
  320. <script type="text/javascript" th:src="@{/static/js/jquery-ui-1.10.4.min.js}"></script>
  321. <script type="text/javascript" th:src="@{/static/js/beautifyhtml.js}"></script>
  322. <script type="text/javascript">
  323. //$(top.hangge());
  324. $(function(){
  325. //时间控件
  326. $("#datetimepicker3").datetimepicker({
  327. format: "yyyy-mm-dd hh:00:00",
  328. startDate: new Date(),
  329. autoclose: true,
  330. todayBtn: true,
  331. language: 'zh-CN',
  332. initialDate:new Date(),
  333. minView: 1
  334. });
  335. //图标输入框
  336. $("#ssn").mask("99--AAA--9999", {
  337. placeholder: "*"
  338. });
  339. //颜色输入框1
  340. $('#cp2').colorpicker();
  341. //文件上传
  342. Dropzone.autoDiscover = false;//防止报"Dropzone already attached."的错误
  343. var myDropzone = new Dropzone("#dropz", {
  344. url: rootPath + "/FileController/upload",//文件提交地址
  345. method:"post", //也可用put
  346. paramName:"file", //默认为file
  347. maxFiles:1,//一次性上传的文件数量上限
  348. maxFilesize: 2, //文件大小,单位:MB
  349. acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
  350. addRemoveLinks:true,
  351. parallelUploads: 1,//一次上传的文件数量
  352. //previewsContainer:"#preview",//上传图片的预览窗口
  353. dictDefaultMessage:'拖动文件至此或者点击上传',
  354. dictMaxFilesExceeded: "您最多只能上传1个文件!",
  355. dictResponseError: '文件上传失败!',
  356. dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg。",
  357. dictFallbackMessage:"浏览器不受支持",
  358. dictFileTooBig:"文件过大上传文件最大支持.",
  359. dictRemoveLinks: "删除",
  360. dictCancelUpload: "取消",
  361. init:function(){
  362. this.on("addedfile", function(file) {
  363. //上传文件时触发的事件
  364. });
  365. this.on("success",function(file,data){
  366. //上传成功触发的事件
  367. if(data!=null&&data!=""){
  368. $("#dataId").val(data.data);
  369. }
  370. });
  371. this.on("error",function (file,data) {
  372. //上传失败触发的事件
  373. });
  374. this.on("removedfile",function(file){//删除文件触发结果
  375. //console.log(file);
  376. $("#dataId").val("");
  377. });
  378. }
  379. });
  380. //开关按钮
  381. $('.make-switch').bootstrapSwitch('setSizeClass', 'switch-small');
  382. //富文本
  383. $('.textarea').wysihtml5();
  384. })
  385. $(function() {
  386. //日期框
  387. //下拉框
  388. /* if(!ace.vars['touch']) {
  389. $('.chosen-select').chosen({allow_single_deselect:true});
  390. $(window)
  391. .off('resize.chosen')
  392. .on('resize.chosen', function() {
  393. $('.chosen-select').each(function() {
  394. var $this = $(this);
  395. $this.next().css({'width': $this.parent().width()});
  396. });
  397. }).trigger('resize.chosen');
  398. $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
  399. if(event_name != 'sidebar_collapsed') return;
  400. $('.chosen-select').each(function() {
  401. var $this = $(this);
  402. $this.next().css({'width': $this.parent().width()});
  403. });
  404. });
  405. $('#chosen-multiple-style .btn').on('click', function(e){
  406. var target = $(this).find('input[type=radio]');
  407. var which = parseInt(target.val());
  408. if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
  409. else $('#form-field-select-4').removeClass('tag-input-style');
  410. });
  411. }*/
  412. //上传
  413. /*$('#tp').ace_file_input({
  414. no_file:'请选择文件 ...',
  415. btn_choose:'选择',
  416. btn_change:'更改',
  417. droppable:false,
  418. onchange:null,
  419. thumbnail:false, //| true | large
  420. whitelist:'*',
  421. //whitelist:'gif|png|jpg|jpeg',
  422. //blacklist:'gif|png|jpg|jpeg'
  423. //onchange:''
  424. //
  425. });*/
  426. });
  427. //百度富文本
  428. /*setTimeout("ueditor()",500);
  429. function ueditor(){
  430. UE.getEditor('editor');
  431. }*/
  432. </script>
  433. <script>
  434. //下载代码
  435. function downloadCode(code){
  436. $("#htmlCode").val(code);
  437. $("#Form").submit();
  438. }
  439. //过滤ueditor
  440. var ueditorHtml = "";
  441. function getUeditorFormHtml(html,msg,isgx){
  442. var arryUe = html.split('<div class="ueQ313596790Que"></div>');
  443. if(arryUe.length == 3){
  444. var uejscode = "<script id=\"editor\" type=\"text/plain\" style=\"width:96%;height:200px;\"><\/script>";
  445. if(msg == '1'){
  446. if(isgx == '2'){
  447. ueditorHtml = arryUe[1];
  448. return arryUe[0] + '<div class="ueQ313596790Que"></div>' + uejscode + '<div class="ueQ313596790Que"></div>' + arryUe[2];
  449. }else{
  450. return arryUe[0] + '<div class="ueQ313596790Que"></div>' + ueditorHtml + '<div class="ueQ313596790Que"></div>' + arryUe[2];
  451. }
  452. }else{
  453. return arryUe[0] + uejscode + arryUe[2];
  454. }
  455. }else{
  456. return html;
  457. }
  458. }
  459. //过滤下拉框
  460. var selectHtml = "";
  461. function getSelectFormHtml(html,msg,isgx){
  462. var arrySe = html.split('<div class="selQ313596790Qsel"></div>');
  463. if(arrySe.length == 3){
  464. var selectcode ='<select class="chosen-select form-control" name="name" id="id" data-placeholder="请选择">'+
  465. '<option value=""></option>'+
  466. '<option value="">选项一</option>'+
  467. '<option value="">选项二</option>'+
  468. '<option value="">选项三</option>'+
  469. '</select>';
  470. selectcode = selectHtml == ''?selectcode:selectHtml;
  471. if(msg == '1'){
  472. if(isgx == '2'){
  473. return arrySe[0] + '<div class="selQ313596790Qsel"></div>' + selectcode + '<div class="selQ313596790Qsel"></div>' + arrySe[2];
  474. }else{
  475. selectHtml = arrySe[1];
  476. return html;
  477. }
  478. }else{
  479. return arrySe[0] + selectcode + arrySe[2];
  480. }
  481. }else{
  482. return html;
  483. }
  484. }
  485. //过滤file上传控件
  486. var fileHtml = "";
  487. function getFileFormHtml(html,msg,isgx){
  488. var arryFile = html.split('<div class="fileQ313596790Qfile"></div>');
  489. if(arryFile.length == 3){
  490. var filecode = "<input type=\"file\" id=\"tp\" name=\"tp\" />";
  491. if(msg == '1'){
  492. if(isgx == '2'){
  493. fileHtml = arryFile[1];
  494. return arryFile[0] + '<div class="fileQ313596790Qfile"></div>' + filecode + '<div class="fileQ313596790Qfile"></div>' + arryFile[2];
  495. }else{
  496. return arryFile[0] + '<div class="fileQ313596790Qfile"></div>' + fileHtml + '<div class="fileQ313596790Qfile"></div>' + arryFile[2];
  497. };
  498. }else{
  499. return arryFile[0] + filecode + arryFile[2];
  500. }
  501. }else{
  502. return html;
  503. };
  504. }
  505. $(document).ready(function() {
  506. setup_draggable();
  507. $("#n-columns").on("change",
  508. function() {
  509. var v = $(this).val();
  510. if (v === "1") {
  511. var $col = $(".form-body .col-md-12").toggle(true);
  512. $(".form-body .col-md-6 .draggable").each(function(i, el) {
  513. $(this).remove().appendTo($col);
  514. });
  515. $(".form-body .col-md-6").toggle(false);
  516. } else {
  517. var $col = $(".form-body .col-md-6").toggle(true);
  518. $(".form-body .col-md-12 .draggable").each(function(i, el) {
  519. $(this).remove().appendTo(i % 2 ? $col[1] : $col[0]);
  520. });
  521. $(".form-body .col-md-12").toggle(false);
  522. };
  523. });
  524. $("#copy-to-clipboard").on("click",
  525. function() {
  526. var $copy = $(".form-body").clone().appendTo(document.body);
  527. $copy.find(".tools, :hidden").remove();
  528. $.each(["draggable", "droppable", "sortable", "dropped", "ui-sortable", "ui-draggable", "ui-droppable", "form-body"],
  529. function(i, c) {
  530. $copy.find("." + c).removeClass(c).removeAttr("style");
  531. });
  532. var html = html_beautify($copy.html());
  533. html = getUeditorFormHtml(html,'2','2');
  534. html = getSelectFormHtml(html,'2','2');
  535. html = getFileFormHtml(html,'2','2');
  536. $copy.remove();
  537. $modal = get_modal(html).modal("show");
  538. $modal.find(".btn").remove();
  539. $('#myHtml').val(html);
  540. $modal.find("#myBtn").html("<button type=\"submit\" class=\"btn btn-primary\" data-clipboard-text=\"testing\" onclick=\"downloadCode($('#myHtml').val())\">下载代码</button>");
  541. $modal.find(".modal-title").html("生成的HTML代码");
  542. $modal.find(":input:first").select().focus();
  543. return false;
  544. });
  545. });
  546. var setup_draggable = function() {
  547. $(".draggable").draggable({
  548. appendTo: "body",
  549. helper: "clone"
  550. });
  551. $(".droppable").droppable({
  552. accept: ".draggable",
  553. helper: "clone",
  554. hoverClass: "droppable-active",
  555. drop: function(event, ui) {
  556. $(".empty-form").remove();
  557. var $orig = $(ui.draggable);
  558. if (!$(ui.draggable).hasClass("dropped")) {
  559. var $el = $orig.clone().addClass("dropped").css({
  560. "position": "static",
  561. "left": null,
  562. "right": null
  563. }).appendTo(this);
  564. var id = $orig.find(":input").attr("id");
  565. if (id) {
  566. id = id.split("-").slice(0, -1).join("-") + "-" + (parseInt(id.split("-").slice( - 1)[0]) + 1);
  567. $orig.find(":input").attr("id", id);
  568. $orig.find("label").attr("for", id);
  569. }
  570. $('<p class="tools col-sm-12 col-sm-offset-3"> <a class="edit-link">编辑HTML<a> | <a class="remove-link">移除</a></p>').appendTo($el);
  571. } else {
  572. if ($(this)[0] != $orig.parent()[0]) {
  573. var $el = $orig.clone().css({
  574. "position": "static",
  575. "left": null,
  576. "right": null
  577. }).appendTo(this);
  578. $orig.remove();
  579. }
  580. }
  581. }
  582. }).sortable();
  583. };
  584. var get_modal = function(content) {
  585. 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);
  586. return modal;
  587. };
  588. $(document).on("click", ".edit-link",
  589. function(ev) {
  590. var $el = $(this).parent().parent();
  591. var $el_copy = $el.clone();
  592. var $edit_btn = $el_copy.find(".edit-link").parent().remove();
  593. var memberHtml = html_beautify($el_copy.html());
  594. var editHtml = getUeditorFormHtml(memberHtml,'1','2');
  595. editHtml = getSelectFormHtml(editHtml,'1','2');
  596. editHtml = getFileFormHtml(editHtml,'1','2');
  597. var $modal = get_modal(editHtml).modal("show");
  598. $modal.find(":input:first").focus();
  599. $modal.find(".btn-success").click(function(ev2) {
  600. var html = $modal.find("textarea").val();
  601. html = getUeditorFormHtml(html,'1','1');
  602. getSelectFormHtml(html,'1','1');
  603. html = getFileFormHtml(html,'1','1');
  604. if (!html) {
  605. $el.remove();
  606. } else {
  607. $el.html(html);
  608. $edit_btn.appendTo($el);
  609. }
  610. $modal.modal("hide");
  611. return false;
  612. });
  613. });
  614. $(document).on("click", ".remove-link",
  615. function(ev) {
  616. $(this).parent().parent().remove();
  617. });
  618. </script>
  619. </body>
  620. </html>