2012-01-03 24 views
1

任何人都可以告訴我如何去做這個jQuery插件可鏈接?該插件將文本輸入限制在一個字段中,並在傳入時將剩餘的文本計數返回給第二個參數。謝謝。如何讓這個jQuery插件可鏈接?

(function($) { 

$.fn.extend({ 
    limit: function(limit, element) { 
     var interval; 
     var self=$(this); 
     $(this).focus(function(){ 
      interval = window.setInterval(function(){ 
       substring(self, limit, element); 
      },100) 
     }); 
     $(this).blur(function(){ 
      clearInterval(interval); 
      substring(self, limit, element); 
     }); 
     substring(self, limit, element); 
    } 
}); 

function substring(self, limit, element) { 
    var val = $(self).val(); 
    var length = val ? val.length : 0 ; 
    if(length > limit) { 
     $(self).val($(self).val().substring(0,limit)); 
    } 
    var toe = typeof element; 
    if (toe!='undefined') { 
     if (toe=='string') { 
      $(element).html((limit-length<=0)?'0':limit-length); 
     } else if (toe=='object') { 
      element.html((limit-length<=0)?'0':limit-length); 
     } 
    } 
} 

})(jQuery); 

回答

4

只是在方法結束時return this;

+0

你的意思是直接在substring(self,limit,element)之後;在極限功能? – regan 2012-01-03 22:28:05

2

始終在一個插件的方法的最後返回這個(這也是正常現象,應該總是這樣做,除非有一個良好的和有據可查的原因):

$.fn.extend({ 
    limit: function(limit, element) { 
     var interval; 
     var self=$(this); 
     $(this).focus(function(){ 
      interval = window.setInterval(function(){ 
       substring(self, limit, element); 
      },100) 
     }); 
     $(this).blur(function(){ 
      clearInterval(interval); 
      substring(self, limit, element); 
     }); 
     substring(self, limit, element); 
     return this; 
    } 
}); 
2

我會走得更遠了一步並允許這通過使用each()功能的jQuery元件的陣列上工作:

$.fn.extend({ 
    limit: function(limit, element) { 
     return this.each(function() { 
      var self=$(this); 
      $(this).focus(function(){ 
       interval = window.setInterval(function(){ 
        substring(self, limit, element); 
       },100) 
      }); 
      $(this).blur(function(){ 
       clearInterval(interval); 
       substring(self, limit, element); 
      }); 
      substring(self, limit, element); 
     }); 
    } 
}); 

另見http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability用於與jQuery插件的編輯更多的信息。