javascript - jQuery中的简单进度条

Question

(function ( $ ) {

    $.fn.progress = function( options ) {

        // This is the easiest way to have default options.
           var defaults = { 
             amount: 100,
             color: 'rgb(0,128,0)'
            }; 

        var options = $.extend({}, defaults, options);

        //firstly, make me a progressbar
        this.css({'width':'500px','height':'25px','border':'1px solid black','background-color':'white'}); 

        //find the div to extend
        var div = this.find("div");
        div.css({'backgroundColor':options.color,'width':'0'}).animate({'width':options.amount});

        return this;

    };

}( jQuery ));

这是我用于 jQuery 进度条的代码，称为 $(selector).progress(options)
我希望能够键入 $(selector).progress(10) 以使进度条滑动 10% 但它确实如此在谷歌浏览器中不起作用。请有人可以帮助我

Answer 1

(function ( $ ) {

    $.fn.progress = function( options ) {

        // Allow shorthand .progress(amount) or .progress('rgb(...)')
        switch (typeof options) {
        case "number":
            options = { amount: options };
            break;
        case "string":
            options = { color: options };
            break;
        }    

        // This is the easiest way to have default options.
           var defaults = { 
             amount: 100,
             color: 'rgb(0,128,0)'
            }; 

        var options = $.extend({}, defaults, options);

        //firstly, make me a progressbar
        this.css({'width':'500px','height':'25px','border':'1px solid black','background-color':'white'}); 

        //find the div to extend
        var div = this.find("div");
        div.css({'backgroundColor':options.color,'width':'0'}).animate({'width':options.amount});

        return this;

    };

}( jQuery ));

Answer 2

 $(selector).progress({amount : 10 });