jQuery中的简单进度条

时间:2013-11-03 16:41:03

标签: javascript jquery html

(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%,但它在Google Chrome中不起作用。请有人帮帮我

2 个答案:

答案 0 :(得分:2)

(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 ));

答案 1 :(得分:0)

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