時程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內就完成了。
  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上就可以直接呈現,並將值存到資料庫。

留言

熱門文章