CodingSouls团队-个人博客（九）

今天是团队编程冲刺的第九天：

昨天完成了讨论中的回复界面设计，

今天的任务是完成编辑帖子的界面

编程时间3h，代码行数：60

 1 <% this.title = article.id ? '编辑帖子' : '发表帖子'; %>
 2 <% include header %>
 3 <style type="text/css">
 4     .am-panel-title{
 5     font-size: 1.6em;
 6     }
 7 </style>
 8 <div class="padding">
 9   <form class="" method="post">
10     <div class="ui top attached tabular menu">
11       <a class="item active" data-tab="edit">编辑</a>
12       <a class="item" data-tab="preview" id="preview_tab">预览</a>
13     </div>
14     <div class="ui bottom attached tab segment active" data-tab="edit">
15       <div class="ui form">
16         <div class="field">
17           <label for="title">标题</label>
18           <input type="text" id="title" name="title" value="<%= article.title %>">
19         </div>
20         <div class="field">
21           <label for="content">内容</label>
22           <textarea rows="15" id="content" name="content" class="markdown-edit"><%= article.content %></textarea>
23         </div>
24       </div>
25 
26     <% if (user && user.is_admin) { %>
27         <div class="ui <% if (article.is_notice) { %>checked <% } %>checkbox" style="margin-top: 15px; ">
28           <input <% if (article.is_notice) { %>checked=""<% } %> name="is_notice" type="checkbox">
29           <label><strong>公告</strong></label>
30           <p style="margin-top: 5px; ">选择后将显示在首页公告栏。</p>
31         </div>
32       <% } %>
33     </div>
34     <div class="ui bottom attached tab segment" data-tab="preview">
35       <div class="ui header" id="pv-title"></div>
36       <div id="pv-content" class="font-content"></div>
37     </div>
38     <div style="text-align: center; ">
39     <button id="submit_button" type="submit" class="ui labeled submit icon button">
40       <i class="icon edit"></i> 提交
41     </button>
42     </div>
43   </form>
44 </div>
45 
46 <script type="text/javascript">
47 $(function () {
48     function render(output, input) {
49       $.post('/api/markdown', { s: input.val() }, function (s) {
50         output.html(s);
51       });
52     }
53     $("#preview_tab").click(function () {
54       $("#pv-title").text($("#title").val());
55       $("#pv-content").text('Loading...');
56       render($("#pv-content"), $("#content"));
57     });
58     $('.tabular.menu .item').tab();
59 })
60 </script>
61 <% include footer %>

编辑帖子