iT邦幫忙

0

全端基礎-前端(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>

尚未有邦友留言

立即登入留言