SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

knockout.jsを使ってプログレスバーを作ってみた

とりあえず、コードだけちょろっとメモ。
f:id:minami_SC:20150622235221p:plain:w400


プログレスの値を表示するための空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;
}