時程UI

張貼者： 日期：
最近看到一個UI覺得不錯，也用在專案上，主要是設定完後，就可以直接在頁面上show出設定的時間範圍，稍微想了一下，就把他寫出來了。



以前寫過progress bar，不過progress bar都是從0開始的bar，想要讓bar從中間開始，我有想幾個方法，一個是用margin把左邊空出來，另一個方法則是使用另一個div把不要的部分蓋掉，所以我準備像這樣的html。
<div class="schedule_bar">
<div class="schedule_begin"></div>
<div class="schedule_end"></div>
</div>
在css裡只要把外面的那層position設為relative，裡面的兩個設absolute，就可以用兩條bar，begin那條可以蓋掉end那條，就可以做出時間區間的UI了。

然後取得輸入的時間，把他換算成百分比並把值丟到css內就完成了。
view plaincopy to clipboardprint?
  1. $startPos=Math.round(($beginTime/23)*時間軸長度)+"%";   
  2. $(".schedule_row").find(".schedule_begin").css({width: $startPos});   
  3. $endPos=Math.round(($endTime/23)*時間軸長度)+"%";   
  4. $(".schedule_row").find(".schedule_end").css({width: $endPos});  

實作上我有抓到目前是編輯哪個時間軸，設定完UI上就可以直接呈現，並將值存到資料庫。

留言

張貼留言