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等方法呢 |