design.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta charset="utf-8">
  6. <title>页面设计器</title>
  7. <!-- Le styles -->
  8. <link href="${ctx}/assets/lib/design/bootstrap.css" rel="stylesheet">
  9. <link href="${ctx}/assets/lib/design/layoutit.css" rel="stylesheet">
  10. <link href="${ctx}/assets/lib/design/mine.css" rel="stylesheet">
  11. <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  12. <!--[if lt IE 9]>
  13. <script src="${ctx}/assets/lib/design/html5shiv.js"></script>
  14. <![endif]-->
  15. <!-- Fav and touch icons -->
  16. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="${ctx}/assets/lib/design/apple-touch-icon-144-precomposed.png">
  17. <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${ctx}/assets/lib/design/apple-touch-icon-114-precomposed.png">
  18. <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${ctx}/assets/lib/design/apple-touch-icon-72-precomposed.png">
  19. <link rel="apple-touch-icon-precomposed" href="${ctx}/assets/lib/design/apple-touch-icon-57-precomposed.png">
  20. <link rel="shortcut icon" href="${ctx}/assets/lib/design/favicon.png">
  21. <link href="${ctx}//assets/lib/jqueryui/jquery-ui.theme.css" rel="stylesheet">
  22. <script type="text/javascript" src="${ctx}/assets/lib/design/jquery.js"></script>
  23. <script type="text/javascript" src="${ctx}/assets/lib/design/jquery-ui.min.js"></script>
  24. <script type="text/javascript" src="${ctx}/assets/lib/design/jquery.ui.touch-punch.min.js"></script>
  25. <script type="text/javascript" src="${ctx}/assets/lib/design/bootstrap.min.js"></script>
  26. <script type="text/javascript" src="${ctx}/assets/lib/design/jquery.htmlclean.js"></script>
  27. <script type="text/javascript" src="${ctx}/assets/lib/design/scripts.min.js"></script>
  28. <script type="text/javascript" src="${ctx}/assets/lib/design/myscripts.js"></script>
  29. <link rel='stylesheet' href='${ctx}/assets/lib/colorpicker/evol-colorpicker.css' />
  30. <script src='${ctx}/assets/lib/colorpicker/evol-colorpicker.js'></script>
  31. <link href="${ctx}/assets/lib/design/css/style.css" rel="stylesheet">
  32. </head>
  33. <body class="edit">
  34. <div class="navbar navbar-inverse navbar-fixed-top navbar-layoutit">
  35. <div class="navbar-header">
  36. <button data-target="navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
  37. <span class="glyphicon-bar"></span>
  38. <span class="glyphicon-bar"></span>
  39. <span class="glyphicon-bar"></span>
  40. </button>
  41. <a class="navbar-brand" href="index.html">
  42. <img src="${ctx}/assets/lib/design/favicon.png" />
  43. 页面设计器
  44. <span class="label label-default">4.0</span>
  45. </a>
  46. </div>
  47. <div class="collapse navbar-collapse">
  48. <ul class="nav" id="menu-layoutit">
  49. <li>
  50. <div class="btn-group" data-toggle="buttons-radio">
  51. <button type="button" id="edit" class="active btn btn-xs btn-primary"> <i class="glyphicon glyphicon-edit "></i>
  52. 编辑
  53. </button>
  54. <button type="button" class="btn btn-xs btn-primary" id="devpreview">
  55. <i class="glyphicon-eye-close glyphicon"></i>
  56. 开发
  57. </button>
  58. <button type="button" class="btn btn-xs btn-primary" id="sourcepreview">
  59. <i class="glyphicon-eye-open glyphicon"></i>
  60. 预览
  61. </button>
  62. </div>
  63. <div class="btn-group">
  64. <button type="button" class="btn btn-xs btn-primary" id="button-download-modal" data-target="#downloadModal" role="button" data-toggle="modal"> <i class="glyphicon-chevron-down glyphicon"></i>
  65. 下载
  66. </button>
  67. <button class="btn btn-xs btn-primary" id="button-save-modal" onclick="saveHtmlLayout('${tmpFile}')" role="button" data-toggle="modal" data-target="#saveModal"> <i class="glyphicon-share glyphicon"></i>
  68. 保存
  69. </button>
  70. <button class="btn btn-xs btn-primary" href="#clear" id="clear" >
  71. <i class="glyphicon-trash glyphicon"></i>
  72. 清空
  73. </button>
  74. <button class="btn btn-xs btn-primary" href="#" rel="myconfig1" >
  75. <i class="glyphicon glyphicon-edit "></i>
  76. 页面属性
  77. </button>
  78. <div style="display:none">
  79. <input class="prop colorpicker" ref="background-color" style="width:120px;">
  80. </div>
  81. </div>
  82. </li>
  83. </ul>
  84. </div>
  85. <!--/.navbar-collapse -->
  86. </div>
  87. <!--/.navbar-fixed-top -->
  88. <div class="container">
  89. <div class="row">
  90. <div class="">
  91. <div class="sidebar-nav">
  92. <ul class="nav nav-list accordion-group">
  93. <li class="nav-header">
  94. <div class="pull-right popover-info">
  95. <i class="glyphicon glyphicon-question-sign"></i>
  96. <div class="popover fade right">
  97. <div class="arrow"></div>
  98. <h3 class="popover-title">帮助</h3>
  99. <div class="popover-content">
  100. 在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息,请访问
  101. <a href="http://v3.bootcss.com/css/#grid">BOOTSTRAP栅格系统.</a>
  102. </div>
  103. </div>
  104. </div>
  105. <i class="glyphicon-plus glyphicon"></i>
  106. 布局设置
  107. </li>
  108. <li class="rows" id="estRows">
  109. <div class="lyrow">
  110. <a href="#close" class="remove label label-danger">
  111. <i class="glyphicon-remove glyphicon"></i>
  112. 删除
  113. </a>
  114. <span class="drag label label-default">
  115. <i class="glyphicon glyphicon-move"></i>
  116. 拖动
  117. </span>
  118. <div class="preview">
  119. <input type="text" value="12" class="form-control"></div>
  120. <div class="view">
  121. <div class="row clearfix">
  122. <div class="col-md-12 column"></div>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="lyrow">
  127. <a href="#close" class="remove label label-danger">
  128. <i class="glyphicon-remove glyphicon"></i>
  129. 删除
  130. </a>
  131. <span class="drag label label-default">
  132. <i class="glyphicon glyphicon-move"></i>
  133. 拖动
  134. </span>
  135. <div class="preview">
  136. <input type="text" value="6 6" class="form-control"></div>
  137. <div class="view">
  138. <div class="row clearfix">
  139. <div class="col-md-6 column"></div>
  140. <div class="col-md-6 column"></div>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="lyrow">
  145. <a href="#close" class="remove label label-danger">
  146. <i class="glyphicon-remove glyphicon"></i>
  147. 删除
  148. </a>
  149. <span class="drag label label-default">
  150. <i class="glyphicon glyphicon-move"></i>
  151. 拖动
  152. </span>
  153. <div class="preview">
  154. <input type="text" value="4 8" class="form-control"></div>
  155. <div class="view">
  156. <div class="row clearfix">
  157. <div class="col-md-4 column"></div>
  158. <div class="col-md-8 column"></div>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="lyrow">
  163. <a href="#close" class="remove label label-danger">
  164. <i class="glyphicon-remove glyphicon"></i>
  165. 删除
  166. </a>
  167. <span class="drag label label-default">
  168. <i class="glyphicon glyphicon-move"></i>
  169. 拖动
  170. </span>
  171. <div class="preview">
  172. <input type="text" value="2 4 4 2" class="form-control"></div>
  173. <div class="view">
  174. <div class="row clearfix">
  175. <div class="col-md-2 column"></div>
  176. <div class="col-md-4 column"></div>
  177. <div class="col-md-4 column"></div>
  178. <div class="col-md-2 column"></div>
  179. </div>
  180. </div>
  181. </div>
  182. <div class="lyrow">
  183. <a href="#close" class="remove label label-danger">
  184. <i class="glyphicon-remove glyphicon"></i>
  185. 删除
  186. </a>
  187. <span class="drag label label-default">
  188. <i class="glyphicon glyphicon-move"></i>
  189. 拖动
  190. </span>
  191. <div class="preview">
  192. <input type="text" value="8 4" class="form-control"></div>
  193. <div class="view">
  194. <div class="row clearfix">
  195. <div class="col-md-8 column"></div>
  196. <div class="col-md-4 column"></div>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="lyrow">
  201. <a href="#close" class="remove label label-danger">
  202. <i class="glyphicon-remove glyphicon"></i>
  203. 删除
  204. </a>
  205. <span class="drag label label-default">
  206. <i class="glyphicon glyphicon-move"></i>
  207. 拖动
  208. </span>
  209. <div class="preview">
  210. <input type="text" value="4 4 4" class="form-control"></div>
  211. <div class="view">
  212. <div class="row clearfix">
  213. <div class="col-md-4 column"></div>
  214. <div class="col-md-4 column"></div>
  215. <div class="col-md-4 column"></div>
  216. </div>
  217. </div>
  218. </div>
  219. <div class="lyrow">
  220. <a href="#close" class="remove label label-danger">
  221. <i class="glyphicon-remove glyphicon"></i>
  222. 删除
  223. </a>
  224. <span class="drag label label-default">
  225. <i class="glyphicon glyphicon-move"></i>
  226. 拖动
  227. </span>
  228. <div class="preview">
  229. <input type="text" value="2 6 4" class="form-control"></div>
  230. <div class="view">
  231. <div class="row clearfix">
  232. <div class="col-md-2 column"></div>
  233. <div class="col-md-6 column"></div>
  234. <div class="col-md-4 column"></div>
  235. </div>
  236. </div>
  237. </div>
  238. </li>
  239. </ul>
  240. <#list widgetTypes as widgetType>
  241. <ul class="nav nav-list accordion-group">
  242. <li class="nav-header">
  243. <i class="glyphicon glyphicon-plus"></i>
  244. ${widgetType.dictvalue}
  245. <div class="pull-right popover-info">
  246. <i class="glyphicon glyphicon-question-sign "></i>
  247. <div class="popover fade right">
  248. <div class="arrow"></div>
  249. <h3 class="popover-title">帮助</h3>
  250. <div class="popover-content">
  251. 将组件元素拖放入你需要放入的栅格列中。之后,你可以设置该组件的样式
  252. </div>
  253. </div>
  254. </div>
  255. </li>
  256. <li class="boxes mute">
  257. <#list widgets as widget>
  258. <#if widget.WidgetType==widgetType.keyid>
  259. <div class="box box-element">
  260. <a href="#close" class="remove label label-danger">
  261. <i class="glyphicon glyphicon-remove"></i>
  262. 删除
  263. </a>
  264. <span class="drag label label-default">
  265. <i class="glyphicon glyphicon-move"></i>
  266. 拖动
  267. </span>
  268. <div class="configuration">
  269. <a class="btn btn-xs btn-default " href="#" rel="myconfig">属性</a>
  270. <div style="display:none">
  271. ${widget.WidgetConfig!}
  272. </div>
  273. </div>
  274. <div class="preview">${widget.widgetname!}</div>
  275. <div class="view">
  276. ${widget.WidgetCode!}
  277. </div>
  278. </div>
  279. </#if>
  280. </#list>
  281. </li>
  282. </ul>
  283. </#list>
  284. </div>
  285. </div>
  286. <!--/span-->
  287. <div class="demo">
  288. ${layout}
  289. </div>
  290. <!--/span-->
  291. <div id="download-layout">
  292. <div class="container"></div>
  293. </div>
  294. </div>
  295. <!--/row-->
  296. </div>
  297. <!--/.fluid-container-->
  298. <script type="text/javascript">
  299. function saveLayout(){
  300. return;
  301. $.ajax({
  302. type: "POST",
  303. url: "/build_v3/saveLayout",
  304. data: { 'layout-v3': $('.demo').html() },
  305. success: function(data) {
  306. //updateButtonsVisibility();
  307. }
  308. });
  309. }
  310. //下载代码
  311. function downloadLayout(){
  312. $.ajax({
  313. type: "POST",
  314. url: "/build_v3/downloadLayout",
  315. data: { 'layout-v3': $('#download-layout').html() },
  316. success: function(data) { window.location.href = 'download.html'; }
  317. });
  318. }
  319. function downloadHtmlLayout(){
  320. $.ajax({
  321. type: "POST",
  322. url: "/build_v3/downloadLayout",
  323. data: { 'layout-v3': $('#download-layout').html() },
  324. success: function(data) { window.location.href = 'downloadhtml.html'; }
  325. });
  326. }
  327. function undoLayout() {
  328. $.ajax({
  329. type: "POST",
  330. url: "/build_v3/getPreviousLayout",
  331. data: { },
  332. success: function(data) {
  333. undoOperation(data);
  334. }
  335. });
  336. }
  337. function redoLayout() {
  338. $.ajax({
  339. type: "POST",
  340. url: "/build_v3/getPreviousLayout",
  341. data: { },
  342. success: function(data) {
  343. redoOperation(data);
  344. }
  345. });
  346. }
  347. $(document).on('hidden.bs.modal', function (e) {
  348. $(e.target).removeData('bs.modal');
  349. });
  350. $('body').on('click', '#continue-share-non-logged', function () {
  351. $('#share-not-logged').hide();
  352. $('#share-logged').removeClass('hide');
  353. $('#share-logged').show();
  354. });
  355. $('body').on('click', '#continue-download-non-logged', function () {
  356. $('#download-not-logged').hide();
  357. $('#download').removeClass('hide');
  358. $('#download').show();
  359. $('#downloadhtml').removeClass('hide');
  360. $('#downloadhtml').show();
  361. $('#download-logged').removeClass('hide');
  362. $('#download-logged').show();
  363. });
  364. $(function(){
  365. $.each(${columns},function(i, item){
  366. $(".bindColumn").append("<option value='"+item.id+"'>"+item.name+"</option>");
  367. })
  368. })
  369. </script>
  370. <div class="modal fade" id="downloadModal" tabindex="-1" role="dialog" aria-labelledby="downloadModalLabel" aria-hidden="true">
  371. <div class="modal-dialog">
  372. <div class="modal-content">
  373. <div class="modal-header">
  374. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  375. <h4 class="modal-title">下载</h4>
  376. </div>
  377. <div class="modal-body">
  378. <div id="download-logged" class="" >
  379. <p>
  380. <textarea></textarea>
  381. </p>
  382. </div>
  383. </div>
  384. <div class="modal-footer">
  385. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  386. </div>
  387. </div>
  388. <!-- /.modal-content -->
  389. </div>
  390. <!-- /.modal-dialog -->
  391. <script type="text/javascript">
  392. downloadLayoutSrc();
  393. $('#modal-download-sign-in-button').click(function(event){
  394. $('.help-inline').hide();
  395. var form = $('#boxDownloadLoginForm');
  396. var ajaxLoginUrl = 'ajaxlogin.html';
  397. jQuery.ajax({
  398. type : "post",
  399. dataType : "json",
  400. url : ajaxLoginUrl,
  401. data : form.serialize(),
  402. success: function(response) {
  403. if(response.success){
  404. $('#download-not-logged').hide();
  405. $('#download').removeClass('hide');
  406. $('#download').show();
  407. $('#downloadhtml').removeClass('hide');
  408. $('#downloadhtml').show();
  409. $('#download-logged').removeClass('hide');
  410. $('#download-logged').show();
  411. }else {
  412. if(response.errors && response.errors.length > 0){
  413. $.each(response.errors, function(i, item) {
  414. $('#'+item.field+'-download-error').html(item.error);
  415. $('#'+item.field+'-download-error').show();
  416. });
  417. }
  418. }
  419. },
  420. error: function(response) {
  421. }
  422. });
  423. return false;
  424. });
  425. </script>
  426. </div>
  427. <!-- 属性对话框 -->
  428. <div class="modal fade" id="myconfigModal" tabindex="-1" role="dialog" aria-labelledby="myconfigModalLabel" aria-hidden="true">
  429. <div class="modal-dialog">
  430. <div class="modal-content">
  431. <div class="modal-header">
  432. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  433. <h4 class="modal-title">属性</h4>
  434. </div>
  435. <div class="modal-body">
  436. </div>
  437. <div class="modal-footer">
  438. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  439. </div>
  440. </div>
  441. <!-- /.modal-content -->
  442. </div>
  443. <!-- /.modal-dialog -->
  444. <script type="text/javascript">
  445. </script>
  446. </div>
  447. <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="shareModalLabel" aria-hidden="true"></div>
  448. <div class="modal fade" id="feedbackModal" tabindex="-1" role="dialog" aria-labelledby="feedbackModalLabel" aria-hidden="true">
  449. <div class="modal-dialog">
  450. <div class="modal-content">
  451. <div class="modal-body">
  452. <div id="download-logged" class="" >
  453. <div class="alert alert-info">
  454. 有任何问题,可邮件联系
  455. <a href="mailto:admin@ibootstrap.cn">admin@ibootstrap.cn</a>
  456. </div>
  457. </div>
  458. </div>
  459. </div>
  460. <!-- /.modal-content -->
  461. </div>
  462. <!-- /.modal-dialog -->
  463. </div>
  464. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  465. <div class="modal-dialog">
  466. <div class="modal-content">
  467. <div class="modal-header">
  468. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  469. <h4 class="modal-title" id="myModal1">修改相关信息</h4>
  470. </div>
  471. <div class="modal-body">
  472. <form class="form-horizontal">
  473. <div class="row">
  474. <div class="form-group">
  475. <label class="col-sm-4 control-label">填写相关内容</label>
  476. <div class="col-sm-8">
  477. <input type="text" class="form-control"/>
  478. </div>
  479. </div>
  480. </div>
  481. </form>
  482. </div>
  483. <div class="modal-footer" style="text-align:center">
  484. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  485. <button type="button" class="btn btn-primary" id="save">保存</button>
  486. </div>
  487. </div>
  488. <!-- /.modal-content -->
  489. </div>
  490. <!-- /.modal-dialog -->
  491. </div>
  492. </body>
  493. </html>