jQuery Progress Bar

Discovery on the jQuery progress bar

by VtoCorleone

HTML

<script src="http://code.jquery.com/ui/1.8.15/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<label>Max:</label>
<input id="maxValue" type="input" />
<button id="submitVal" type="button">Submit Max</button>
</br>
<label>Increment:</label>
<input id="incrementValue" type="input" />
<button id="submitIncrement" type="button">Submit Increment</button>
</br>
<button id="destroyButton" type="button">Destroy ProgressBar widget</button>
</br>
</br>
<div id="progressbar"></div>

CSS

.progress-label {
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

JavaScript

$.widget("ui.HcProgressBar", {
    _privateMembers: {
        progressBarLabel: ""
    },
    options: {
        maxValue: 100,
        incrementValue: false
    },
    _create: function () {
        var self = this,
            o = self.options,
            el = self.element;

        el.append('<div class="progress-label"></div>');
        self._privateMembers.progressBarLabel = el.children().first();

        el.progressbar({
            value: o.incrementValue,
            max: o.maxValue,
            change: function () {
                self._privateMembers.progressBarLabel.text(self._getPercentValue() + "%");
            },
            complete: function () {
                self._destroy();
            }
        });

        if (o.incrementValue !== false && o.incrementValue > 0) {
            self._privateMembers.progressBarLabel.text(this._getPercentValue() + "%");
        }
    },
    _destroy: function () {
        this._privateMembers.progressBarLabel.remove();    
        this.element.progressbar("destroy");
    },
    _getPercentValue: function () {
        var self = this,
            o = self.options;

        var percentVal = (o.incrementValue / o.maxValue).toFixed(2);
        return percentVal.substring(2, percentVal.length);
    },
    _setOption: function (key, value) {
        var self = this,
            o = self.options,
            el = self.element;

        switch (key) {
            case "value":
                o.incrementValue = value;
                el.progressbar("value", o.incrementValue);
                break;
            case "max":
                o.maxValue = value;
                el.progressbar("max", o.maxalue);
                break;
        }
    },
    destroy: function () {
        this._destroy();
    }
});

var HcProgressBar = (function ($, undefined) {

    // kendoui Progress Bar
    var progressBar,
    // max value of Progress Bar
    maxValue,
    // incremented value that shows on the Progress Bar
   ...