全端基础-前端(3). panel 架构(在行事曆上，建立新事件的 UI）

1.标题
(1).Event-input版
index.php

<div id="info-panel">    <div class="close">x</div>    <div class="title">        <label for="events">Event</label>        <input type="text" name="" id="events">    </div></div>

--点Event会focus到text表单

(2).Event-div版
index.php

<div id="info-panel">    <div class="close">x</div>    >     <div class="title">>     <label>Event</label>>     <div contenteditable="true"></div>>     </div>     </div>

2.时间器(开始与结束的时间)
index.php

<div id="info-panel">    ......            >     <div class="time-picker">>         <div class="selected-date">>             <span class="month">10</span>/<span class="date">20</span>>         </div>>         <div class="from">>             <label for="from">from</label>>             <input id="from" type="time" name="start_time">>         </div>>         <div class="to">>             <label for="to">to</label>>             <input id="to" type="time" name="end_time">>         </div>>     </div></div>

3.描述

index.php

<div id="info-panel">     ......     >      <div class="description">>          <label for="">description</label>>          <div id="description" contenteditable="true"></div>>      </div></div>

4.按钮

index.php

<div id="info-panel">     ......          >     <div class="buttons">>         <button class="create">create</button>>         <button class="update">update</button>>         <button class="cancel">cancel</button>>         <button class="delete">delete</button>>     </div></div>