jquery plugin 绑定自定义callback

selfcontroller 2013-11-27
大家好,最近在学习jquery plugin的 相关模式,网上也找到了很多的模板,所以也尝试写了一些,但是遇到一个问题,目前还不知道如何解决,希望借助大家的力量,让我通过这一关,详细看代码:
    ;(function($,window,document,undefined){
      var pluginName = 'ProgressBar';
      var defaults = {
        min:0,
        max:100,
        value:0,
        height:30,
        width:600,
        background:'yellow',
        start:function(){},
        end:function(){},
        change:function(){}
      };

      function Plugin(element,options){
        this.element   = element;
        this.settings  = $.extend({},defaults,options);
        this.$element  = $(element);
        this._defaults = defaults;
        this.name      = pluginName;
        this.init(); 
      };

      Plugin.prototype = {
        init:function(){
          this.build_html();
          this.bind_event();
        },
        build_html:function(){

          this.$element.addClass('progress-bar-warp').css({
            'height':this.settings.height + 'px',
            'width':this.settings.width + 'px',
            'line-height':this.settings.height + 'px',
            'position':'relative'
          }).data('ProgressBar',{
            min:this.settings.min,
            max:this.settings.max,
            val:this.settings.value,
            start:false
          });

          var bar_bg = $('<div class="progress-bar-bg"></div>');

          var percent = this._get_percent();

          bar_bg.css({
            "height":this.settings.height,
            "width":percent,
            "background":this.settings.background,
            "position":'relative'
          })

          var bar_val = $('<span class="progress-bar-val">' + percent + '</span>');

          bar_val.css({
            'position':'absolute',
            'display':'inline-block',
            'right':0
          })

          bar_bg.append(bar_val);

          this.$element.append(bar_bg);
          
        },
        _get_percent:function(){
          percent = Math.round((this.settings.value - this.settings.min) / (this.settings.max -this.settings.min) * 100 ) + '%';

          return percent;
        },
        bind_event:function(){
          console.log("asdfasdfasdfasdf")
          this.$element.bind('start.ProgressBar',this.settings.start).bind('change.ProgressBar', this.settings.change).bind('end.ProgressBar',this.settings.end);
        },
        get_min:function(){
          return this.settings.min;
        },
        get_max:function(){
          return this.settings.max;
        },
        get_value:function(){
          return this.settings.value;
        },
        set_value:function(val){
          var min   = this.get_min;
          var max   = this.get_max;
          var data  = this.$element.data('ProgressBar');
          var start = data.start;

          if(!start){
            var startEvent = $.extend({},data,{type:'start.ProgressBar'})
            this.$element.trigger(startEvent)
            data.start = true;
          }

          if(val < mim){
            val = this.settings.min;
          }

          if(val > max){
            val = this.settings.max;
          }

          var percent = this._get_percent();

          this.$element.find('div.progress-bar-bg').animate({"width":percent},function(){
            if(val == max ){
              endEvent = $.extend({},data,{type:'end.ProgressBar',percent:percent})
              this.$element.trigger(endEvent)
            }
          })

          var changeEvent = $.extend({},data,{type:'change.ProgressBar',percent:percent});
          this.$element.trigger(changeEvent);


        }
      };

      $.fn[pluginName] = function(options){
        return this.each(function(){
          if(!$.data(this,'plugin_' + pluginName)){
            $.data(this,'plugin_' + pluginName,new Plugin(this,options))
          }
        })

      }
    }(jQuery,window,document))


以上代码是我利用plugin的形式实现的一个progressbar的功能,我在这里允许用户添加三个回调函数:start,end,change,并在插件初始化的时候进行了事件绑定。在用户调用set_value的时候来执行这些自定义的callback,我的问题是:因为使用这中plugin的模板,我不知道怎样才能调用我的这些方法,比如:get_min,get_value,set_value等,请指点.以下是我调用的实例:
    var pro = $('.pro').ProgressBar({
        min: 10,
        max: 110,
        value: 40,
        height: 30,
        width: 200,
        start: function(event) {
            console.log('---start callback---');
        },
        change: function(event) {
            console.log("---change callback---")
        },
        end:function(event){
          console.log("--- end callback---")
        }
    });

请问,怎样才能访问我的get_min,set_value,get_value等方法呢
Global site tag (gtag.js) - Google Analytics