jquery 插件开发备注

时间：2010-08-26 来源：liushan

以前针对DOM元素的插件(即$.fn.)存临时数据都加在当前元素上建个特殊的属性来存,(JQ内部直接也搞这样的)

今天发现其实JQ自己早就有对这个临时数据的存储方法:

$("dom").data(“mydata”,"this is data");

还有就是插件开发的时候我们经常要给插件添加方法,其实就用JS内部添加方法的方法即可

this.myfn=function(){}

下面给上一个显示部分文字的插件的源码:

(类似CSS的text-overflow,但本插件你需要提供显示几个字,用于精确控制显示数量)

/**
 * demo: 
 * 1.$("#limittext").limittext(); 
 * 2.$("#limittext").limittext({"limit":1}); 
 * 3.$("#limittext").limittext({"limit":1,"fill":"(部分隐藏)","fillid":"aaa"}); 
 * 3.$("#limittext").limittext({"limit":1,"fill":"(部分隐藏)","fillid":"aaa"}).limit(10); 
 * @param {Object} opt
 * @author Lonely

 * @link http://liushan.net
 */
jQuery.fn.extend({
  limittext:function(opt){
        opt=$.extend({
                "limit":30,
                "fill":"...",
                "fillid":null
        },opt);
        var $this=$(this);
        var body=$(this).data('body');
        if(body==null){
                body=$this.html();
                $(this).data('body',body);
        }
        this.limit=function(limit){
                if(body.length<=limit)
                        var showbody=body;
                else{
                        if(opt.fillid==null)
                                var showbody=body.substring(0,limit)+opt.fill;
                        else
                                var showbody=body.substring(0,limit)+"<span id='"+opt.fillid+"'>"+opt.fill+"<span>";
                }
                $(this).html(showbody);
        }
        this.limit(opt.limit);
        return this;
  }
});