jquery插件封装：滚动条

最近研究jQuery插件封装，感觉颇有技术含量，要知道jQuery插件封装是进阶的第一步嘛，呵呵。现把封装的一种框架取出来供下次封装直接使用，如下

(function($){
        var $progress = $('.progress'), $bar = $('.progress__bar');

        $.fn.插件具体名= function(options){
            //参数设置
            var defaults = {
                beforeStart :function(){},
                completed : function(){},
                isHideAtStart : false
            };
            var sets = $.extend(defaults,options);
            resetColors = function() {
                $bar.removeClass('progress__bar--green').removeClass('progress__bar--yellow').removeClass('progress__bar--orange').removeClass('progress__bar--blue');
            };
            update = function(){
                //相关操作

            };
            start = function(){
                if(sets.completed.isHideAtStart){ $(this).show(); }
                update();
            };
            stop = function(){
                resetColors();
                sets.completed.apply(this);
            };
            sets.beforeStart.apply(this);
            start();
        }   
})(jQuery);

调用过程

    $("#div_progress_bar").插件具体名({
        beforeStart:function(){
            //alert("开始执行");
        },
        completed:function(){
            //alert("执行结束");
        }
    });

一个封装的实例demo

(function($){
        var $progress = $('.progress'), $bar = $('.progress__bar'), $text = $('.progress__text'), percent = 0, update, resetColors, speed = 1000, orange = 30, yellow = 55, green = 85, progressTimer;
        resetColors = function() {
            $bar.removeClass('progress__bar--green').removeClass(
                    'progress__bar--yellow').removeClass('progress__bar--orange')
                    .removeClass('progress__bar--blue');
            $progress.removeClass('progress--complete');
        };
        $.fn.progressBar = function(options){
            var defaults = {
                beforeStart:function(){},
                completed: function(){}
            };
            var sets = $.extend(defaults,options);
            updateProgressBar=function(){
                progressTimer = setTimeout(function() { percent += 30;//Math.random() * 1.8; percent = parseFloat(percent.toFixed(1)); $text.html(percent + '%'); if (percent >= 100) { percent = 100; $progress.addClass('progress--complete'); $bar.addClass('progress__bar--blue'); $text.find('em').text('处理完成'); stopProgressBar(); sets.completed.apply(this); } else { if (percent >= green) { $bar.addClass('progress__bar--green'); } else if (percent >= yellow) { $bar.addClass('progress__bar--yellow'); } else if (percent >= orange) { $bar.addClass('progress__bar--orange'); } updateProgressBar(); } $bar.css({ width : percent + '%' }); }, speed);
            };
            startProgressBar = function(){
                setTimeout(function () { $progress.addClass('progress--active'); updateProgressBar(); }, 1000);
            };
            stopProgressBar = function(){
                percent = 0;
                clearTimeout(progressTimer);
                resetColors();
            };
            sets.beforeStart.apply(this);;
            startProgressBar();
        }   
})(jQuery);

调用过程

$(window).bind("load", function() {
    $("#div_progress_bar").hide();
    setInterval(timeTask, 5 * 1000);
});
function timeTask(){
    $("#div_progress_bar").progressBar({
        beforeStart:function(){
            $("#div_progress_bar").show();
            //alert("开始执行");
        },
        completed:function(){
            $("#div_progress_bar").hide();
            //alert("执行结束");
        }
    });
}