時程UI
最近看到一個UI覺得不錯，也用在專案上，主要是設定完後，就可以直接在頁面上show出設定的時間範圍，稍微想了一下，就把他寫出來了。
以前寫過progress bar，不過progress bar都是從0開始的bar，想要讓bar從中間開始，我有想幾個方法，一個是用margin把左邊空出來，另一個方法則是使用另一個div把不要的部分蓋掉，所以我準備像這樣的html。
在css裡只要把外面的那層position設為relative，裡面的兩個設absolute，就可以用兩條bar，begin那條可以蓋掉end那條，就可以做出時間區間的UI了。
然後取得輸入的時間，把他換算成百分比並把值丟到css內就完成了。
實作上我有抓到目前是編輯哪個時間軸，設定完UI上就可以直接呈現，並將值存到資料庫。
以前寫過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內就完成了。
- $startPos=Math.round(($beginTime/23)*時間軸長度)+"%";
- $(".schedule_row").find(".schedule_begin").css({width: $startPos});
- $endPos=Math.round(($endTime/23)*時間軸長度)+"%";
- $(".schedule_row").find(".schedule_end").css({width: $endPos});
實作上我有抓到目前是編輯哪個時間軸，設定完UI上就可以直接呈現，並將值存到資料庫。
留言