knockout.jsを使ってプログレスバーを作ってみた
とりあえず、コードだけちょろっとメモ。
プログレスの値を表示するための空divを作って、cssのwidthプロパティをデータバインドで制御してます。
かなりシンプルなコードだけど、必要十分な機能は果たせそうですw
html/css共にプレーンに書いてるので、好みに応じてcssを弄れば、オシャレなプログレスバーもサクっと作れるかな、、と。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Progressbar Sample</title> <link rel="stylesheet" href="app.css" type="text/css" /> <script src="Scripts/knockout-3.3.0.js"></script> <script src="app.js"></script> </head> <body> <h2>プログレスバーのサンプル</h2> <input type="range" data-bind="value: currentValue" /> <div class="progress"> <div class="progress_value" data-bind="style: {width: currentValue() + '%'}"></div> </div> </body> </html>
app.ts
/// <reference path="scripts/typings/knockout/knockout.d.ts" /> class AppViewModel { public currentValue: KnockoutObservable<number> = ko.observable<number>(60); } window.onload = () => { var viewModel = new AppViewModel(); ko.applyBindings(viewModel); };
app.css
.progress { background: #ffffff; width: 600px; border: 1px solid gray; padding: 1px; box-sizing: border-box; border-radius: 3px; } .progress_value { background: linear-gradient(to bottom, #7bf, #49e); border-radius: 2px; height: 20px; }